feat: [IOBP-838] Remove receipt from list #6334

LeleDallas · 2024-10-25T14:40:16Z

This PR depends on

⚠️ This PR depends on #430 -> Please review the dependent PR before reviewing this ⚠️

Short description

This pull request introduces a new feature to hide receipts from the list

List of changes proposed in this pull request

Create a loading screen component for the payment section
Add hide button at the bottom of PaymentsTransactionBizEventsDetailsScreen
Update payment navigation route and saga
Apply optimistic UI logic to hide elements

How to test

Dev-server

In config.ts set a delay and edit the hideReceiptResponseCode property

Go to payments section
Tap on an element
Scroll to the bottom and tap on Nascondi dalla lista
Verify if the element disappears after the redirect.

Preview

Screen.Recording.2024-10-29.at.11.37.44.mov

Screen.Recording.2024-10-29.at.11.39.53.mov

Screen.Recording.2024-10-29.at.11.40.58.mov

@thisisjp would it make sense to set a minimum delay before displaying the Loading component? This could help avoid the component flashing on screen for very short loading times, leading to a smoother user experience.

pagopa-github-bot · 2024-10-25T14:42:30Z

Affected stories

🌟 IOBP-838: Come CIT voglio rimuovere una ricevuta dalla mia lista
subtask of
- ⚡ IOBP-246: Evolutive sezione Pagamenti

Generated by 🚫 dangerJS against d360e46

codecov · 2024-10-25T14:57:11Z

Codecov Report

Attention: Patch coverage is 22.22222% with 49 lines in your changes missing coverage. Please review.

Project coverage is 46.98%. Comparing base (4f204b4) to head (d360e46).
Report is 661 commits behind head on master.

Files with missing lines	Patch %	Lines
...ments/bizEventsTransaction/store/reducers/index.ts	0.00%	21 Missing ⚠️
...n/saga/handleDisableBizEventsTransactionReceipt.ts	0.00%	15 Missing ⚠️
.../components/PaymentsBizEventsHideReceiptButton.tsx	7.69%	12 Missing ⚠️
...atures/payments/bizEventsTransaction/saga/index.ts	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #6334      +/-   ##
==========================================
- Coverage   48.42%   46.98%   -1.45%     
==========================================
  Files        1488     1817     +329     
  Lines       31617    36955    +5338     
  Branches     7669     8837    +1168     
==========================================
+ Hits        15311    17363    +2052     
- Misses      16238    19526    +3288     
+ Partials       68       66       -2

Files with missing lines	Coverage Δ
...ents/bizEventsTransaction/navigation/navigator.tsx	`66.66% <ø> (ø)`
...payments/bizEventsTransaction/navigation/routes.ts	`100.00% <ø> (ø)`
...eens/PaymentsTransactionBizEventsDetailsScreen.tsx	`8.10% <ø> (ø)`
...yments/bizEventsTransaction/store/actions/index.ts	`100.00% <100.00%> (ø)`
...tures/payments/bizEventsTransaction/utils/index.ts	`76.92% <100.00%> (ø)`
...atures/payments/bizEventsTransaction/saga/index.ts	`0.00% <0.00%> (ø)`
.../components/PaymentsBizEventsHideReceiptButton.tsx	`7.69% <7.69%> (ø)`
...n/saga/handleDisableBizEventsTransactionReceipt.ts	`0.00% <0.00%> (ø)`
...ments/bizEventsTransaction/store/reducers/index.ts	`8.82% <0.00%> (ø)`

... and 1432 files with indirect coverage changes

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update a2d0715...d360e46. Read the comment docs.

…m/pagopa/io-app into IOBP-838-remove-receipt-from-list

Hantex9

Great work! Just some improvements and suggestions.

Hantex9 · 2024-10-31T11:46:40Z

ts/features/payments/common/components/PaymentsLoaderScreen.tsx

Do we still need this component screen?

Hantex9 · 2024-10-31T11:49:27Z

ts/features/payments/bizEventsTransaction/store/reducers/index.ts

+type CancelTransactionRecord = NoticeListItem & {
+  index: number;
+  cancelType: string;
+};


What do you think about adding this type definition inside a separate file that contains all the utils type definition? For example in one of my PR I've created a file in the following folder ts/features/payments/bizEventsTransaction/types/index.ts

Hantex9 · 2024-10-31T11:51:20Z

ts/features/payments/bizEventsTransaction/store/reducers/index.ts

+const filterTransactionsByIdAndGetIndex = (
+  transactions: pot.Pot<ReadonlyArray<NoticeListItem>, NetworkError>,
+  transactionId: string
+): {
+  filteredTransactions: Array<NoticeListItem>;
+  removedIndex: number;
+} => {
+  const transactionList = pot.getOrElse(transactions, []);
+  const removedIndex = transactionList.findIndex(
+    transaction => transaction.eventId === transactionId
+  );
+  const filteredTransactions = transactionList.filter(
+    transaction => transaction.eventId !== transactionId
+  );
+  return { filteredTransactions, removedIndex };
 };

+const getTransactionByIndex = (
+  transactions: pot.Pot<ReadonlyArray<NoticeListItem>, NetworkError>,
+  index: number
+): NoticeListItem => pot.getOrElse(transactions, [])[index];
+


Could extracting these two utils functions in the utils index.ts file and adding some tests be useful?

Hantex9 · 2024-10-31T11:54:36Z

ts/features/payments/bizEventsTransaction/store/reducers/index.ts

+
+type CancelTransactionRecord = NoticeListItem & {
+  index: number;
+  cancelType: string;


What do you think about setting static values to the cancelType instead of string? Something like the following:

Suggested change

cancelType: string;

cancelType: 'transactions' | 'latestTransactions';

or even setting the type as an enumerator could also be a good way to implement it.

Hantex9 · 2024-10-31T11:56:37Z

ts/features/payments/bizEventsTransaction/components/PaymentsBizEventsHideReceiptButton.tsx

+  const dispatch = useDispatch();
+  const navigation = useIONavigation();
+
+  const optimisticLoading = () => {


I think it's more understandable the purpose of this function renaming it

Suggested change

const optimisticLoading = () => {

const showOptimisticLoading = () => {

Hantex9 · 2024-10-31T11:57:22Z

ts/features/payments/bizEventsTransaction/navigation/navigator.tsx

+    <Stack.Screen
+      name={
+        PaymentsTransactionBizEventsRoutes.PAYMENT_TRANSACTION_BIZ_EVENTS_LOADING_SCREEN
+      }
+      options={{ gestureEnabled: isGestureEnabled, headerShown: false }}
+      component={PaymentsLoaderScreen}
+    />


Do we still need this screen?

Hantex9 · 2024-10-31T12:03:39Z

ts/features/payments/bizEventsTransaction/store/reducers/index.ts

+        transactions: !isLatestTransaction
+          ? pot.map(state.transactions, transactions => [
+              ...transactions.slice(0, index),
+              restoreItem,
+              ...transactions.slice(index)
+            ])
+          : state.transactions,
+        latestTransactions: isLatestTransaction
+          ? pot.map(state.latestTransactions, latestTransactions => [
+              ...latestTransactions.slice(0, index),
+              restoreItem,
+              ...latestTransactions.slice(index)
+            ])
+          : state.latestTransactions
+      };


I see that the calculation of the attribute transactions and latestTransactions is the same and what changes is only the variable where to restore the transaction.
What do you think about adding an helper function something like this:

const restoreTransactionAtIndex = (transactionPot, restoreItem, index: number) => pot.map(transactionPot, transactions => [ ...transactions.slice(0, index), restoreItem, ...transactions.slice(index) ]);

And then this block of code become:

transactions: cancelType !== "latestTransactions" ? restoreTransactionAtIndex(state.transactions, restoreItem, index) : state.transactions, latestTransactions: cancelType === "latestTransactions" ? restoreTransactionAtIndex(state.latestTransactions, restoreItem, index) : state.latestTransactions

LeleDallas added 7 commits October 25, 2024 16:00

chore: update locales

7a4e9b5

feat(payments):hide receipt button

aac98b3

feat(payments): common loader screen

5693b16

feat(payments): disable transaction receipt saga

23bd63f

refactor(payments): update navigation route

bfe3a16

feat(payments): hide payments receipt action

386e95c

refactor(payments): apply hide receipt button

98a766d

LeleDallas added the IO-Bonus e pagamenti IO - Bonus e pagamenti label Oct 25, 2024

LeleDallas requested review from thisisjp and a team as code owners October 25, 2024 14:40

LeleDallas had a problem deploying to dev October 25, 2024 14:40 — with GitHub Actions Error

LeleDallas requested a review from Hantex9 October 25, 2024 14:40

Merge branch 'master' into IOBP-838-remove-receipt-from-list

f5cd614

LeleDallas temporarily deployed to dev October 25, 2024 14:40 — with GitHub Actions Inactive

LeleDallas added 4 commits October 29, 2024 10:42

refactor: moved toast in saga

6ac53e5

chore: update locales

6b917c4

feat: optimistic ui action

24a92d0

Merge branch 'master' into IOBP-838-remove-receipt-from-list

7bdc659

LeleDallas requested review from ChrisMattew, gispada and freddi301 as code owners October 29, 2024 11:00

LeleDallas temporarily deployed to dev October 29, 2024 11:00 — with GitHub Actions Inactive

LeleDallas had a problem deploying to dev October 29, 2024 11:00 — with GitHub Actions Error

Merge branch 'IOBP-838-remove-receipt-from-list' of https://github.co…

b544400

…m/pagopa/io-app into IOBP-838-remove-receipt-from-list

LeleDallas temporarily deployed to dev October 29, 2024 11:09 — with GitHub Actions Inactive

Merge branch 'master' into IOBP-838-remove-receipt-from-list

2e1d07a

LeleDallas temporarily deployed to dev October 30, 2024 08:48 — with GitHub Actions Inactive

LeleDallas added the dont-merge ✋ label Oct 30, 2024

Merge branch 'master' into IOBP-838-remove-receipt-from-list

d6d6c45

LeleDallas temporarily deployed to dev October 30, 2024 13:17 — with GitHub Actions Inactive

LeleDallas had a problem deploying to dev October 30, 2024 13:17 — with GitHub Actions Failure

Merge branch 'master' into IOBP-838-remove-receipt-from-list

6958874

LeleDallas temporarily deployed to dev October 30, 2024 17:52 — with GitHub Actions Inactive

Merge branch 'master' into IOBP-838-remove-receipt-from-list

1296224

Hantex9 temporarily deployed to dev October 31, 2024 11:43 — with GitHub Actions Inactive

Hantex9 requested changes Oct 31, 2024

View reviewed changes

LeleDallas added 7 commits October 31, 2024 13:41

refactor: removed unused Loader Screen

f5ddbef

refactor: removed unused route

229bf54

refactor: rename optimistic function

5e8881c

refactor: move functions in utils

9455182

test: update utils suite test

b10830e

refactor: apply function from utils

ff4cb37

Merge branch 'master' into IOBP-838-remove-receipt-from-list

f66a13c

LeleDallas temporarily deployed to dev October 31, 2024 14:43 — with GitHub Actions Inactive

Merge branch 'master' into IOBP-838-remove-receipt-from-list

c8d20c2

LeleDallas temporarily deployed to dev October 31, 2024 15:36 — with GitHub Actions Inactive

Merge branch 'master' into IOBP-838-remove-receipt-from-list

d360e46

LeleDallas temporarily deployed to dev October 31, 2024 16:01 — with GitHub Actions Inactive

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: [IOBP-838] Remove receipt from list #6334

feat: [IOBP-838] Remove receipt from list #6334

LeleDallas commented Oct 25, 2024 •

edited

Loading

pagopa-github-bot commented Oct 25, 2024 •

edited by jira bot

Loading

codecov bot commented Oct 25, 2024 •

edited

Loading

Hantex9 left a comment

Hantex9 Oct 31, 2024

Hantex9 Oct 31, 2024

Hantex9 Oct 31, 2024

Hantex9 Oct 31, 2024

Hantex9 Oct 31, 2024

Hantex9 Oct 31, 2024

Hantex9 Oct 31, 2024

	cancelType: string;
	cancelType: 'transactions' \| 'latestTransactions';

	const optimisticLoading = () => {
	const showOptimisticLoading = () => {

feat: [IOBP-838] Remove receipt from list #6334

Are you sure you want to change the base?

feat: [IOBP-838] Remove receipt from list #6334

Conversation

LeleDallas commented Oct 25, 2024 • edited Loading

⚠️ This PR depends on #430 -> Please review the dependent PR before reviewing this ⚠️

Short description

List of changes proposed in this pull request

How to test

Dev-server

Preview

pagopa-github-bot commented Oct 25, 2024 • edited by jira bot Loading

Affected stories

codecov bot commented Oct 25, 2024 • edited Loading

Codecov Report

Hantex9 left a comment

Choose a reason for hiding this comment

Hantex9 Oct 31, 2024

Choose a reason for hiding this comment

Hantex9 Oct 31, 2024

Choose a reason for hiding this comment

Hantex9 Oct 31, 2024

Choose a reason for hiding this comment

Hantex9 Oct 31, 2024

Choose a reason for hiding this comment

Hantex9 Oct 31, 2024

Choose a reason for hiding this comment

Hantex9 Oct 31, 2024

Choose a reason for hiding this comment

Hantex9 Oct 31, 2024

Choose a reason for hiding this comment

LeleDallas commented Oct 25, 2024 •

edited

Loading

pagopa-github-bot commented Oct 25, 2024 •

edited by jira bot

Loading

codecov bot commented Oct 25, 2024 •

edited

Loading