1991718 - [meta] Composify credit card editor

Status: RESOLVED FIXED

(Firefox for Android :: Autofill, enhancement)

Comment 1

[Segun Famisa [:segun]]

Attachment: WIP: Bug 1991718 - Add compose UI for credit card editor screen

This patch introduces the Jetpack Compose UI for the "Add/Edit Credit Card" screen, which was previously a native Android view.

The following new files have been added:

• CreditCardEditorScreen.kt: The main composable for the screen, which handles both adding a new card and editing an existing one. It includes the top app bar, text input fields for card number and name, dropdowns for expiration date, and action buttons.
• CreditCardEditorState.kt: A new State data class that defines the model for the editor screen, holding properties like card details, expiry date options, and UI state flags (inEditMode, showDeleteDialog).
• DeleteCreditCardDialog.kt: A reusable composable for the confirmation dialog shown when deleting a credit card.

A new string resource (credit_cards_navigate_back_button_content_description) was also added for the back button's content description.

Comment 2

[Segun Famisa [:segun]]

Attachment: WIP: Bug 1991718 - Implement state management for the Credit Card Editor

This patch adds the state management logic for the credit card editor

The key changes include:

• CreditCardEditorStore: A new UiStore to manage the state of the editor.
• CreditCardEditorState: Now includes a default state and is managed by the store.
• CreditCardEditorAction: A new sealed interface that defines all possible user interactions and events, such as field changes, save/delete actions, and initialization.
• creditCardEditorReducer: A new pure function that handles state transitions based on dispatched actions.
• CreditCardEditorMiddleware: A new middleware to handle side effects like database operations (saving, updating, deleting cards), navigation, and validation logic.
• CreditCardEditorEnvironment: A new data class to provide external dependencies like navigation callbacks to the middleware.
• CalendarDataProvider: A new interface and its default implementation to supply month and year data for the expiry date fields, decoupling the logic from the UI.
• CreditCardEditorScreen.kt: The composable is updated to connect to the CreditCardEditorStore, observe state changes, and dispatch actions based on user interactions.

Comment 3

[Segun Famisa [:segun]]

Attachment: WIP: Bug 1991718 - Add tests for the state management logic for the Credit Card Editor

This patch introduces unit tests for the CreditCardEditorStore.

The new tests cover:

• Reducer logic for state updates in CreditCardEditorReducerTest.
• Middleware logic for handling side effects like saving, deleting, and initialization in CreditCardEditorStoreTest.

To support these tests, the following test fakes and helpers have been added:

• FakeCreditCardsStorage: A fake implementation of CreditCardsAddressesStorage.
• FakeCalendarDataProvider: A fake for providing month and year data.
• CreditCardEditorStateTestHelper: A helper function to create instances of CreditCardEditorState for testing.

Comment 4

[Phabricator Automation]

Comment on attachment 9524187 [details]
WIP: Bug 1991718 - Add compose UI for credit card editor screen

Revision D271087 was moved to bug 1998194. Setting attachment 9524187 [details] to obsolete.

Comment 5

[Phabricator Automation]

Comment on attachment 9524188 [details]
WIP: Bug 1991718 - Implement state management for the Credit Card Editor

Revision D271088 was moved to bug 1998196. Setting attachment 9524188 [details] to obsolete.

Comment 6

[Phabricator Automation]

Comment on attachment 9524189 [details]
WIP: Bug 1991718 - Add tests for the state management logic for the Credit Card Editor

Revision D271089 was moved to bug 1998196. Setting attachment 9524189 [details] to obsolete.

Comment 7

[Segun Famisa [:segun]]

I reorganized the bug by breaking down the steps into smaller bits that could be landed separately, because we learnt that we need to specifically address the biometric authentication part of this separately to make it work with compose.

So, instead of holding up all of the work, I decided to split it up into smaller units, since we can no longer solve it in one big swoop.