Feat/accept fe url for playground (#24)

Co-authored-by: Praful Koppalkar <[email protected]> Co-authored-by: arun.mishra <[email protected]>
juspay · Nov 17, 2023 · 1340a94 · 1340a94
1 parent e0a420b
commit 1340a94
Show file tree

Hide file tree

Showing 16 changed files with 270 additions and 77 deletions.
diff --git a/.gitignore b/.gitignore
@@ -20,7 +20,7 @@ yarn.lock
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
-
+dist
 
 # Sentry Auth Token
 .env.sentry-build-plugin
diff --git a/Hyperswitch-React-Demo-App/.env b/Hyperswitch-React-Demo-App/.env
@@ -1,4 +1,7 @@
 STATIC_DIR="./public"
 HYPERSWITCH_PUBLISHABLE_KEY="GET_PUBLISHABLE_KEY_FROM_DASHBOARD"
 HYPERSWITCH_SECRET_KEY="GET_SECRET_KEY_FROM_DASHBOARD"
-HYPERSWITCH_SERVER_URL="SELF_HOSTED_SERVER_URL"
+HYPERSWITCH_SERVER_URL="SELF_HOSTED_SERVER_URL"
+HYPERSWITCH_CLIENT_URL="SELF_HOSTED_CLIENT_URL"
+SELF_SERVER_URL="ENTER_YOUR_SERVER_APPLICATION_URL"
+SELF_CLIENT_URL="ENTER_YOUR_CLIENT_APPLICATION_URL"
diff --git a/Hyperswitch-React-Demo-App/package.json b/Hyperswitch-React-Demo-App/package.json
@@ -24,9 +24,9 @@
   },
   "scripts": {
     "start": "concurrently \"npm run start-client\" \"npm run start-server\"",
-    "start-client": "PORT=4242 react-scripts start",
+    "start-client": " webpack --config webpack.dev.js && webpack serve --config webpack.dev.js",
     "start-server": "node server.js",
-    "build": "react-scripts build",
+    "build": "webpack --config webpack.common.js",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "format": "prettier --write \"**/*.{js,jsx}\"",
@@ -52,7 +52,16 @@
   },
   "proxy": "http://localhost:5252",
   "devDependencies": {
+    "@babel/core": "^7.23.3",
+    "@babel/preset-env": "^7.23.3",
+    "@babel/preset-react": "^7.23.3",
+    "babel-loader": "^9.1.3",
     "concurrently": "4.1.2",
-    "prettier": "^2.7.1"
+    "prettier": "^2.7.1",
+    "webpack-cli": "^4.1.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "webpack": "^5.74.0",
+    "webpack-bundle-analyzer": "^4.8.0",
+    "webpack-dev-server": "^3.11.3"
   }
 }
diff --git a/Hyperswitch-React-Demo-App/patches/@juspay-tech+hyper-js+1.6.0.patch b/Hyperswitch-React-Demo-App/patches/@juspay-tech+hyper-js+1.6.0.patch
diff --git a/Hyperswitch-React-Demo-App/promptScript.js b/Hyperswitch-React-Demo-App/promptScript.js
@@ -2,21 +2,28 @@ const fs = require("fs");
 const prompt = require("prompt-sync")({ sigint: true });
 const publishableKey = prompt("Publishable Key : ");
 const secretKey = prompt("Secret Key : ");
-const serverURL = prompt("Server URL : ");
+const serverURL = prompt("Self-hosted Hyperswitch Server URL : ");
+const clientURL = prompt("Self-hosted Hyperswitch Client URL : ");
+
+const appServerURL = prompt("Application Server URL : ");
+const appClientURL = prompt("Application Client URL : ");
 
 const envPath = "./.env";
 
 const publishableKeyDesc = "Publishable key added";
 const secretKeyDesc = "Secret key added";
-const serverURLDesc = "Server URL added";
+const serverURLDesc = "Self-hosted Hyperswitch Server URL added";
+const clientURLDesc = "Self-hosted Hyperswitch Client URL added";
+const appServerURLDesc = "Application Server URL added";
+const appClientURLDesc = "Application Client URL added";
 
 function replace(filePath, oldLine, newLine, desc) {
   try {
     // Step 1: Read the file
     let data = fs.readFileSync(filePath, "utf8");
 
     // Step 2: Replace the line
-    data = data.replace(oldLine, newLine);
+    data = data.replaceAll(oldLine, newLine);
 
     // Step 3: Write the updated content back to the file
     fs.writeFileSync(filePath, data);
@@ -26,6 +33,19 @@ function replace(filePath, oldLine, newLine, desc) {
     console.error(`Error: ${error.message}`);
   }
 }
+replace(envPath, "SELF_HOSTED_CLIENT_URL", clientURL, clientURLDesc);
+replace(
+  envPath,
+  "ENTER_YOUR_CLIENT_APPLICATION_URL",
+  appClientURL,
+  appClientURLDesc
+);
+replace(
+  envPath,
+  "ENTER_YOUR_SERVER_APPLICATION_URL",
+  appServerURL,
+  appServerURLDesc
+);
 
 replace(
   envPath,

diff --git a/Hyperswitch-React-Demo-App/public/index.html b/Hyperswitch-React-Demo-App/public/index.html
diff --git a/Hyperswitch-React-Demo-App/public/playgroundIndex.html b/Hyperswitch-React-Demo-App/public/playgroundIndex.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <!-- <link rel="icon" href="/orca/elements/favicon.ico" /> -->
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1"
+    />
+    <meta name="theme-color" content="#000000" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600;700;800&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Qwitcher+Grypen:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
+
+    <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React Hyperswitch Payment Element</title>
+  </head>
+
+  <body>
+    <script src="<%= SCRIPT_SRC%>/HyperLoader.js"></script>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="app"></div>
+    <script src="/app.js"></script>
+
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/Hyperswitch-React-Demo-App/src/App.js b/Hyperswitch-React-Demo-App/src/App.js
@@ -1,6 +1,7 @@
 import "./App.css";
 import Payment from "./Payment";
 import Completion from "./Completion";
+import React from "react";
 
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 

diff --git a/Hyperswitch-React-Demo-App/src/CheckoutForm.js b/Hyperswitch-React-Demo-App/src/CheckoutForm.js
@@ -1,6 +1,7 @@
 import { PaymentElement } from "@juspay-tech/react-hyper-js";
 import { useState } from "react";
 import { useHyper, useElements } from "@juspay-tech/react-hyper-js";
+import React from "react";
 
 export default function CheckoutForm() {
   const hyper = useHyper();
@@ -31,7 +32,7 @@ export default function CheckoutForm() {
     if (error) {
       setMessage(error.message);
     } else {
-      window.location.href = `${window.location.origin}/completion`
+      window.location.href = `${window.location.origin}/completion`;
     }
 
     setIsProcessing(false);

diff --git a/Hyperswitch-React-Demo-App/src/Completion.js b/Hyperswitch-React-Demo-App/src/Completion.js
@@ -1,7 +1,11 @@
+import React from "react";
+
 function Completion(props) {
-  return window.location.href.includes("failed") ?
-    <h1>Payment failed, Please try again!</h1> :
-    <h1>Payment successful, Thank you! 🎉</h1>;
+  return window.location.href.includes("failed") ? (
+    <h1>Payment failed, Please try again!</h1>
+  ) : (
+    <h1>Payment successful, Thank you! 🎉</h1>
+  );
 }
 
 export default Completion;