-
Notifications
You must be signed in to change notification settings - Fork 105
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: [IOBP-1038] Update default transaction header on different psp/f…
…ee cases (#6489) ## Short description This pull request includes refactoring and improvements to the `FeeAmountSection` component and related files in the payments feature. The changes aim to modularize the code and enhance the functionality of handling PSP names. ## List of changes proposed in this pull request - Created a new `FeeAmountSection` component to handle the fee amount display logic, including loading state and PSP name validation. - Introduced the `isValidPspName` function to validate PSP names and ensure they are not undefined or equal to "-". - Added unit tests for the utility functions to ensure their correctness ## How to test In payments section, check that the transaction header and its content is rendering correctly section in these cases: - psp name, fee value - no psp name, fee value - psp name, no fee value - no psp name, no fee value
- Loading branch information
1 parent
5edf322
commit 2767743
Showing
15 changed files
with
578 additions
and
62 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
57 changes: 57 additions & 0 deletions
57
...payments/bizEventsTransaction/components/PaymentsBizEventsTransactionFeeAmountSection.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import { Body, IOStyles, VSpacer } from "@pagopa/io-app-design-system"; | ||
| import React from "react"; | ||
| import { View } from "react-native"; | ||
| import Placeholder from "rn-placeholder"; | ||
| import I18n from "../../../../i18n"; | ||
| import { InfoNotice } from "../../../../../definitions/pagopa/biz-events/InfoNotice"; | ||
| import { formatAmountText, isValidPspName } from "../utils"; | ||
|
|
||
| type Props = { | ||
| loading: boolean; | ||
| transactionInfo?: InfoNotice; | ||
| }; | ||
|
|
||
| const PaymentsBizEventsTransactionFeeAmountSection = (props: Props) => { | ||
| const { loading, transactionInfo } = props; | ||
|
|
||
| if (loading) { | ||
| return ( | ||
| <View style={IOStyles.flex} testID="loading-placeholder"> | ||
| <VSpacer size={4} /> | ||
| <Placeholder.Line width="100%" animate="fade" /> | ||
| <VSpacer size={8} /> | ||
| <Placeholder.Line width="50%" animate="fade" /> | ||
| </View> | ||
| ); | ||
| } | ||
|
|
||
| const pspName = transactionInfo?.pspName; | ||
|
|
||
| if (transactionInfo?.fee !== undefined) { | ||
| const formattedFee = formatAmountText(transactionInfo.fee); | ||
| return ( | ||
| <Body> | ||
| {I18n.t("transaction.details.totalFee")}{" "} | ||
| <Body weight="Semibold">{formattedFee}</Body>{" "} | ||
| {isValidPspName(pspName) | ||
| ? // we want to make sure no empty string is passed either | ||
| I18n.t("transaction.details.totalFeePsp", { | ||
| pspName | ||
| }) | ||
| : I18n.t("transaction.details.totalFeeNoPsp")} | ||
| </Body> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <Body> | ||
| {isValidPspName(pspName) | ||
| ? I18n.t("features.payments.transactions.details.totalFeeUnknown", { | ||
| pspName | ||
| }) | ||
| : I18n.t("features.payments.transactions.details.totalFeeUnknownPsp")} | ||
| </Body> | ||
| ); | ||
| }; | ||
|
|
||
| export default PaymentsBizEventsTransactionFeeAmountSection; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
61 changes: 61 additions & 0 deletions
61
...payments/bizEventsTransaction/components/___tests___/PaymentsBizEventsFilterTabs.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| import { fireEvent, render } from "@testing-library/react-native"; | ||
| import React from "react"; | ||
| import { | ||
| PaymentBizEventsCategoryFilter, | ||
| paymentsBizEventsCategoryFilters | ||
| } from "../../types"; | ||
| import { PaymentsBizEventsFilterTabs } from "../PaymentsBizEventsFilterTabs"; | ||
|
|
||
| describe("PaymentsBizEventsFilterTabs", () => { | ||
| const mockOnCategorySelected = jest.fn(); | ||
|
|
||
| const renderComponent = (selectedCategory: PaymentBizEventsCategoryFilter) => | ||
| render( | ||
| <PaymentsBizEventsFilterTabs | ||
| selectedCategory={selectedCategory} | ||
| onCategorySelected={mockOnCategorySelected} | ||
| /> | ||
| ); | ||
|
|
||
| beforeEach(() => { | ||
| mockOnCategorySelected.mockClear(); | ||
| }); | ||
|
|
||
| it("should render all category tabs", () => { | ||
| const { getByTestId } = renderComponent( | ||
| paymentsBizEventsCategoryFilters[0] | ||
| ); | ||
|
|
||
| paymentsBizEventsCategoryFilters.forEach(category => { | ||
| expect(getByTestId(`CategoryTabTestID-${category}`)).toBeTruthy(); | ||
| }); | ||
| }); | ||
|
|
||
| it("should call onCategorySelected with the correct category when a tab is pressed", () => { | ||
| const { getByTestId } = renderComponent( | ||
| paymentsBizEventsCategoryFilters[0] | ||
| ); | ||
|
|
||
| const newCategory = paymentsBizEventsCategoryFilters[1]; | ||
| fireEvent.press(getByTestId(`CategoryTabTestID-${newCategory}`)); | ||
|
|
||
| expect(mockOnCategorySelected).toHaveBeenCalledWith(newCategory); | ||
| }); | ||
|
|
||
| it("should not call onCategorySelected if the selected tab is pressed again", () => { | ||
| const selectedCategory = paymentsBizEventsCategoryFilters[0]; | ||
| const { getByTestId } = renderComponent(selectedCategory); | ||
|
|
||
| fireEvent.press(getByTestId(`CategoryTabTestID-${selectedCategory}`)); | ||
|
|
||
| expect(mockOnCategorySelected).not.toHaveBeenCalled(); | ||
| }); | ||
|
|
||
| it("should highlight the selected category tab", () => { | ||
| const selectedCategory = paymentsBizEventsCategoryFilters[1]; | ||
| const { getByTestId } = renderComponent(selectedCategory); | ||
|
|
||
| const selectedTab = getByTestId(`CategoryTabTestID-${selectedCategory}`); | ||
| expect(selectedTab.props.accessibilityState.selected).toBe(true); | ||
| }); | ||
| }); |
75 changes: 75 additions & 0 deletions
75
...bizEventsTransaction/components/___tests___/PaymentsBizEventsTransactionCartList.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| import React from "react"; | ||
| import { render, fireEvent } from "@testing-library/react-native"; | ||
| import { PaymentsBizEventsTransactionCartList } from "../PaymentsBizEventsTransactionCartList"; | ||
| import { CartItem } from "../../../../../../definitions/pagopa/biz-events/CartItem"; | ||
|
|
||
| describe("PaymentsBizEventsTransactionCartList", () => { | ||
| const mockOnPress = jest.fn(); | ||
| const cartItems: ReadonlyArray<CartItem> = [ | ||
| { | ||
| refNumberValue: "123", | ||
| subject: "Test Subject 1", | ||
| refNumberType: "Test Ref Number Type 1", | ||
| debtor: { name: "Test Debtor 1", taxCode: "Test Tax Code 1" }, | ||
| amount: "1000" | ||
| }, | ||
| { | ||
| refNumberValue: "456", | ||
| subject: "Test Subject 2", | ||
| refNumberType: "Test Ref Number Type 2", | ||
| debtor: { name: "Test Debtor 2", taxCode: "Test Tax Code 2" }, | ||
| amount: "2000" | ||
| } | ||
| ]; | ||
|
|
||
| it("should render loading state", () => { | ||
| const { getByTestId } = render( | ||
| <PaymentsBizEventsTransactionCartList | ||
| loading={true} | ||
| onPress={mockOnPress} | ||
| /> | ||
| ); | ||
| expect(getByTestId("skeleton-transaction-details-list")).toBeTruthy(); | ||
| }); | ||
|
|
||
| it("should render cart items", () => { | ||
| const { getByText } = render( | ||
| <PaymentsBizEventsTransactionCartList | ||
| carts={cartItems} | ||
| loading={false} | ||
| onPress={mockOnPress} | ||
| /> | ||
| ); | ||
|
|
||
| expect(getByText("Test Subject 1")).toBeTruthy(); | ||
| expect(getByText("Test Subject 2")).toBeTruthy(); | ||
| }); | ||
|
|
||
| it("should call onPress when a cart item is pressed", () => { | ||
| const { getByText } = render( | ||
| <PaymentsBizEventsTransactionCartList | ||
| carts={cartItems} | ||
| loading={false} | ||
| onPress={mockOnPress} | ||
| /> | ||
| ); | ||
|
|
||
| fireEvent.press(getByText("Test Subject 1")); | ||
| expect(mockOnPress).toHaveBeenCalledWith(cartItems[0]); | ||
|
|
||
| fireEvent.press(getByText("Test Subject 2")); | ||
| expect(mockOnPress).toHaveBeenCalledWith(cartItems[1]); | ||
| }); | ||
|
|
||
| it("should render null when carts are not provided", () => { | ||
| const { queryByText } = render( | ||
| <PaymentsBizEventsTransactionCartList | ||
| loading={false} | ||
| onPress={mockOnPress} | ||
| /> | ||
| ); | ||
|
|
||
| expect(queryByText("Test Subject 1")).toBeNull(); | ||
| expect(queryByText("Test Subject 2")).toBeNull(); | ||
| }); | ||
| }); |
Oops, something went wrong.