Feature/270-payment-request-improvements (#535)

* Refactor payment request components and remove unused avatar functionality * Refactor payment request interfaces and update component bindings * Remove unused payment page and card styles, along with related tests and routing * Remove unused profile properties and related selectors from payment request state * Refactor payment request state and interfaces to unify request detail handling * Refactor payment request component to use unified request detail selector * Add payment setup logic in PayNowPage and rename payment effect * Implement payment type switching and update transaction handling for USD and token payments * Enhance payment type handling and conversion display in PayNowPage * Update payment request handling to use unified result property and enhance display of token amounts * Refactor PayNowPage component for improved readability and maintainability; update conversion token handling and enhance payment type switching logic * Refactor PayNowPage component imports and clean up unused payment request actions and effects * Refactor PayNowPage component to update lockInUSD logic and streamline payment amount calculation in effects * Refactor error handling in TokensService and WalletService; enhance error message formatting and improve error propagation in effects * Enhance error code extraction in WalletService; improve handling of nested error structures and add debug logging * Refactor error handling in TokenSetupService and WalletService; enhance error message formatting and integrate wallet service for improved error propagation * Refactor PaymentRequest components; remove protocol fee display and simplify receiving amount calculations * Update PayNowPage to handle undefined token symbol and set payment type based on USD availability * Update PayNowPage to improve amount handling and apply token conversion when both amount and tokenId are present * Refactor PayNowPage to use ITokenContract for network support and update amount handling in payment request effects * Remove unused form controls and protocol fee calculations in payment request components * Enhance test setup for TokensService and TokenSetupService by adding SharedTestModule and StoreModule imports * Refactor payment request tests to use 'name' instead of 'username' and update selectors for improved clarity * Refactor PayNowPage to streamline amount handling and enhance token conversion logic * Add dynamic amount title to PayNowPage for improved currency display
etsraphael · Sep 27, 2024 · b180524 · b180524
1 parent f41ca03
commit b180524
Show file tree

Hide file tree

Showing 46 changed files with 1,499 additions and 1,990 deletions.
diff --git a/UI/cypress/e2e/use-case/payment/payment-generated.cy.ts b/UI/cypress/e2e/use-case/payment/payment-generated.cy.ts
@@ -22,11 +22,9 @@ describe('Check native payment generated', () => {
   const paymentRequest: IPaymentRequest = {
     chainId: NetworkChainId.SEPOLIA,
     tokenId: TokenId.SEPOLIA,
-    username: 'John Doe',
+    name: 'John Doe',
     publicAddress: '0xd288b9f2028cea98f3132b700fa45c95023eca24',
     amount: 1,
-    description: 'A simple description',
-    avatarUrl: '',
     usdEnabled: false
   };
 
@@ -38,58 +36,27 @@ describe('Check native payment generated', () => {
     .replace('+', '-')
     .replace('/', '_');
 
+  beforeEach(() => {
+    cy.viewport('iphone-x');
+  });
+
   it('Generate payment without wallet', () => {
-    cy.visit(`${Cypress.env('baseUrl')}/payment-page/${paymentRequestBase64}`);
-    cy.get('[data-id=recipient-username-id]').should('have.text', paymentRequest.username);
-    cy.get('[data-id=recipient-description-id]').contains(paymentRequest.description);
-    cy.get('app-payment-request-card [data-id="login-btn"]').should('be.visible');
+    cy.visit(`${Cypress.env('baseUrl')}/pay-now/${paymentRequestBase64}`);
+    cy.get('[data-id=pn-header-container] h3').should('have.text', paymentRequest.name);
+    cy.get('[data-id=action-btn]').should('have.text', 'Connect Wallet');
+    cy.get('[data-id=payment-type-container]').contains('Amount (in SEP)');
   });
 
   it('Generate payment with wallet and wrong network', () => {
     // before
     const WALLET_ADDRESS = '0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266';
     const SIGNED_MESSAGE = '...';
     cy.login(WALLET_ADDRESS, SIGNED_MESSAGE, NetworkChainId.POLYGON);
-    cy.visit(`${Cypress.env('baseUrl')}/payment-page/${paymentRequestBase64}`);
+    cy.visit(`${Cypress.env('baseUrl')}/pay-now/${paymentRequestBase64}`);
 
     // test
-    cy.get('app-payment-request-card [data-id="login-btn"]').should('be.visible').click();
-    cy.get('lib-web3-login lib-card-body-login [data-id="wallet-container-btn-metamask"]').click();
-    cy.get('app-payment-page [data-id="wrong-network-alert"]').should('be.visible').contains('Wrong network');
-  });
-
-  it('Generate payment with wallet and right network', () => {
-    const WALLET_ADDRESS = '0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266';
-    const SIGNED_MESSAGE = '...';
-
-    // Inject MetaMask
-    cy.login(WALLET_ADDRESS, SIGNED_MESSAGE, NetworkChainId.SEPOLIA);
-    cy.visit(`${Cypress.env('baseUrl')}/payment-page/${paymentRequestBase64}`);
-
-    cy.get('app-payment-request-card [data-id="login-btn"]').should('be.visible').click();
-    cy.get('lib-web3-login lib-card-body-login [data-id="wallet-container-btn-metamask"]').click();
-    cy.get('app-payment-request-card [data-id="login-btn"]').should('not.exist');
-
-    cy.get('app-payment-request-card [data-id="btn-confirm-transaction"]').should('be.visible');
-
-    cy.get('app-payment-request-card [data-id="btn-confirm-transaction"]')
-      .find('button[type="submit"]')
-      .should('not.have.attr', 'disabled');
-  });
-
-  it('Generate payment receiver of the transaction', () => {
-    const WALLET_ADDRESS = paymentRequest.publicAddress;
-    const SIGNED_MESSAGE = '...';
-
-    // Inject MetaMask
-    cy.login(WALLET_ADDRESS, SIGNED_MESSAGE, NetworkChainId.SEPOLIA);
-    cy.visit(`${Cypress.env('baseUrl')}/payment-page/${paymentRequestBase64}`);
-    cy.get('app-payment-request-card [data-id="login-btn"]').should('be.visible').click();
-    cy.get('lib-web3-login lib-card-body-login [data-id="wallet-container-btn-metamask"]').click();
-
-    cy.get('app-payment-page [data-id="warning-banner"]')
-      .should('be.visible')
-      .contains('Attention: This is a preview of your request. Avoid the mistake of self-payment.');
+    cy.get('[data-id=action-btn]').should('have.text', 'Pay Now');
+    cy.get('[data-id=action-btn]').click();
   });
 });
 
@@ -99,11 +66,9 @@ describe('Check native payment generated with USD enabled', () => {
   const paymentRequest: IPaymentRequest = {
     chainId: NetworkChainId.POLYGON,
     tokenId: TokenId.ETHEREUM,
-    username: 'John Doe',
+    name: 'John Doe',
     publicAddress: '0xd288b9f2028cea98f3132b700fa45c95023eca24',
     amount: 1000,
-    description: 'A simple transaction',
-    avatarUrl: '',
     usdEnabled: true
   };
 
@@ -115,15 +80,15 @@ describe('Check native payment generated with USD enabled', () => {
     .replace('+', '-')
     .replace('/', '_');
 
+  beforeEach(() => {
+    cy.viewport('iphone-x');
+  });
+
   it('Generate payment without wallet', () => {
-    cy.visit(`${Cypress.env('baseUrl')}/payment-page/${paymentRequestBase64}`);
-    cy.get('[data-id=recipient-username-id]').should('have.text', paymentRequest.username);
-    cy.get('[data-id=recipient-description-id]').contains(paymentRequest.description);
-    cy.get('app-payment-request-card [data-id="login-btn"]').should('be.visible');
-
-    cy.get('[data-id=mathing-amount-message]').contains(
-      `${paymentRequest.username} is requesting a sum equivalent to $${paymentRequest.amount} USD.`
-    );
+    cy.visit(`${Cypress.env('baseUrl')}/pay-now/${paymentRequestBase64}`);
+    cy.get('[data-id=pn-header-container] h3').should('have.text', paymentRequest.name);
+    cy.get('[data-id=payment-type-container]').contains('Amount (in USD)');
+    cy.get('[data-id=action-btn]').should('have.text', 'Connect Wallet');
   });
 });
 
@@ -133,11 +98,9 @@ describe('Check non-native payment generated', () => {
   const paymentRequest: IPaymentRequest = {
     chainId: NetworkChainId.POLYGON,
     tokenId: 'chainlink',
-    username: 'John Doe',
+    name: 'John Doe',
     publicAddress: '0xd288b9f2028cea98f3132b700fa45c95023eca24',
     amount: 1,
-    description: 'A simple transaction',
-    avatarUrl: '',
     usdEnabled: false
   };
 
@@ -149,29 +112,15 @@ describe('Check non-native payment generated', () => {
     .replace('+', '-')
     .replace('/', '_');
 
-  it('Generate payment without wallet', () => {
-    cy.visit(`${Cypress.env('baseUrl')}/payment-page/${paymentRequestBase64}`);
-    cy.get('[data-id=recipient-username-id]').should('have.text', paymentRequest.username);
-    cy.get('[data-id=recipient-description-id]').contains(paymentRequest.description);
-    cy.get('app-payment-request-card [data-id="login-btn"]').should('be.visible');
+  beforeEach(() => {
+    cy.viewport('iphone-x');
   });
 
-  it('Generate payment with wallet and right network', () => {
-    const WALLET_ADDRESS = '0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266';
-    const SIGNED_MESSAGE = '...';
-
-    // Inject MetaMask
-    cy.login(WALLET_ADDRESS, SIGNED_MESSAGE, NetworkChainId.POLYGON);
-    cy.visit(`${Cypress.env('baseUrl')}/payment-page/${paymentRequestBase64}`);
-
-    cy.get('app-payment-request-card [data-id="login-btn"]').should('be.visible').click();
-    cy.get('lib-web3-login lib-card-body-login [data-id="wallet-container-btn-metamask"]').click();
-    cy.get('app-payment-request-card [data-id="login-btn"]').should('not.exist');
-
-    cy.get('app-payment-request-card [data-id="btn-confirm-transaction"]').should('be.visible');
+  it('Generate payment without wallet', () => {
+    cy.visit(`${Cypress.env('baseUrl')}/pay-now/${paymentRequestBase64}`);
 
-    cy.get('app-payment-request-card [data-id="btn-confirm-transaction"]')
-      .find('button[type="submit"]')
-      .should('have.attr', 'disabled');
+    cy.get('[data-id=pn-header-container] h3').should('have.text', paymentRequest.name);
+    cy.get('[data-id=action-btn]').should('have.text', 'Connect Wallet');
+    cy.get('[data-id=payment-type-container]').contains('Amount (in LINK)');
   });
 });
diff --git a/UI/cypress/e2e/use-case/payment/payment-maker.cy.ts b/UI/cypress/e2e/use-case/payment/payment-maker.cy.ts
@@ -12,14 +12,6 @@ describe('Create a payment request with wallet', () => {
     // Complete profile information
     cy.get('app-payment-request-profile-settings [data-id="username-input"]').type('My Username');
     cy.get('app-payment-request-profile-settings [data-id="submit-button"]').click();
-
-    // Complete description
-    cy.get('app-payment-request-price-settings [data-id="description-input"]')
-      .should('be.visible')
-      .should('be.enabled')
-      .focus()
-      .type('This is my payment request description');
-
     cy.get('app-payment-request-price-settings [data-id="submit-button"]').click();
   });
 });
@@ -40,14 +32,6 @@ describe('Create a payment request without wallet', () => {
 
     // Complete description
     cy.get('app-payment-request-price-settings').contains('A connected wallet is required for conversion rates');
-    cy.get('app-payment-request-price-settings [data-id="description-input"]').should('be.visible');
-    cy.get('app-payment-request-price-settings [data-id="description-input"]').should('be.enabled');
-
-    cy.get('app-payment-request-price-settings [data-id="description-input"]')
-      .should('be.visible')
-      .should('be.enabled')
-      .focus()
-      .type('This is my payment request description');
     cy.get('app-payment-request-price-settings [data-id="submit-button"]').click();
   });
 });
diff --git a/UI/cypress/e2e/use-case/payment/shop-payment-generated.cy.ts b/UI/cypress/e2e/use-case/payment/shop-payment-generated.cy.ts
@@ -1,7 +1,8 @@
 /// <reference types="cypress" />
 
 import '@angular/compiler';
-import { IPaymentRequestRaw } from '../../../../src/app/shared/interfaces';
+import { IPaymentRequest } from '../../../../src/app/shared/interfaces';
+import { NetworkChainId } from '@chainbrary/web3-login';
 
 class MockPaymentService {
   removeEmptyStringProperties<T>(obj: T): T {
@@ -18,9 +19,13 @@ class MockPaymentService {
 describe('Check native payment generated', () => {
   const formatService = new MockPaymentService();
 
-  const paymentRequest: IPaymentRequestRaw = {
+  const paymentRequest: IPaymentRequest = {
     publicAddress: '0xbA3Fc0648186a79baEF8DCeE9e055873F432a351',
-    name: 'John Doe'
+    name: 'John Doe',
+    chainId: NetworkChainId.ETHEREUM,
+    tokenId: null,
+    amount: null,
+    usdEnabled: false
   };
 
   const paymentRequestBase64: string = Buffer.from(