RazorPay Plugin: Blank Page, Outdated Component References, and GraphQL Validation Errors

[coderabbitai]

Problem Summary

Multiple issues have been identified in the RazorPay plugin affecting the Transactions page functionality and other components:

---

Issue 1: Blank Page Rendered on Transactions Page When Plugin is Enabled

Description

When the RazorPay plugin is enabled, the UserPortal Transactions page (injector type "G1") renders a blank page instead of displaying the transaction data.

Expected Behavior

The RazorpayUserTransactionsInjector component should render properly and display user transactions in a table format with columns for Transaction ID, Amount, Status, Payment Method, Date, and Actions.

Current Behavior

The page renders blank even though the plugin is installed and activated.

Root Cause

Initial investigation suggests this is related to component loading and initialization issues in the plugin's injector implementation.

---

Issue 2: Incorrect Loader Component Reference Path

Description

The plugin incorrectly references an outdated Loader component using a relative path instead of the shared component.

Current Implementation

.../../../components/Loader/Loader

Expected Implementation

shared-components/LoadingState/LoadingState

Impact

• Breaks the loading state functionality
• Causes component import errors
• Prevents proper display of loading indicators

Affected Files

• plugins/Razorpay/admin/injector/RazorpayUserTransactionsInjector.tsx (likely)
• Any other components using the outdated Loader reference

---

Issue 3: GraphQL Validation Errors

Description

GraphQL validation errors are occurring in multiple plugin components, preventing proper data fetching and rendering.

Affected Pages

1. Admin Transactions Page

   • GraphQL query validation errors
   • Prevents transaction data from being fetched

2. Donation Form

   • GraphQL validation errors
   • Impacts donation functionality

Error Analysis

Based on the reported errors, the issues appear to be:

• Invalid GraphQL query syntax or structure
• Missing or incorrect field names in queries
• Type mismatches between query variables and schema
• Potentially outdated queries not matching current API schema

Expected Behavior

• GraphQL queries should validate successfully
• Data should be fetched without errors
• Forms should submit properly

Current Behavior

• Console shows GraphQL validation errors
• Data fetching fails
• Components may fail to render or show error states

---

Steps to Reproduce

1. Install and activate the RazorPay plugin in talawa-admin
2. Navigate to UserPortal → Transactions page
3. Observe blank page issue
4. Check browser console for component import errors related to Loader
5. Navigate to Admin Transactions page and Donation form
6. Observe GraphQL validation errors in console

---

Additional Context

This issue was discovered while investigating issue #6654 in the talawa-admin repository. The empty state handling for when plugins are nonexistent or disabled has been implemented in talawa-admin. However, these issues are specific to the talawa-plugin repository's RazorPay plugin implementation.

Related Files

• plugins/Razorpay/admin/injector/RazorpayUserTransactionsInjector.tsx
• plugins/Razorpay/admin/pages/UserTransactions.tsx
• plugins/Razorpay/admin/manifest.json

---

Screenshots

Screenshots demonstrating these issues will be attached to this issue showing:

1. Blank transaction page when plugin is enabled
2. Console errors related to Loader component
3. GraphQL validation errors in Admin Transactions page
4. GraphQL validation errors in Donation form

(Reporter: Please attach the screenshots from the investigation)

---

Proposed Solution

1. Fix Component References: Update all Loader imports to use the correct shared component path
2. Fix GraphQL Queries: Review and update all GraphQL queries to match the current API schema
3. Test Plugin Loading: Ensure the plugin properly initializes and registers with the "G1" injector type
4. Add Error Handling: Implement proper error boundaries and fallback UI for failed data fetching

---

Related Issues:

• talawa-admin#6654 (investigation that led to discovering these issues)

Environment:

• Repository: PalisadoesFoundation/talawa-plugin
• Plugin: RazorPay
• Extension Points: G1 (UserPortal Transactions)

Reported by: @adityai0

[adityai0]

@palisadoes

[rohitmishra318]

Hi @palisadoes / @adityai0

I went through the RazorPay plugin issue and noticed the incorrect Loader component reference mentioned in Issue 2.

I’d like to take this part up (updating the loader import to use the shared LoadingState component) and submit a focused PR for it.

Please let me know if that works

[github-actions]

This issue did not get any activity in the past 10 days and will be closed in 360 days if no update occurs. Please check if the develop branch has fixed it and report again or close the issue.

[palisadoes]

Unassigned. Inactivity

[adityai0]

I will be working on it next to update the imports.
also current plugin are using ant design library which isn't included in talawa-admin so it is causing runtime error.