fix: display Payment Details verification modal when profile already has balance in it

[amnambiar]

Pull request template

Description

https://input-output.atlassian.net/browse/PLT-9671

Checklist

• Commit messages broadly make sense and follow the Conventional Commits format.
• PR targets master/develop
• New tests are added for the changes (if not, mention it in the PR description). These may include:
  • Unit tests,
  • Integration tests,
  • Property-Based testing,
  • End-to-end tests.
• The new version builds and passes all tests. If not, please mention it in the PR description.
• Self review of the code has been done.
• Reviewer has been requested.
• Ticket in Jira is in Review and sub-task for the reviewer has been created and assigned.

Summary by CodeRabbit

• New Features

  • Added new payment details display logic, showing amounts in USD and ADA.
  • Introduced onClickPay functionality in the registration process for enhanced user interaction.
  • Enhanced registration flow with fee calculation and form submission handling.
  • New balance fetching functionality to keep user profile information up-to-date.

• Bug Fixes

  • Updated payment registration to handle different balance statuses correctly.

• Documentation

  • Updated README to reflect more accurate code coverage metrics.

• Refactor

  • Replaced onSubmit with onClickPay in registration component for clarity.
  • Removed outdated getUserBalance function, optimizing balance handling.
  • Simplified fee calculations in the registration process using direct variable access.

• Chores

  • Added necessary imports and state management updates across various components and store slices for smoother operations and data handling.

[coderabbitai]

Walkthrough

The updates across several files primarily focus on enhancing the payment and registration processes within an application. Changes include the restructuring of data handling in payment details, modifications in registration logic to incorporate fee calculations, and updates to state management in Redux slices. The modifications aim to streamline user interactions and backend processes related to user registration and payment verification.

Changes

File Path	Change Summary
README.md	Updated shields percentage values in the project documentation.
src/.../PaymentDetailsVerification.tsx	Modified data object structure in Props and updated display logic for payment details.
src/.../RegisterSection.tsx src/pages/landing/index.tsx	Updated registration logic, replaced onSubmit with onClickPay, added new state variables and props related to payment and form submission.
src/store/slices/auth.slice.ts src/store/slices/profile.slice.ts	Enhanced profile management by fetching and handling profile balance.
src/store/slices/register.slice.ts	Revised fee calculation logic, removed redundant functions, and adjusted registration payment handling.
src/store/slices/tiers.slice.ts	Extended the Tier interface with new properties for better tier management.

---

Recent Review Details

Configuration used: .coderabbit.yaml

Commits

Files that changed from the base of the PR and between db7c63f and 1861909.

Files selected for processing (8)

• README.md (1 hunks)
• src/components/PaymentConfirmation/PaymentDetailsVerification.tsx (2 hunks)
• src/pages/landing/components/RegisterSection.tsx (2 hunks)
• src/pages/landing/index.tsx (4 hunks)
• src/store/slices/auth.slice.ts (2 hunks)
• src/store/slices/profile.slice.ts (4 hunks)
• src/store/slices/register.slice.ts (3 hunks)
• src/store/slices/tiers.slice.ts (1 hunks)

Additional comments not posted (18)

src/store/slices/tiers.slice.ts (1)

15-17: Added properties type, duration, and description to the Tier interface enhance the data structure and provide more detailed information about each tier. Ensure that these new fields are properly utilized wherever the Tier type is used throughout the application.

README.md (1)

5-5: Updated coverage percentages in the testing tool section. Ensure these values are accurate and reflect the current state of the codebase's test coverage.

src/store/slices/auth.slice.ts (2)

4-4: Imported fetchProfileBalance from profile.slice.ts. Verify that this function is used appropriately within this slice and that there are no unresolved dependencies.

---

22-22: Dispatched fetchProfileBalance({}) after fetching active subscriptions. This ensures that the profile balance is updated immediately after checking for active subscriptions, which is crucial for maintaining accurate state information.

src/components/PaymentConfirmation/PaymentDetailsVerification.tsx (2)

14-15: Modified the data object in the Props interface to include balance: number instead of fee: BigNum. This change aligns with the new requirements to handle user balances directly in the payment details verification.

---

49-50: Updated display logic for payment details to show amounts in USD and ADA differently based on the new structure of the data object. This enhancement improves the clarity of payment information presented to the user.

src/pages/landing/index.tsx (5)

12-12: Imported calculateFee from store/slices/register.slice along with other functions. Ensure that calculateFee is used appropriately within this component to handle fee calculations accurately.

---

38-47: Added new state variables price, profileBalance, detailsToBeVerified, submitForm, and form. These variables are essential for managing the state related to user registration and payment processes. Verify that they are used consistently and correctly throughout the component.

---

61-76: Updated handleRegistration function to include logic for calculating fees and setting verification details based on the selected tier and user input. This update is crucial for handling the registration process accurately and efficiently.

---

82-89: Updated onPaymentDetailsVerified function to handle payment registration and form submission. This function now correctly handles the workflow of verifying payment details and proceeding with user registration.

---

103-103: Included a new prop onClickPay in the RegisterSection component call. This change ensures that the custom payment handling function is used, which is important for integrating the new payment logic.

src/pages/landing/components/RegisterSection.tsx (2)

19-20: Replaced the onSubmit function with onClickPay in the Props interface and added a new boolean property submitForm. These changes are crucial for integrating the new payment handling logic into the registration process.

---

69-69: Updated the onSubmit function within the RegisterSection component to call onClickPay instead of onSubmit. This update ensures that the custom payment handling function is used, which is important for the new payment logic.

src/store/slices/register.slice.ts (3)

67-70: Modified the calculateFee function to accept two number parameters instead of BigNum. This change simplifies the function's interface and aligns with the new requirements for handling fees based on numerical values directly.

---

129-136: Updated the register function to use profileBalance directly and pass it along with subscription.price to calculateFee. This update is crucial for integrating the new payment logic into the registration process.

---

151-159: Updated the payForRegister function to include a balance parameter and handle payment based on the balance status. This function now correctly handles the workflow of making payments based on the user's balance, which is important for the new payment logic.

src/store/slices/profile.slice.ts (2)

87-87: Added a profileBalance field to the ProfileState interface. This field is essential for keeping track of the user's profile balance, which is crucial for the new payment handling logic.

---

240-248: Introduced the fetchProfileBalance async thunk to fetch profile balance data. This function is crucial for updating the user's profile balance in the state, which is important for the new payment logic.

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

• X
• Mastodon
• Reddit
• LinkedIn

Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai generate interesting stats about this repository and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[github-actions]

Coverage Report

Summary

Lines	Statements	Branches	Functions
	6.34% (149/2350)	1.39% (19/1361)	4.43% (22/496)

JUnit

Tests	Skipped	Failures	Errors	Time
6	0 💤	0 ❌	0 🔥	18.408s ⏱️

Coverage (6%)

File	% Stmts	% Branch	% Funcs	% Lines	Uncovered Line #s
All files	6.34	1.39	4.43	6.03
src	0	100	0	0
index.tsx	0	100	0	0	2–78
src/app	0	0	0	0
App.tsx	0	0	0	0	1–136
src/components/Avatar	90.9	40	100	100
index.tsx	90.9	40	100	100	14–24
src/components/CertificationMetadataForm	0	0	0	0
index.tsx	0	0	0	0	1–177
src/components/CertificationMetadataForm/components	0	0	0	0
AuditReportForm.tsx	0	100	0	0	3–66
FeedbackModal.tsx	0	0	0	0	3–44
ReportScriptForm.tsx	0	0	0	0	1–158
ReportScriptFormConfirmModal.tsx	0	100	0	0	3–31
src/components/CreateCertificate	0	0	0	0
CreateCertificate.tsx	0	0	0	0	1–196
src/components/CustomSwitch	0	0	0	0
CustomSwitch.tsx	0	0	0	0	1–53
src/components/LogsView	0	0	0	0
LogsView.tsx	0	0	0	0	1–107
LogsViewEntry.tsx	0	100	0	0	1–15
src/components/PaymentConfirmation	0	0	0	0
PaymentDetailsVerification.tsx	0	0	0	0	2–71
src/components/ProgressCard	0	0	0	0
CircularProgressBar.tsx	0	0	0	0	1–40
ProgressCard.tsx	0	0	0	0	1–44
src/components/ReconnectWallet	0	100	0	0
ReconnectWallet.tsx	0	100	0	0	1–31
src/components/RepoAccessStatus	0	0	0	0
RepoAccessStatus.tsx	0	0	0	0	2–28
src/components/Snackbar	0	0	0	0
index.tsx	0	0	0	0	1–56
src/components/StatusIcon	0	0	0	0
StatusIcon.tsx	0	0	0	0	4–18
src/components/Table	0	0	0	0
Table.tsx	0	0	0	0	1–216
src/components/Table/components/ColViz	0	0	0	0
ColViz.tsx	0	0	0	0	1–112
src/components/charts/PieChart	0	0	0	0
PieChart.tsx	0	0	0	0	2–32
src/compositions/InputGroup	0	0	0	0
index.tsx	0	0	0	0	3–35
src/compositions/InputGroup/components	0	0	0	0
Container.tsx	0	0	0	0	3–19
Input.tsx	0	0	0	0	3–59
src/compositions/Timeline	0	100	0	0
Timeline.tsx	0	100	0	0	3–23
src/compositions/Timeline/components/TimelineItem	12.38	0	0	9.41
TimelineItem.tsx	0	0	0	0	3–70
timeline.helper.tsx	16.04	0	0	11.76	20, 32, 36–57, 64–74, 79–142
src/pages/certification	21.95	0	0	16.16
Certification.helper.tsx	27.83	0	0	20.51	95–100, 104–112, 116–128, 135, 145, 149–150, 154, 158–162, 167–168, 173–174, 183–227
Certification.tsx	0	0	0	0	2–81
src/pages/certification/certification-result	0	0	0	0
CertificationResult.tsx	0	0	0	0	1–153
FullReportTable.tsx	0	0	0	0	1–61
fullReportTable.helper.tsx	0	0	0	0	1–126
src/pages/certification/components	0	0	0	0
FailedStatus.tsx	0	0	0	0	1–41
FileCoverageContainer.tsx	0	0	0	0	2–96
ResultContainer.tsx	0	0	0	0	2–114
SuccessCard.tsx	0	0	0	0	1–89
UnitTestFailureCard.tsx	0	0	0	0	1–35
src/pages/certification/components/AuditorRunTestForm	0	0	0	0
AuditorRunTestForm.tsx	0	0	0	0	1–312
src/pages/certification/components/DownloadResult	0	100	0	0
DownloadResult.tsx	0	100	0	0	1–20
src/pages/certification/components/TimelineView	0	0	0	0
TimelineView.tsx	0	0	0	0	1–235
src/pages/home	0	0	0	0
index.tsx	0	0	0	0	1–195
src/pages/landing	0	0	0	0
index.tsx	0	0	0	0	1–99
src/pages/landing/components	48.38	19.35	46.42	47.95
ConnectSection.tsx	76	50	50	73.68	46, 70–71, 75–76, 80, 85–94, 125–129
RegisterModal.tsx	0	0	0	0	3–43
RegisterSection.tsx	0	0	0	0	1–161
SubscriptionSection.tsx	100	100	100	100
src/pages/metrics	0	0	0	0
index.tsx	0	0	0	0	1–112
src/pages/metrics/components	0	0	0	0
AuditorReportsChart.tsx	0	0	0	0	2–73
MetricWidget.tsx	0	100	0	0	3–37
RunTimesChart.tsx	0	0	0	0	2–78
SubscriptionsChart.tsx	0	100	0	0	2–59
src/pages/profile	0	0	0	0
index.tsx	0	0	0	0	1–103
src/pages/reportUpload	0	100	0	0
index.tsx	0	100	0	0	3–19
src/pages/session	0	0	0	0
index.tsx	0	0	0	0	1–54
src/pages/session/components	29.26	2.7	15.38	29.41
AppBar.tsx	88.88	50	57.14	86.95	25, 29, 33
AppLayout.tsx	0	0	0	0	2–44
NavBar.tsx	0	0	0	0	2–115
src/pages/support-commands	0	0	0	0
config.tsx	0	100	100	0	1–72
index.tsx	0	0	0	0	1–177
src/pages/support-commands/components	0	0	0	0
Card.tsx	0	0	0	0	1–32
DeleteUserModal.tsx	0	100	0	0	3–60
UserDetailsModal.tsx	0	0	0	0	1–112
src/pages/support-commands/details	0	0	0	0
index.tsx	0	0	0	0	1–200
src/pages/testingHistory	0	100	0	0
index.tsx	0	100	0	0	1–37
src/pages/testingHistory/components	0	0	0	0
AppTable.tsx	0	0	0	0	1–269
HistoryContainer.tsx	0	0	0	0	1–64
src/utils	100	80	100	100
test-utils.tsx	100	80	100	100	22