Merge branch 'main' into sdk-pay-now-fix

.github/CODEOWNERS

@@ -1,12 +1,12 @@
-- @akash-c-k @ArushKapoorJuspay @PritishBudhiraja @seekshiva @vsrivatsa-juspay
+- @akash-c-k @ArushKapoorJuspay @PritishBudhiraja @seekshiva @vsrivatsa-edinburgh @swamu
 
 docs/ @akash-c-k
 LICENSE @akash-c-k
 README.md @akash-c-k
 SECURITY.md @akash-c-k
 .gitignore @ArushKapoorJuspay @PritishBudhiraja
 
-Hyperswitch-React-Demo-App/ @PritishBudhiraja @seekshiva @ArushKapoorJuspay @vsrivatsa-juspay
+Hyperswitch-React-Demo-App/ @PritishBudhiraja @seekshiva @ArushKapoorJuspay @vsrivatsa-edinburgh
 
 .husky/ @PritishBudhiraja @seekshiva
 .github/ @PritishBudhiraja @seekshiva
@@ -16,4 +16,4 @@ aws/ @seekshiva
 webpack.dev.js @ArushKapoorJuspay @PritishBudhiraja @seekshiva
 webpack.common.js @ArushKapoorJuspay @PritishBudhiraja @seekshiva
 
-src/ @seekshiva @PritishBudhiraja @ArushKapoorJuspay @vsrivatsa-juspay
+src/ @seekshiva @PritishBudhiraja @ArushKapoorJuspay @vsrivatsa-edinburgh @swamu

.github/workflows/pr-label-removal.yml

@@ -13,29 +13,16 @@ jobs:
       - name: Check out code
         uses: actions/checkout@v2
 
-      - name: Get existing labels
+      - name: Remove all labels
         run: |
           PR_NUMBER=$(jq --raw-output .pull_request.number "$GITHUB_EVENT_PATH")
-          TOKEN=$GITHUB_TOKEN
 
-          # Add your repository name if it's not the default branch
-          REPO_NAME=$(basename $GITHUB_REPOSITORY)
-
-          # Get existing labels on the PR
-          EXISTING_LABELS=$(curl -s -H "Authorization: Bearer ${{ secrets.AUTORELEASE_PAT }}" \
-            -H "Accept: application/vnd.github.v3+json" \
-            "https://api.github.com/repos/$GITHUB_REPOSITORY/issues/$PR_NUMBER" \
-            | jq -r '.labels | map(.name) | join(" ")')
-
-          echo $EXISTING_LABELS
-
-           # Remove existing labels
-          for LABEL in $EXISTING_LABELS; do
-            curl -X DELETE \
-              -H 'Accept: application/vnd.github.v3+json' \
-              -H 'Authorization: Bearer ${{ secrets.GITHUB_TOKEN }}' \
-              "https://api.github.com/repos/${{ github.repository }}/issues/${{ github.event.pull_request.number }}/labels/${LABEL}"
-          done
+          curl -L \
+          -X DELETE \
+          -H "Accept: application/vnd.github+json" \
+          -H "Authorization: Bearer ${{ secrets.GITHUB_TOKEN }}" \
+          -H "X-GitHub-Api-Version: 2022-11-28" \
+          https://api.github.com/repos/${GITHUB_REPOSITORY}/issues/${PR_NUMBER}/labels
 
       - name: Add new label
         run: |

.github/workflows/run-automation-test.yml

@@ -0,0 +1,60 @@
+name: Run Cypress Tests
+
+on:
+  pull_request:
+  merge_group:
+  push:
+    branches:
+      - main
+
+jobs:
+  cypress:
+    runs-on: ubuntu-latest
+    environment: Testing
+    env:
+      HS_Pub_Key: ${{ secrets.HYPERSWITCH_PUBLISHABLE_KEY }}
+      HS_Sec_Key: ${{ secrets.HYPERSWITCH_SECRET_KEY }}
+      HS_Prof_Id: ${{ secrets.PROFILE_ID }}
+      HS_Server_Url: "https://sandbox.hyperswitch.io"
+      HS_Client_Url: "http://localhost:9050"
+      # Environment variables for Hyperswitch credentials and URLs
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+        # Checks out the repository so that the workflow can access the code
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "20" # Specifies the version of Node.js to use
+          cache: "npm" # Caches npm dependencies to speed up subsequent installs
+
+      - name: Install dependencies
+        run: npm install
+        # Installs the necessary npm dependencies for the project
+
+      - name: Create .env file
+        working-directory: ./Hyperswitch-React-Demo-App
+        run: |
+          touch .env
+          echo STATIC_DIR = ./dist >> .env
+          echo HYPERSWITCH_PUBLISHABLE_KEY = $HS_Pub_Key >> .env
+          echo HYPERSWITCH_SECRET_KEY = $HS_Sec_Key >> .env
+          echo PROFILE_ID = $HS_Prof_Id >> .env
+          echo HYPERSWITCH_SERVER_URL = $HS_Server_Url >> .env
+          echo HYPERSWITCH_CLIENT_URL = $HS_Client_Url >> .env
+        # Creates a .env file with environment variables needed for the application
+
+      - name: Build and start local server
+        run: |
+          npm run re:build && npm start &
+          echo "Hyperswitch Web started" && cd Hyperswitch-React-Demo-App && npm start &
+          echo "Demo App started"
+        # Builds the project and starts both the Hyperswitch Web and Demo App servers in the background
+
+      - name: Run Cypress
+        uses: cypress-io/github-action@v6
+        with:
+          working-directory: ./cypress-tests
+        # Runs Cypress tests located in the specified directory

.gitignore

@@ -11,6 +11,8 @@ public/app.css
 /dist/
 **/*.bs.js
 .github/CODEOWNERS
+screenshots
+!cypress-tests/package-lock.json
 
 # yarn
 .pnp.*

CHANGELOG.md

@@ -1,3 +1,21 @@
+# [0.84.0](https://github.com/juspay/hyperswitch-web/compare/v0.83.0...v0.84.0) (2024-08-12)
+
+
+### Features
+
+* Web Automation Testing Setup ([#556](https://github.com/juspay/hyperswitch-web/issues/556)) ([0a03fcb](https://github.com/juspay/hyperswitch-web/commit/0a03fcbfd31993f54688e1db4443cb7d2fe21ace))
+
+# [0.83.0](https://github.com/juspay/hyperswitch-web/compare/v0.82.3...v0.83.0) (2024-08-12)
+
+
+### Features
+
+* dockerize the hyperswitch-web ([#555](https://github.com/juspay/hyperswitch-web/issues/555)) ([e7588f3](https://github.com/juspay/hyperswitch-web/commit/e7588f3243dddba56d938b93545c19095ae45077))
+
+## [0.82.3](https://github.com/juspay/hyperswitch-web/compare/v0.82.2...v0.82.3) (2024-08-12)
+
+## [0.82.2](https://github.com/juspay/hyperswitch-web/compare/v0.82.1...v0.82.2) (2024-08-09)
+
 ## [0.82.1](https://github.com/juspay/hyperswitch-web/compare/v0.82.0...v0.82.1) (2024-08-07)
 
 

Dockerfile

@@ -0,0 +1,25 @@
+FROM node:20-alpine
+
+# Set the working directory
+WORKDIR /usr/src/app
+
+# Copy package.json and package-lock.json to install dependencies
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install --ignore-scripts
+
+# Copy the rest of the application code
+COPY . .
+
+# Build the rescript code
+RUN npm run re:build
+
+# Build the application
+RUN npm run build
+
+# Expose the port that the Webpack dev server will run on
+EXPOSE 9050
+
+# Start the Webpack dev server
+CMD ["npm", "run", "start"]

Hyperswitch-React-Demo-App/.env

@@ -4,4 +4,4 @@ HYPERSWITCH_SECRET_KEY=
 HYPERSWITCH_SERVER_URL=
 HYPERSWITCH_CLIENT_URL=
 SELF_SERVER_URL=
-
+PROFILE_ID=""

Hyperswitch-React-Demo-App/server.js

@@ -39,63 +39,70 @@ app.get("/urls", (req, res) => {
   });
 });
 
-function createPaymentRequest() {
-  return {
-    currency: "USD",
-    amount: 2999,
-    order_details: [
-      {
-        product_name: "Apple iPhone 15",
-        quantity: 1,
-        amount: 2999,
-      },
-    ],
-    confirm: false,
-    capture_method: "automatic",
-    authentication_type: "three_ds",
-    customer_id: "hyperswitch_sdk_demo_id",
-    email: "[email protected]",
-    description: "Hello this is description",
-    shipping: {
-      address: {
-        line1: "1467",
-        line2: "Harrison Street",
-        line3: "Harrison Street",
-        city: "San Fransico",
-        state: "California",
-        zip: "94122",
-        country: "US",
-        first_name: "joseph",
-        last_name: "Doe",
-      },
-      phone: {
-        number: "8056594427",
-        country_code: "+91",
-      },
+const paymentData = {
+  currency: "USD",
+  amount: 2999,
+  order_details: [
+    {
+      product_name: "Apple iPhone 15",
+      quantity: 1,
+      amount: 2999,
     },
-    metadata: {
-      udf1: "value1",
-      new_customer: "true",
-      login_date: "2019-09-10T10:11:12Z",
+  ],
+  confirm: false,
+  capture_method: "automatic",
+  authentication_type: "three_ds",
+  customer_id: "hyperswitch_sdk_demo_id",
+  email: "[email protected]",
+  description: "Hello this is description",
+  shipping: {
+    address: {
+      line1: "1467",
+      line2: "Harrison Street",
+      line3: "Harrison Street",
+      city: "San Fransico",
+      state: "California",
+      zip: "94122",
+      country: "US",
+      first_name: "joseph",
+      last_name: "Doe",
     },
-    billing: {
-      address: {
-        line1: "1467",
-        line2: "Harrison Street",
-        line3: "Harrison Street",
-        city: "San Fransico",
-        state: "California",
-        zip: "94122",
-        country: "US",
-        first_name: "joseph",
-        last_name: "Doe",
-      },
-      phone: {
-        number: "8056594427",
-        country_code: "+91",
-      },
+    phone: {
+      number: "8056594427",
+      country_code: "+91",
+    },
+  },
+  metadata: {
+    udf1: "value1",
+    new_customer: "true",
+    login_date: "2019-09-10T10:11:12Z",
+  },
+  billing: {
+    address: {
+      line1: "1467",
+      line2: "Harrison Street",
+      line3: "Harrison Street",
+      city: "San Fransico",
+      state: "California",
+      zip: "94122",
+      country: "US",
+      first_name: "joseph",
+      last_name: "Doe",
     },
-  };
+    phone: {
+      number: "8056594427",
+      country_code: "+91",
+    },
+  },
+}
+
+const profileId = process.env.PROFILE_ID;
+if(profileId) {
+  paymentData.profile_id = profileId;
+}
+
+function createPaymentRequest() {
+  return paymentData;
 }
 
 app.get("/create-payment-intent", async (_, res) => {

cypress-tests/cypress.config.js

@@ -0,0 +1,10 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  projectId: "6r9ayw",
+  chromeWebSecurity: false,
+  e2e: {
+    baseUrl: "http://localhost:9050",
+  },
+  retries: { runMode: 1, openMode: 1 },
+});

cypress-tests/cypress/e2e/card-flow-e2e-test.cy.ts

@@ -0,0 +1,47 @@
+import * as testIds from "../../../src/Utilities/TestUtils.bs";
+import { CLIENT_URL } from "../support/utils";
+
+describe("Card payment flow test", () => {
+  let getIframeBody : () => Cypress.Chainable<JQuery<HTMLBodyElement>>;
+  let iframeSelector =
+      "#orca-payment-element-iframeRef-orca-elements-payment-element-payment-element";
+  beforeEach(() => {
+    getIframeBody = () => cy.iframe(iframeSelector);
+
+    cy.visit(CLIENT_URL);
+  });
+
+  it("page loaded successfully", () => {
+    cy.visit(CLIENT_URL);
+  });
+
+  it("title rendered correctly", () => {
+    cy.contains("Hyperswitch Unified Checkout").should("be.visible");
+  });
+
+  it("orca-payment-element iframe loaded", () => {
+    cy.get(
+      "#orca-payment-element-iframeRef-orca-elements-payment-element-payment-element"
+    )
+      .should("be.visible")
+      .its("0.contentDocument")
+      .its("body");
+  });
+
+  it('should check if cards are saved', () => {
+    // Visit the page where the test will be performed
+    cy.visit(CLIENT_URL);
+
+    getIframeBody().find(`[data-testid=${testIds.addNewCardIcon}]`)
+    .then($element => {
+      if ($element.length > 0) {
+        getIframeBody().find('[data-testid=cvvInput]').type('123');
+        getIframeBody().get("#submit").click();
+        cy.wait(2000);
+        cy.contains("Thanks for your order!").should("be.visible");
+      } else {
+        cy.log(' new card card flow');
+      }
+    });
+  });
+});

cypress-tests/cypress/fixtures/paymentMethods.json

@@ -0,0 +1,9 @@
+{
+    "card":"Card",
+    "klarna":"Klarna",
+    "affirm":"Affirm",
+    "aliPay":"Ali Pay",
+    "weChatPay":"WeChat"
+
+  }
+

cypress-tests/cypress/fixtures/testCustomer.json

@@ -0,0 +1,15 @@
+{
+  "cardNo":"4242 4242 4242 4242",
+  "threeDSCardNo":"4000000000003220",
+  "cardExpiry":"04/24",
+  "cardCVV":"424",
+  "billingName":"Arun Mishra",
+  "cardHolderName":"Arun Mishra",
+  "email":"[email protected]",
+  "address":"123 Main Street Apt 4B",
+  "city":"New York",
+  "country":"United States",
+  "state":"New York",
+  "postalCode":"10001",
+  "paymentSuccessfulText":"Payment successful"
+}