Files Overview

These are the main files you will make changes to:

File (in institutions/mxmobile/) Purpose
assets/mxmobile/<hd or sd> You can override an image by placing it in the sd or hd folder. To see all the default images available, view client/default/assets.
config/themes/theme_light.json Your theme file is where you change many your app’s visuals, such as colors, fonts, buttons, native styles, components, and more. While you can create new themes, this one is the default.
config/internal_configs.json Some screens (views) and features (collections of associated views) have internal configurations you can change that are specific to that view or feature. This is where you will override those default values. You will need to copy any internal configurations you want to make from client/default/config/internal_configs.json.
config/configuration.yaml Some configurations affect multiple views or features. This is where you make those more global configurations and override those default values. You will need to copy any specific configurations you want to change from client/default/config/configuration.yaml.
config/overrides.yaml Where you go to override some configurations and images.
config/scaffold.json This is where you can switch out routes within the app to create your own custom build for views and components, instead of using our default ones.
strings/master/en-US.json Where you can override the UI text in a key-value pair format. You can find all the keys and their values in client/default/strings/master/en-US.json.

These are some additional files you can make changes to:

File (in institutions/mxmobile/) Purpose
assets/dashboard.json The dashboard view is filled with cards that give users previews of different features. This file allows you to customize the arrangement of those cards.
assets/mxmobile/strings/accessibility_formatters.json Ensures some special text (phone numbers, acronyms, account numbers) is read out loud by the voice-over correctly. You will need to copy this file from client/default/assets/strings/accessibility_formatters.json.
config/faqs.json Lists out the names of the keys in en-US.json to be displayed for the header, questions, and answers. You will need to copy this file from client/default/config./faqs.json.
assets/mxmobile/password_constraints.json Where you can define the limitations for login passwords. You will need to copy this file from client/default/assets/password_constraints.json.
assets/mxmobile/holidays.json Defines the bank holidays to exclude from the date selector in money movement features (Transfers, ACH Transfers, Cash Advance, and more). You will need to copy this file from client/default/assets/holidays.json.
config/credit_reports_score_values.json Where you define a user’s credit score. If enabled, it will show their credit score out of 400 and indicate its quality (ex. “good”). You will need to copy this file from client/default/config/credit_reports_score_values.json.
strings/translated Where you can translate the text appearing on your app’s UI, depending on the user’s device locale. You will need to copy these files from client/default/strings/translated.
config/hyperion/ The files within this folder relate to the Hyperion System. This is a system used for search, as shown when using the search-bar on the dashboard view. You will need to copy these files from client/default/config/hyperion.

Color Definitions

Type Default Use Notes
UNKNOWN_COLOR Placeholder for a theme element to not get displayed or styled.
PRIMARY_100 Date picker selector for in-between multiple days and the login history bottom sheet.
PRIMARY_200 Not used by default. Recommended hue to use for dark-mode themes.
PRIMARY_300 Main call to actions, including primary buttons and text links.
PRIMARY_400 Not used by default. Available for higher contrast.
PRIMARY_500 Passcode key letter options. Recommended darkest version of primary.
WHITE Card background.
NEUTRAL_100 Off-white backgrounds, alternate card background, credit report history chart (hardcoded), date picker style off month background, toggle off style, and disabled state.
NEUTRAL_200 Disabled button backgrounds, unselected color on select list rows, search bar. Most icon background colors default to this. For example, the bottom sheet close icon.
NEUTRAL_300 Separator styles, row dividers, cross account history view background color.
NEUTRAL_400 Secondary disabled background, page indicators, pagination, neutral button and toggle borders, checkbox inactive and disabled.
NEUTRAL_500 Disabled text, inactive text, disabled icon.
NEUTRAL_600 Secondary text and input stroke, device list row, placeholder text in search bar, budget details, hyperion scrim, transaction filter utility row icon backgrounds.
NEUTRAL_700 Search bar, navigation row styles, device row styles, common shadow styles, common background color and editable, or sub text, slide to submit button, document viewer bottom sheet, account history view graphs, budget detail view graph, hyperion microphone icon, dashboard spending card income graph, spending view trends, settings text size view. Contains many hard-coded values and affects many visuals within the app.
NEUTRAL_800 Alternative text style (often seen in right options of utility rows), default active checkbox styles, scrims and overlays.
NEUTRAL_900 Main color style used for text.
SUCCESS_100 Not used by default.
SUCCESS_200 Sync bar background, hyperion onboarding panel, onboarding page, card enabled styles, networth graph line.
SUCCESS_300 Main green color used to communicate success (for example, a deposited transaction), success check marks.
SUCCESS_400 Not used by default.
SUCCESS_500 Not used by default.
WARNING_100 Not used by default.
WARNING_200 Warning sync bar background, flagged transactions (circle outline), password validation when it’s good, member list row error icon, remote deposit capture row, some message box styles, account edit alert row.
WARNING_300 Managed card pending state style, remote deposit failure, default warning button style, warning message box.
WARNING_400 Password validation when it’s fair.
WARNING_500 Not used by default.
ERROR_100 Not used by default.
ERROR_200 Not used by default.
ERROR_300 Main error message color, error sync background, error icons, card detail locked card state style, connection status error, error checkbox, urgent notification, input box border error.
ERROR_400 Not used by default.
ERROR_500 Not used by default.
CHART_1 Used to theme first data element on account history & merchant history charts (spending).
CHART_2 Used to theme second data element on account history chart (income or deposits).
CHART_3 Not used by default.
CHART_4 Not used by default.
CHART_5 Not used by default.
CHART_6 Not used by default.
CHART_7 Not used by default.
CHART_MONO_1 Not used by default.
CHART_MONO_2 Not used by default.
CHART_MONO_3 Not used by default.
CHART_MONO_4 Not used by default.
CHART_MONO_5 Not used by default.
CHART_MONO_6 Not used by default.
BUDGET_GREEN Bubble budgets. Not recommended to change.
BUDGET_YELLOW Bubble budgets. Not recommended to change.
BUDGET_RED Bubble budgets. Not recommended to change.
BUDGET_ARC_GREEN Bubble budgets. Not recommended to change.
BUDGET_ARC_YELLOW Bubble budgets. Not recommended to change.
BUDGET_ARC_RED Bubble budgets. Not recommended to change.
FICO_SCORE_POOR Not recommended to change.
FICO_SCORE_FAIR Not recommended to change.
FICO_SCORE_GOOD Not recommended to change.
FICO_SCORE_VERY_GOOD Not recommended to change.
FICO_SCORE_EXCEPTIONAL Not recommended to change.
ACCENT COLORS There are 15 accent color types (for example, ACCENT_COLOR_1_100) that are not used by default. These types are open types to define additional colors.

Font Definitions

Type Default Use Notes
H1 Views with a card header to title the page.
H2 Main headline style.
H3 Sub section titles. Typically seen on the dashboard cards
PARAGRAPH Large wrapping text.
BODY The default size and style for all body copy.
BODY_BOLD The default emphasized font. Typically used in buttons.
PARAGRAPH_SMALL Small wrapping text.
SMALL Contextual text. Often paired with BODY_BOLD or H3.
SMALL_BOLD Smaller emphasized font style.
X_SMALL Labels and contextual text when space is limited.
X_SMALL_BOLD Emphasized font style available for labels and other areas if space is limited.
TINY Non-essential labels where space is very limited.
TINY_BOLD Emphasized type in its smallest style. Used in the active state of a tab menu item, notification and alert badge type.
TINY_MONO_BOLD Transaction feed data row on transaction details.
ACCENT FONTS Available to use for more than one kind of typeface, font, or style other than what has been defined in the defaults.
ZERO Available to set a style without it rendering on the front-end.

Text Color Definitions

Type Default Use Notes
Standard The standard text color.
Primary Links, labels, and bolded text. Usually a shade of the primary brand color.
Secondary Subtitles.
Highlight Text that’s displayed on a dark background. Should be bright or white.
Destructive Errors or destructive actions.
Success Successful actions.
Disabled Disabled text.
Gains Positive-type dollar amounts (could render as green).
Liabilities Negative-type dollar amounts (could render as red) based on context.
Accent Open space to define an additional text color.

Opacity Definitions

Type Description
BAR_GRAPH Not recommended to change.
DARK_SCRIM Darkest overlay style, set to 225 by default, approx 75% opacity.
MEDIUM_SCRIM 50% opacity overlay typically used in combination with a modal or other area needing emphasis and depth.
LIGHT_SCRIM Lightest overlay style to draw attention with depth.
BUDGET_ARC_BACKGROUND Used only in bubble budgets to indicate usage status. Not recommended to change.
HEADER Used in the navigation bar over top of the background image on secondary pages so that page titles are more legible.
DISABLED_OPACITY Sets the default opacity for components in their disabled states. For instance, if a utility row is disabled, the entire component gets styled to be 150 opacity by default.
HEAVY_CLICK_INDICATOR Not recommended to change.
LIGHT_CLICK_INDICATOR Not recommended to change.
HELP_POPUP_SCRIM Not recommended to change.
FULL Fully opaque.
CLEAR Fully transparent.

Button Types

Type Default Use
BUTTON_DESTRUCTIVE For actions that could have destructive effects on the user’s data (delete, remove, etc.)
BUTTON_PRIMARY For the principal call to action on the page. Primary buttons should only appear once per screen (not including the application header or in a modal dialog).
BUTTON_INVERSE Available if needed to be the reverse style of a primary
BUTTON_NEUTRAL For less prominent actions. Neutral buttons can be used in isolation or paired with a primary button when there are multiple calls to action.
BUTTON_TRANSPARENT For less pronounced actions; often used alongside a primary button.
BUTTON_LINK Similar to the transparent button links are used for less pronounced actions but take up less space. Use when space is tight and the action does not require a lot of attention.
BUTTON_WARNING Not used by default.
BUTTON_OUTLINE Not used by default.
BUTTON_FILTER Use when space is limited.
BUTTON_FILTER_ACTIVE Used to style an applied filter.

Credential Login View

The default view that’s displayed when the app finishes loading.

File to edit strings


Internal Configurations

The login screen has three sections and supports internal configurations for each:

  • Credential Login View.
  • Panel Order List — the links shown below the login form.
  • Help View — accessed through the Panel Order List (“Help & Legal”), which can have a login specific list.

internal_configs.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
"credential_login_view": {
  "enable_multiple_login": false,
  "logo_left_align": false,
  "multiple_login_can_delete": true,
  "multiple_login_can_set_preferred": true,
  "multiple_login_maximum": 0,
  "multiple_login_preferred_is_exclusive": true,
  "show_biometric_login_confirmation": false,
  "show_biometric_login_reminder": false,
  "mask_username": true
},
"help_view": {
  ...,
  "help_order_login_list": {
    "type": "help_type",
    "values": [
      "FAQS",
      "PRIVACY_STATEMENT",
      "TERMS_AND_CONDITIONS",
      "CLIENT_WEBSITE",
      "SUPPORT_REQUEST",
      "ROUTING_NUMBER"
    ]
  },
  "has_login_specific_order": true
},
"link_panel_view": {
  ...,
  "panel_order_list": {
    "type": "panel_type",
    "values": [
      "RESET_PASSWORD",
      "FORGOT_USERNAME",
      "NEED_LOGIN",
      "PASSWORD_UNLOCK",
      "BRANCH_LOCATOR",
      "CALL_INSTITUTION",
      "CLIENT_WEBSITE",
      "MAKE_APPOINTMENT",
      "HELP_AND_LEGAL"
    ]
  }
}

Configurations

  • contact_phone_number
  • login_password_unlock_url
  • show_web_for_login_forgot_username
  • uses_black_box_token_on_login

UI Text

Credential Login View

  • USERNAME
  • ACCESSIBILITY_USERNAME_HINT
  • MULTI_LOGIN_SELECT_ACCOUNT_A11Y_LABEL
  • PASSWORD
  • ACCESSIBILITY_PASSWORD_HINT
  • ACCESSIBILITY_REMEMBER_ME_LABEL
  • LOGIN
  • ACCESSIBILITY_LOGIN_BUTTON_HINT
  • BIOMETRIC_BUTTON_LABEL_A11Y

Link Panel List

  • HELP_AND_LEGAL_DISCLAIMER
  • HOW_ACCESS_CODE
  • LANDING_ATM_LOCATIONS
  • LANDING_BRANCH_LOCATIONS
  • MAIN_MENU_CALL_US
  • LOGIN_CLIENT_FOOTER
  • CLIENT_WEBSITE
  • LANDING_FAQS
  • LANDING_FORGOT_USERNAME
  • HELP_AND_LEGAL
  • DASHBOARD_MAKE_APPOINTMENT
  • LANDING_NEED_AN_ACCOUNT
  • LANDING_PASSWORD_UNLOCK
  • PRIVACY_STATEMENT
  • LANDING_RESET_PASSWORD
  • WIDENET_NEED_ENTER_RESET_TOKEN
  • SETUP_ACCOUNT (receives and uses institution_name from institutions/mxmobile/config/overrides.yaml)
  • TERMS_AND_CONDITIONS
  • LANDING_UPDATE_ACCOUNT

Images

Name Resolution File
Top Logo
  • HD: 880x150
  • SD: 880x150
  • HD: assets/images/hd/logo_white.png
  • SD: assets/images/sd/logo_white.png

Dashboard View

The landing page after login/authentication is complete.

This view has a custom configuration system for enabling and disabling cards.

The Dashboard View


Internal Configurations

internal_configs.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
"dashboard_view": {
  "has_sticky_header": true,
  "show_extra_card_icons": false,
  "mobo_type_enum": [
    "TRANSFERS",
    "DEPOSITS",
    "PAYMENTS",
    "ZELLE",
    "OPEN_ACCOUNT",
    "CREDIT_SCORE",
    "DIGITAL_CURRENCY"
  ],
  "mobo_order_list": {
    "type": "mobo_type",
    "values": [
      "TRANSFERS",
      "DEPOSITS",
      "PAYMENTS"
    ]
  }
},
"dashboard_tile_card_view": {
  "show_card_header": false
},
"dashboard_accounts_card_view": {
  "num_accounts": 3
},
"dashboard_list_card_view": {
  "show_make_appointment": false,
  "show_plugin_messenger": false,
  "show_plugin_chat_button": false
}


Configurations

Primary View

  • default_institution_guid
  • has_landscape_menu_drawer
  • has_dashboard_notifications_button
  • has_landscape_logo
  • uses_mobile_sign_on_tokens
  • has_card_manager
  • has_credit_report
  • credit_report_show_dashboard_card

Dashboard Header

  • show_hyperion_onboarding
  • app_name
  • has_dashboard_search

Cards

Account Funding Card

  • institution_name

Accounts Card

  • institution_name

Activation Panel Card

  • institution_name
  • app_name

Add Cash Card

  • institution_name

Card Manager Card

  • has_travel_notifications

Credit Report Card

  • show_credit_report_dashboard_text
  • contact_phone_number

Insights Card

  • institution_name

List Card

  • uses_mobile_sign_on_tokens
  • has_show_electronic_documents
  • has_show_check_reorder
  • has_show_statements
  • has_make_appointment
  • show_notifications_on_dashboard
  • contact_phone_number
  • show_call_on_dashboard
  • show_rewards_on_dashboard
  • has_rewards
  • show_secure_message_on_dashboard
  • show_branch_locator_on_dashboard
  • has_branch_locator
  • has_show_new_account

Prompt Card

  • app_name
  • app_review_prompt_login_threshold
  • show_app_review_once_after_dismissal
  • has_in_app_feedback_prompt

Request Advance Card

  • institution_name
  • has_small_dollar_credit_onboarding

Savings Mode Card (Quicksave)

  • has_saving_mode
  • saving_mode_requires_user_segmentation

Tile Card

  • has_make_a_payment (tile_loan_card)
  • has_cross_account_transfers (tile_loan_card)
  • has_account_transfers (tile_mobo_card)
  • has_cross_account_transfers (tile_mobo_card)
  • has_person_to_person_transfers (tile_mobo_card)

UI Text

Primary View

  • LOG_OUT_CONFIRMATION_TITLE
  • ACCESSIBILITY_BACK_BUTTON_LABEL
  • ACCESSIBILITY_BACK_BUTTON_HINT

Header

  • DASHBOARD_SEARCH_BAR_KEY

Cards

Account Funding Card

  • DASHBOARD_ACCOUNT_FUNDING_HEADER
  • DASHBOARD_ACCOUNT_FUNDING_BODY
  • DASHBOARD_ACCOUNT_FUNDING_FOOTER

Accounts Card

  • ACCOUNTS_ZERO_STATE_HEADER
  • ACCOUNTS_ZERO_STATE_BODY
  • ACCOUNTS_ACCOUNTS
  • DASHBOARD_VIEW_ALL_ACCOUNTS
  • ACCESSIBILITY_DASHBOARD_ACCOUNTS_HINT
  • FIRST_LOGIN_EXTERNAL_ACCOUNTS_BUTTON
  • ACCOUNTS_MEMBER_SUCCESS
  • ACCOUNTS_MEMBER_CHALLENGES
  • ACCOUNTS_MEMBER_ERROR
  • ACCOUNTS_CONNECTING
  • ACCOUNTS_THIS_MAY_TAKE_MINUTES
  • DASHBOARD_ADD_AN_ACCOUNT_SINGLE

Activation Panel Card

  • MANAGED_CARD_ISSUER_AND_ACCOUNT_TYPE
  • MANAGED_CARD_VIRTUAL
  • MANAGED_CARD_ACTIVATE_ONBOARDING_PANEL_HEADER
  • DASHBOARD_ACTIVATE_VIRTUAL_CARD_DESCRIPTION
  • DASHBOARD_ACTIVATE_VIRTUAL_CARD_NAV_TEXT
  • ACCESSIBILITY_DASHBOARD_CARD_MANAGER_HINT

Add Cash Card

  • DASHBOARD_ADD_CASH_HEADER
  • DASHBOARD_ADD_CASH_BODY
  • DASHBOARD_ADD_CASH_FOOTER

Budgets Card

  • BUDGETS_ZERO_STATE_HEADER
  • BUDGETS_ZERO_STATE_BODY
  • DASHBOARD_BUDGETS
  • DASHBOARD_VIEW_BUDGETS
  • ACCESSIBILITY_DASHBOARD_BUDGETS_HINT
  • DASHBOARD_OVER_SPENT
  • DASHBOARD_SAFE_TO_SPEND
  • DASHBOARD_NO_BUDGETS

Card Manager Card

  • BUDGETS_ZERO_STATE_HEADER
  • BUDGETS_ZERO_STATE_BODY
  • DASHBOARD_BUDGETS
  • DASHBOARD_VIEW_BUDGETS
  • ACCESSIBILITY_DASHBOARD_BUDGETS_HINT
  • DASHBOARD_OVER_SPENT
  • DASHBOARD_SAFE_TO_SPEND
  • DASHBOARD_NO_BUDGETS

Credit Report Card

  • CREDIT_REPORTS_ZERO_STATE_HEADER
  • CREDIT_REPORTS_ZERO_STATE_BODY
  • DASHBOARD_CREDIT_REPORT
  • DASHBOARD_VIEW_CREDIT_REPORT
  • DASHBOARD_VIEW_CREDIT_REPORT_SCREEN_READER
  • CREDIT_REPORTS_DASHBOARD_TEXT
  • CREDIT_REPORTS_SCORE_LOGO_SCREEN_READER
  • CREDIT_REPORTS_SCORE_LOGO_SCREEN_READER
  • CREDIT_REPORTS_ZERO_STATE_UNSUBSCRIBED
  • CREDIT_REPORTS_RESUBSCRIBE_TEXT
  • CREDIT_REPORTS_FICO_TRADEMARK

Finstrong Card

  • DASHBOARD_FINSTRONG_HEADER
  • DASHBOARD_FINSTRONG_ZERO_STATE_HEADER
  • DASHBOARD_FINSTRONG_ZERO_STATE_BODY
  • DASHBOARD_FINSTRONG_BODY
  • DASHBOARD_FINSTRONG_FOOTER

Insights Card

  • DASHBOARD_INSIGHTS_HEADER
  • DASHBOARD_INSIGHTS_ZERO_STATE_HEADER
  • DASHBOARD_INSIGHTS_ZERO_STATE_BODY
  • DASHBOARD_INSIGHTS_BODY
  • DASHBOARD_INSIGHTS_FOOTER

List Card

  • DASHBOARD_OTHER_RESOURCES
  • PLUGIN_MESSENGER_NAME
  • DASHBOARD_SECURE_MESSAGE
  • DASHBOARD_REWARDS
  • DASHBOARD_CALL
  • DASHBOARD_NOTIFICATIONS
  • DASHBOARD_SETTINGS
  • DASHBOARD_MAKE_APPOINTMENT
  • DASHBOARD_SHOW_STATEMENTS
  • DASHBOARD_REORDER_CHECKS
  • DASHBOARD_SHOW_ELECTRONIC_DOCUMENTS
  • DASHBOARD_NEW_ACCOUNT
  • DASHBOARD_BRANCH_LOCATOR
  • DASHBOARD_HELP
  • SETTINGS_LOG_OUT
  • LOG_OUT_CONFIRMATION_TITLE

Locked Card

  • DASHBOARD_LOCKED_CARD_HEADER
  • DASHBOARD_LOCKED_CARD_CLOSE_BUTTON_LABEL
  • DASHBOARD_LOCKED_CARD_FOOTER
  • DASHBOARD_LOCKED_CARD_BODY

Net Worth Card

  • DASHBOARD_NET_WORTH
  • NET_WORTH_ZERO_STATE_HEADER
  • NET_WORTH_ZERO_STATE_BODY
  • DASHBOARD_VIEW_NET_WORTH
  • ACCESSIBILITY_DASHBOARD_NET_WORTH_HINT
  • NET_WORTH_MONTHLY_NET_WORTH_DELTA

Prompt Card

  • APP_RATING_PROMPT_ENJOYING_APP
  • APP_RATING_PROMPT_NOT_REALLY
  • APP_RATING_PROMPT_YES_EXCLAMATION
  • APP_RATING_PROMPT_ASK_FOR_FEEDBACK
  • NO
  • YES
  • APP_RATING_PROMPT_ASK_FOR_RATING
  • APP_FEEDBACK_PROMPT_ENJOYING_APP
  • APP_FEEDBACK_PROMPT_NOT_NOW
  • APP_FEEDBACK_PROMPT_YES
  • APP_FEEDBACK_ACKNOWLEDGEMENT_MSG
  • OKAY

Request Advance Card

  • DASHBOARD_REQUEST_ADVANCE_HEADER
  • DASHBOARD_REQUEST_ADVANCE_BODY
  • DASHBOARD_REQUEST_ADVANCE_FOOTER

Savings Mode Card (Quicksave)

  • DASHBOARD_SAVING_MODE
  • SAVING_MODE_ZERO_STATE_HEADER
  • SAVING_MODE_ZERO_STATE_BODY
  • DASHBOARD_VIEW_SAVING_MODE
  • QUICK_SAVE_SLIDER_LABEL
  • QUICK_SAVE_ACCESSIBILITY_SLIDER_LABEL
  • QUICK_SAVE_COMPLETE_TITLE
  • QUICK_SAVE_COMPLETE_BODY
  • QUICK_SAVE_ACCESSIBILITY_COMPLETE_BODY
  • QUICK_SAVE_DISABLED
  • QUICK_SAVE_USER_SETUP_REQUIRED
  • QUICK_SAVE_PROJECTED_AMOUNT
  • QUICK_SAVE_ACCESSIBILITY_PANEL_PROJECTED_AMOUNT
  • QUICK_SAVE_UNKNOWN_STATUS
  • ACCESSIBILITY_SAVING_MODE_DISMISS_LABEL
  • QUICK_SAVE_FIRST_TIME_SETUP_BODY
  • QUICK_SAVE_FIRST_TIME_SETUP_FOOTER
  • QUICK_SAVE_COMPLETE_TITLE

Spending Card

  • DASHBOARD_SPENDING
  • SPENDING_ZERO_STATE_HEADER
  • SPENDING_ZERO_STATE_BODY
  • DASHBOARD_VIEW_SPENDING
  • ACCESSIBILITY_DASHBOARD_SPENDING_HINT
  • SPENDING_TRENDS_AVERAGE_SPENDING
  • INCOME
  • SPENDING
  • SPENDING_INCOME

Transactions Card

  • DASHBOARD_TRANSACTIONS
  • TRANSACTIONS_ZERO_STATE_HEADER
  • TRANSACTIONS_ZERO_STATE_BODY
  • DASHBOARD_VIEW_ALL_TRANSACTIONS
  • ACCESSIBILITY_DASHBOARD_TRANSACTIONS_HINT

Images

Name Resolution File
Top Logo
  • HD: 880x150
  • SD: 880x150
  • HD: assets/images/hd/logo_white.png
  • SD: assets/images/sd/logo_white.png
Credit Report Card FICO Logo
  • HD: 405x105
  • SD: 135x35
  • HD: assets/images/hd/fico_score_logo.png
  • SD: assets/images/sd/fico_score_logo.png
Account’s Card External Aggregation Financial Institution Logos
  • HD: 792x181
  • SD: 396x91
  • HD: assets/images/hd/fi_logos.png
  • SD: assets/images/sd/fi_logos.png

Transfer Feature

The basic internal transfers feature, where users can move money between internal accounts.

Contains the transaction list component component.


Feature Configurations

Internal Configs File

1
2
3
4
5
6
7
8
9
10
11
12
"transfers": {
  "enable_amount_options": false,
  "allow_transfers_on_weekends": false,
  "show_status_in_history_view": false,
  "transfers_amount_character_max": 11,
  "allow_transfers_on_holidays": false,
  "show_edit_confirmation_modals": false,
  "future_dated_transfer_month_limit": 0,
  "has_cash_advance_fees": false,
  "cash_advance_fee_percentage": 0,
  "has_memo": false
}

Transfer Landing View

The landing view for the basic transfers system, which can be navigated to through the menu, mobo card on the dashboard, or through a bottom navigation menu in some cases.

This view contains multiple sections that all live within the same view:

  • Landing View — controls switching between the History and Create tabs.
  • Create Section — where users can go to create a new transfer based on what’s available in the configurations.
  • History Section — where users can view their previous transactions and transfers and navigate to the details view of those. This is done with the support of a transactions list component.

Create Section

Transfer Create section on the app.

internal_configs.json

1
2
3
4
5
6
7
8
"transfer_landing_view": {
  "transfers_amount_use_edit_attribute_bottom_sheet": true,
  "show_plugin_chat_button": false
},
"transfer_create_view": {
  "enable_amount_options": true,
  "show_options_before_account_selection": true
}

Configurations

  • transfer_has_future_transfers
  • transfers_has_recurring_transfers
  • transfers_has_future_dated_transfers
  • allows_same_day_recurring_transfers
  • transfers_show_confirmation_id
  • account_transfer_has_memo
  • transfers_rev_11_support

UI Text

  • TRANSFER_TITLE
  • SLIDER_CONFIRMATION
  • SLIDER_ID
  • TRANSFER_DETAILS_TRANSFER_SUCCESS_HEADER
  • TRANSFER_CREATE_TRANSFER
  • FROM_THIS_ACCOUNT
  • ACCESSIBILITY_TRANSFERS_FROM_ACCOUNT_LABEL
  • ACCESSIBILITY_TRANSFERS_FROM_ACCOUNT_HINT
  • TO_THIS_ACCOUNT
  • ACCESSIBILITY_TRANSFERS_TO_ACCOUNT_LABEL
  • ACCESSIBILITY_TRANSFERS_TO_ACCOUNT_HINT
  • AMOUNT
  • ACCESSIBILITY_TRANSFERS_AMOUNT_LABEL
  • ACCESSIBILITY_TRANSFERS_AMOUNT_HINT
  • PAYOUT_DETAIL_SEND_ON
  • BLANK
  • ACCESSIBILITY_TRANSFERS_SEND_ON_HINT
  • PAYOUT_DETAIL_FREQUENCY
  • ACCESSIBILITY_TRANSFERS_FREQUENCY_HINT
  • PAYOUT_DETAIL_DURATION
  • ZELLE_REVIEW_MEMO
  • ACCESSIBILITY_TRANSFERS_MEMO_HINT
  • TRANSFERS_LEGAL_TEXT
  • TRANSFER_SECURED_MESSAGE
  • MOVE_MONEY_MAKE_ANOTHER_TRANSFER
  • RETURN_TO_DASHBOARD
  • ACCESSIBILITY_SLIDER_LABEL
  • ACCESSIBILITY_SLIDER_HINT
  • TRANSFER_VIEW_TRANSACTIONS_HISTORY

History Section

Transfer History section on the app.

Configurations

  • transfers_rev_11_support
  • has_make_a_payment

UI Text

  • TRANSFER_VIEW_ACTIVITY
  • TRANSFER_DETAILS_TRANSFER_PENDING_SUBTITLE
  • TRANSFER_RENDERER_ACCESSIBILITY_LABEL
  • MOVE_MONEY_TO_LABEL
  • MOVE_MONEY_FROM_LABEL

Transfer Details View

The view where you can see the details of a single transfer.

Transfer Details View


Context

This view takes in:

  • ::Mdx::Transfers::Transfer as a Routing::MODEL which represents the transfer that will be displayed.
  • ITransferDetailsView::State as a Routing::STATE which represents the state of the view.
  • ::Mdx::Transfers::TransferType as a Routing::TRANSFER_TYPE which represents the type of transfer being displayed.

Internal Configurations

Internal Configurations File

1
2
3
4
5
6
7
8
9
10
11
"transfer_details_view": {
  "can_edit_amount": true,
  "can_edit_source_account": true,
  "can_edit_destination_account": true,
  "can_edit_memo": true,
  "can_edit_post_on": true,
  "show_edit_cancel": true,
  "show_save_button": true,
  "show_created_on_row": true,
  "show_updated_on_row": true
}

UI Text

  • TRANSFER_TITLE
  • TRANSFER_DETAILS_ENTER_MEMO
  • TRANSFER_MONEY
  • TRANSFER_VIEW_ACTIVITY
  • ACCESSIBILITY_SLIDER_LABEL
  • ACCESSIBILITY_SLIDER_HINT
  • FROM_ACCOUNT
  • TO_ACCOUNT
  • TRANSFER_AMOUNT_OPTIONS
  • TRANSFER_AMOUNT_OPTIONS_SELECT
  • AMOUNT
  • TRANSFERS_SEND_ON
  • RECURRING_TRANSFER_DETAILS_FREQUENCY
  • TRANSFERS_FREQUENCY_DEFAULT
  • PAYOUT_DETAIL_DURATION
  • BLANK
  • TRANSFER_DETAILS_MEMO
  • TRANSFER_DETAILS_ENTER_MEMO
  • TRANSFER_DETAILS_MEMO
  • TRANSFERS_LEGAL_TEXT
  • TRANSFER_SECURED_MESSAGE
  • TRANSFER_DETAILS_FEE_NOTIFICATION_BODY
  • MAKE_A_PAYMENT_DETAIL_VIEW_TITLE
  • TRANSFER_DETAILS_VIEW_TITLE
  • MOVE_MONEY_FROM
  • MOVE_MONEY_TO
  • MOVE_MONEY_AMOUNT
  • ZELLE_CHOOSE_DATE_TITLE
  • TRANSFER_DETAILS_MEMO
  • MAKE_A_PAYMENT_CANCEL_CONFIRM_TITLE
  • MAKE_A_PAYMENT_CANCEL_CONFIRM_BODY
  • MAKE_A_PAYMENT_CANCEL_CONFIRM_YES_BUTTON
  • MAKE_A_PAYMENT_CANCEL_CONFIRM_NO_BUTTON
  • TRANSFER_CANCEL_CONFIRM_TITLE
  • TRANSFER_CANCEL_CONFIRM_BODY
  • TRANSFER_CANCEL_CONFIRM_YES_BUTTON
  • TRANSFER_CANCEL_CONFIRM_NO_BUTTON
  • MAKE_A_PAYMENT_CANCEL_SUCCESS_TITLE
  • MAKE_A_PAYMENT_CANCEL_SUCCESS_BODY
  • DONE
  • TRANSFER_CANCEL_SUCCESS_TITLE
  • TRANSFER_CANCEL_SUCCESS_BODY
  • TRANSFERS_FEE_NOTIFICATION_TITLE
  • TRANSFERS_FEE_NOTIFICATION_BODY
  • TRANSFERS_FEE_NOTIFICATION_PROCEED
  • TRANSFERS_FEE_NOTIFICATION_CANCEL
  • TRANSFER_EDIT_SUCCESS_TITLE
  • TRANSFER_EDIT_SUCCESS_BODY

Transfer Success View

The success screen for a completed transfer, which shows the confirmation number and some details about the transfer just created. This is created and displayed by the create portion of the Landing View.

Transfer Success bottom sheet.


Internal Configurations

internal_configs.json

1
2
3
"transfer_success_view": {
  "show_account_balances": false
}

UI Text

  • TRANSFER_CONFIRMATION_ID
  • TRANSFER_ID
  • TRANSFERS_FEE_NOTIFICATION_APPLIED
  • MOVE_MONEY_MAKE_ANOTHER_TRANSFER
  • TRANSFER_DETAILS_TRANSFER_SUCCESS_HEADER
  • MAKE_A_PAYMENT_MAKE_ANOTHER
  • MAKE_A_PAYMENT_TRANSFER_SUCCESS_HEADER
  • FROM_ACCOUNT
  • BALANCE
  • TO_ACCOUNT
  • BALANCE
  • RECURRING_TRANSFER_DETAILS_FREQUENCY
  • TRANSFER_DETAILS_SEND_ON
  • TRANSFER_DETAILS_DURATION
  • RETURN_TO_DASHBOARD

Remote Deposit Capture (RDC) Feature


Feature Configurations

Internal Configs File

1
2
3
4
5
6
7
"remote_deposit": {
  "show_bottom_navigation_menu": false,
  "has_accessible_remote_deposit_capture": true,
  "checkmate_sharpness_confidence": 0.9,
  "checkmate_side_confidence_blurry": 0.9,
  "checkmate_side_confidence_front_back": 0.8
}

RDC Landing View

The landing portion of the view contains a tab selection component with two options:

  • Form View (“Deposit check”)
  • History View (“View activity”)

The default tab selected is the Form View.

The Landing View


Configurations

  • has_remote_deposit_history

UI Text

  • CHECK_DEPOSIT
  • DASHBOARD_DEPOSIT_CHECK

RDC Form View

The first tab where a user can select the account the deposit will go into, select how much the check is, and navigate to the camera views.

The Form View


Configurations

  • remote_deposit_capture_has_memo
  • remote_deposit_show_confirmation_id

UI Text

  • CHECK_DEPOSIT
  • RDC_SUCCESS_MESSAGE
  • AMOUNT
  • TO_THIS_ACCOUNT
  • RDC_MEMO_PLACEHOLDER
  • RDC_WARNING_HEADER
  • RDC_WARNING_BODY
  • RDC_HOLD_TEXT
  • RDC_SECURED_MESSAGE
  • RDC_DEPOSIT_ANOTHER
  • RETURN_TO_DASHBOARD
  • SLIDER_CONFIRMATION
  • SLIDER_ID
  • OOPS_SOMETHING_WENT_WRONG
  • RDC_ERROR_GENERIC
  • RDC_COMPLETE_MESSAGE

RDC History View

The second tab containing the history of all the deposits that have been captured to date.

There are two supported styles for this:

  • One uses the remote deposit data.
  • The other is a transactions based list.

You can only support one of these in app at a time. This is controlled by scaffolding.

Internal Configurations

This will apply regardless of which presenter you use.

Internal Configurations File

1
2
3
"remote_deposit_history_view": {
  "show_account_name_and_number_remote_deposit_history": false
}

Remote Deposit History Presenter

The default option (if no scaffolding changes are made) which uses a custom list based on remote deposit data. This shows the status of all remote deposits.

The Remote Deposit History Presenter

Scaffolding

To use this view, you’ll need to update scaffolding to point to this presenter:

institutions/mxmobile/config/scaffold.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
  "app": {
    "features": [
      {        
        "name": "remote_deposit",
        "actions": [
          {
            "name": "landing",
            "presenters": [
              {
                "name": "history_presenter",
                "class_name": "Screens::V5::RemoteDepositHistoryPresenter"
              }
            ]
          }
        ]
      }
    ]
  }
}  

This updates the remote_deposit feature’s landing action’s second presenter, named history_presenter with Screens::V5::RemoteDepositHistoryPresenter instead of the default Screens::V5::RemoteDepositTransactionHistoryPresenter.

Configurations

  • default_institution_guid
  • institution_name
  • show_home_institution_account_numbers

UI Text

  • RDC_DEPOSIT_STATUS_PENDING
  • RDC_DEPOSIT_STATUS_FAILED
  • RDC_DEPOSIT_STATUS_REJECTED
  • RDC_DEPOSIT_STATUS_ACCEPTED
  • RDC_DEPOSIT_STATUS_POSTED
  • REMOTE_DEPOSIT_ACCESSIBILITY_LABEL
  • ACCOUNT_DETAIL_DEPOSIT

Zero State

If there have been no deposits to date, this history view will display a zero state.

The Remote Deposit History Zero State

UI Text

  • RDC_LIST_ZERO_STATE_HEADER_RDC_HISTORY
  • RDC_LIST_ZERO_STATE_BODY

Remote Deposit Transaction History Presenter

The second option for the remote deposit history uses a transactions based list.

Refer to the transaction list component to find more information.

UI Text

  • TRANSACTIONS_TRANSACTIONS
  • TRANSACTIONS_SUM_HEADER_MESSAGE
  • TRANSACTIONS_UNCATEGORIZED
  • TRANSFER_RENDERER_ACCESSIBILITY_LABEL
  • RECURRING_TRANSFER_RENDERER_ACCESSIBILITY_LABEL
  • ACCESSIBILITY_MERCHANT_HISTORY_AVG_SPENDING_LABEL
  • ACCESSIBILITY_MERCHANT_HISTORY_GROUP_HEADER_LABEL
  • TRANSACTION_FILTER_SEARCH
  • ACCESSIBILITY_TRANSACTION_VIEW_SEARCH_HINT
  • BLANK
  • TRANSACTION_FILTER_SEARCH
  • ACCESSIBILITY_TRANSACTION_VIEW_SEARCH_HINT
  • CALCULATING
  • TRANSACTIONS_SUM_HEADER_MESSAGE
  • HIDE
  • TRANSACTIONS_UNCATEGORIZED
  • ACH_TRANSFER_STATUS_PENDING
  • TRANSFER_DETAILS_TRANSFER_PENDING_SUBTITLE
  • RECURRING_TRANSFER_DETAILS_SUBTITLE
  • TRANSACTION_OPTION_FILTER_NUM_ACCOUNTS
  • TRANSACTION_OPTION_FILTER_ALL_ACCOUNTS
  • TRANSACTION_OPTION_FILTER_NUM_TYPES
  • TRANSACTION_OPTION_FILTER_ALL_TYPES
  • TRANSACTION_OPTION_FILTER_NUM_TAGS
  • TRANSACTION_OPTION_FILTER_ALL_TAGS

Zero State

If there have been no credit transactions to date, this history view will display a zero state.

The Remote Deposit History Zero State

UI Text

  • RDC_LIST_ZERO_STATE_HEADER_ACCOUNT_LIST
  • RDC_LIST_ZERO_STATE_BODY

RDC Camera View

The view where users can capture the check image. This requires the user to take a front image and a back image.

The Check Image


Configurations

  • has_regulation_cc_poptart
  • app_name
  • has_regulation_cc_message

UI Text

  • CAMERA_PERMISSION_DENIED_TEXT_IOS (overrides the CAMERA_PERMISSIONS_DENIED_TEXT only on IOS)
  • CAMERA_PERMISSION_DENIED_TEXT
  • RDC_CAMERA_BUTTON_RETAKE
  • ACCESSIBILITY_RDC_RETAKE_LABEL
  • ACCESSIBILITY_RDC_RETAKE_HINT
  • RDC_CAMERA_BUTTON_CONFIRMATION
  • ACCESSIBILITY_RDC_USE_LABEL
  • ACCESSIBILITY_RDC_USE_HINT
  • RDC_CAMERA_USE_IMAGE_HELP
  • RDC_CC_MESSAGE
  • ACCESSIBILITY_RDC_CLOSE_LABEL
  • ACCESSIBILITY_RDC_CLOSE_HINT
  • RDC_AUTO_CAPTURE_SUGGESTION
  • ACCESSIBILITY_RDC_AUTOCAPTURE_HINT
  • RDC_CAPTURE_SETTINGS_AUTO_CAPTURE
  • ACCESSIBILITY_RDC_FLASH_HINT
  • RDC_CHECK_FRONT
  • ACCESSIBILITY_RDC_HELP_LABEL
  • ACCESSIBILITY_RDC_HELP_HINT
  • ACCESSIBILITY_RDC_CAPTURE_LABEL
  • ACCESSIBILITY_RDC_CAPTURE_HINT
  • CAMERA_PERMISSION_DENIED_HEADER
  • LOCATION_ACCESS_SHOW_SETTINGS
  • CLOSE
  • CAMERA_PERMISSION_DENIED_HEADER
  • OKAY
  • ACCESSIBILITY_RDC_FLASH_ON_LABEL
  • ACCESSIBILITY_RDC_FLASH_OFF_LABEL
  • ACCESSIBILITY_RDC_AUTOCAPTURE_OFF
  • ACCESSIBILITY_RDC_AUTOCAPTURE_ON
  • RDC_CHECK_FRONT
  • RDC_CHECK_BACK
  • RDC_CC_MESSAGE_FRONT
  • RDC_CC_MESSAGE
  • RDC_CAMERA_USE_IMAGE
  • RDC_GENERAL_TIP
  • RDC_AUTO_CAPTURE_TIP
  • RDC_MANUAL_CAPTURE_TIP
  • RDC_FLASH_TIP

Images

Name Resolution File
Chart Triangle
  • HD: 64x35
  • SD: 32x18
  • HD: assets/images/hd/chart_triangle.png
  • SD: assets/images/sd/chart_triangle.png
Spotlight Toggle
  • HD: 96x52
  • HD: assets/images/hd/spotlight_toggle.png

RDC Details View

The view when a deposit is selected for viewing.

The Details View


Configurations

  • remote_deposit_show_confirmation_id
  • show_home_institution_account_numbers
  • remote_deposit_show_confirmation_id

UI Text

  • RDC_DEPOSIT_DETAILS
  • AMOUNT
  • STATUS
  • ERROR
  • DATE
  • RDC_DEPOSIT_DETAILS_CONFIRMATION_ID
  • RDC_DEPOSIT_DETAILS_VIEW_IMAGES_CAPTION
  • RDC_DEPOSIT_DETAILS_VIEW_FRONT
  • RDC_DEPOSIT_DETAILS_VIEW_BACK
  • UNKNOWN
  • RDC_DEPOSIT_STATUS_POSTED
  • RDC_DEPOSIT_STATUS_ACCEPTED
  • RDC_DEPOSIT_STATUS_PENDING
  • RDC_DEPOSIT_STATUS_FAILED
  • RDC_DEPOSIT_STATUS_REJECTED

RDC Camera Shutters Component

Used in the Camera View.


RDC Disclaimer Component

Used in the Form View.

Configurations

  • has_ncua_logo

Assets

Name Asset Type Resolution File
NCUA Logo Image
  • HD: 150x70
  • SD: 28x13
  • HD: assets/images/hd/NCUA.png
  • SD: assets/images/sd/NCUA.png

RDC Check Prompt Component

Used in the Camera View.

Assets

Name Asset Type Resolution File
Check Front Image
  • HD: 980x430
  • SD: 980x430
  • HD: assets/images/hd/check_front.png
  • SD: assets/images/sd/check_front.png
Check Back Image
  • HD: 980x428
  • SD: 980x428
  • HD: assets/images/hd/check_back.png
  • SD: assets/images/sd/check_back.png

Transaction Feature

Shows a user’s past transactions, their transaction details, and has a filter system used for searching.


Transaction View

Displays the user’s transactional data.

Transaction View


UI Text

  • TRANSACTIONS_TRANSACTIONS
  • TRANSACTION_FILTER_SEARCH
  • ACCESSIBILITY_TRANSACTION_VIEW_SEARCH_HINT
  • TRANSACTIONS_TRANSACTIONS
  • TRANSACTIONS_SUM_HEADER_MESSAGE
  • TRANSACTION_FILTER_SEARCH
  • ACCESSIBILITY_TRANSACTION_VIEW_SEARCH_HINT
  • ACCESSIBILITY_TRANSACTION_VIEW_EXIT_SEARCH
  • ACCESSIBILITY_TRANSACTION_VIEW_EXIT_SEARCH_HINT
  • TRANSACTION_OPTION_FILTER_NUM_ACCOUNTS
  • TRANSACTION_OPTION_FILTER_ALL_ACCOUNTS
  • TRANSACTION_OPTION_FILTER_TIME
  • TRANSACTION_OPTION_FILTER_NUM_TYPES
  • TRANSACTION_OPTION_FILTER_ALL_TYPES
  • TRANSACTION_OPTION_FILTER_NUM_TAGS
  • TRANSACTION_OPTION_FILTER_ALL_TAGS
  • CALCULATING

Transaction Detail View

Displays data about a specific transaction.

Transaction Detail View


Context

The Transaction GUID for this transaction is passed in by a MX::Routing::GUID.
The Enabled state of the merchant history is passed in by a MX::Routing::ADD_RESOURCE.


Internal Configurations

internal_configs.json

1
2
3
4
5
6
7
"transaction_detail_view": {
  "sliding_offset_height": 32,
  "show_plugin_chat_button": false,
  "show_navbar_title": false,
  "show_feed_date": true,
  "show_transaction_dispute": false
}

Configurations

  • show_graph_in_transaction_details
  • has_transactions_check_images_deposited
  • has_transactions_check_images_written
  • show_graph_in_transaction_details
  • show_graph_in_transaction_details

UI Text

  • TRANSACTION_DETAIL_TOOLBAR_TITLE
  • TRANSACTION_DETAIL_ADD_TAGS
  • TRANSACTION_DETAIL_TAGS
  • TRANSACTION_DETAIL_HIDE
  • TRANSACTION_DETAIL_HIDE_ACCOUNT_EXPLANATION
  • TRANSACTION_DETAIL_UNHIDE_TRANSACTION
  • TRANSACTION_DETAIL_HIDE_TRANSACTION
  • REMOVE_SPLIT
  • TRANSACTION_DETAIL_SPLIT_TRANSACTION
  • TRANSACTION_DETAIL_REMOVE_SPLIT_HEADER
  • TRANSACTION_DETAIL_SPLIT_TRANSACTION_BODY
  • TRANSACTION_DETAIL_DELETE_HEADER
  • TRANSACTIONS_CHECK_NUMBER
  • MERCHANT_HISTORY_CREDIT_LEGEND
  • MERCHANT_HISTORY_DEBIT_LEGEND
  • MERCHANT_HISTORY_SPENDING_AVG
  • EDIT
  • TRANSACTION_DETAIL_HIDDEN
  • UNHIDE
  • TRANSACTION_DETAIL_HIDDEN_ACCESSIBLE
  • TRANSACTION_DETAIL_SPENDING_HISTORY
  • CATEGORY
  • DATE
  • TRANSACTION_DETAIL_MEMO
  • TRANSACTION_DETAIL_TAGS
  • TRANSACTION_DETAIL_DISPUTE_TRANSACTION
  • TRANSACTIONS_VIEW_CHECK
  • TRANSACTIONS_VIEW_CHECK
  • SPLIT
  • TRANSACTION_DETAIL_ACTIONS

Transaction List Component

Controls displaying transactions in a row format.

In the following screenshot, the transaction list component is everything below the filter bubbles:

Transaction List Component


Internal Configurations

internal_configs.json

1
2
3
"transaction_list_view": {
  "list_header_style": "SMALL"
}

UI Text

  • TRANSACTIONS_SUM_HEADER_MESSAGE
  • TRANSACTIONS_UNCATEGORIZED
  • TRANSFER_RENDERER_ACCESSIBILITY_LABEL
  • RECURRING_TRANSFER_RENDERER_ACCESSIBILITY_LABEL
  • ACCESSIBILITY_MERCHANT_HISTORY_AVG_SPENDING_LABEL
  • ACCESSIBILITY_MERCHANT_HISTORY_GROUP_HEADER_LABEL
  • TRANSACTIONS_TRANSACTIONS
  • TRANSACTION_FILTER_SEARCH
  • ACCESSIBILITY_TRANSACTION_VIEW_SEARCH_HINT
  • TRANSACTIONS_TRANSACTIONS
  • BLANK
  • TRANSACTION_FILTER_SEARCH
  • ACCESSIBILITY_TRANSACTION_VIEW_SEARCH_HINT
  • CALCULATING
  • TRANSACTIONS_SUM_HEADER_MESSAGE
  • HIDE
  • TRANSACTIONS_UNCATEGORIZED
  • ACH_TRANSFER_STATUS_PENDING
  • TRANSFER_DETAILS_TRANSFER_PENDING_SUBTITLE
  • RECURRING_TRANSFER_DETAILS_SUBTITLE
  • TRANSACTION_OPTION_FILTER_NUM_ACCOUNTS
  • TRANSACTION_OPTION_FILTER_ALL_ACCOUNTS
  • TRANSACTION_OPTION_FILTER_NUM_TYPES
  • TRANSACTION_OPTION_FILTER_ALL_TYPES
  • TRANSACTION_OPTION_FILTER_NUM_TAGS
  • TRANSACTION_OPTION_FILTER_ALL_TAGS

Accounts Feature

Helps the user access their account data and the details of their accounts.


Accounts View

A multi-sectioned view that displays institutions that are linked and the accounts that have been aggregated from those institutions. This view also contains an access point for the Connect Account flow.

The Accounts tab on the Accounts View

The Connections tab on the Accounts View


UI Text

  • ACCOUNTS_ACCOUNTS

Account Detail View

Shows the full details of a user’s account and a list of all transactions associated with that account.

The Account Detail  View


Context

This view takes in a Routing::GUID which represents the guid of the account to display details for.


Internal Configurations

internal_configs.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
"account_detail_view": {
  "show_electronic_documents": false,
  "show_graph": true,
  "show_transfer_button": true,
  "show_remote_deposit_button": true,
  "show_make_a_payment_button": false,
  "show_statements": false,
  "show_stop_checks": false,
  "sliding_offset_height": 32,
  "show_navbar_title": false,
  "show_close_home_accounts": false,
  "show_interest_percent": false,
  "show_past_due_notification": false,
  "show_advance_buttons": false,
  "show_alert_management": false,
  "show_card_controls": false
}

Configurations

  • has_account_transfers
  • has_remote_deposit_capture
  • has_account_transfers
  • transfers_rev_11_support
  • routing_number

UI Text

  • ACCOUNT_DETAILS
  • TRANSACTIONS_ADD_A_TRANSACTION
  • ACCOUNT_DETAIL_CREDITS
  • ACCOUNT_DETAIL_DEBITS
  • ACCOUNT_DETAIL_PAST_DUE_DESCRIPTION
  • ACCOUNT_DETAIL_PAST_DUE_SUB_DESCRIPTION
  • ENTER
  • COPIED_TO_CLIPBOARD
  • ACCOUNT_DETAIL_CONNECTION_STATUS
  • INSTITUTION_DETAILS_UPDATE_CREDENTIALS
  • ACCOUNT_DETAIL_ACTIONS
  • ACCOUNT_DETAIL_STOP_CHECKS
  • ACCOUNT_DETAIL_STATEMENTS
  • ACCOUNT_DETAIL_ELECTRONIC_DOCUMENTS
  • ACCOUNT_DETAIL_ALERT_MANAGEMENT
  • ACCOUNT_DETAIL_CARD_CONTROLS
  • ACCOUNT_DETAIL_HIDE_ACCOUNT
  • ACCOUNT_DETAIL_HIDE_ACCOUNT_EXPLANATION
  • ACCOUNT_DETAIL_CLOSE_ACCOUNT
  • ACCOUNT_DETAIL_CLOSE_ACCOUNT_EXPLANATION
  • ACCOUNT_DETAIL_CLOSE_HOME_ACCOUNT
  • ACCOUNT_DUPLICATE_MARK_DUPLICATE
  • ACCOUNT_DUPLICATE_MARK_DUPLICATE_EXPLANATION
  • ACCOUNT_DETAIL_DELETE_ACCOUNT
  • ACCOUNT_DETAIL_DELETE_ACCOUNT_EXPLANATION
  • ACCOUNT_DETAIL_VISIT_WEBSITE
  • INSTITUTION_DETAILS_UPDATE_CREDENTIALS
  • INSTITUTION_DETAILS_ANSWER_MFA
  • INSTITUTION_DETAILS_REFRESH_MFA
  • INSTITUTION_DETAILS_WAIT_MFA_BODY
  • INSTITUTION_DETAILS_WAIT_MFA
  • LOGIN_CONTACT_US

Images

Name Resolution File
Refresh
  • HD: 48x48
  • SD: 24x24
  • HD: assets/images/hd/refresh.png
  • SD: assets/images/sd/refresh.png

Account List Component

Used specifically for displaying a large number of accounts or institutions (members). These are sorted by type depending on the data used (accounts or members).

The Account List component


UI Text

  • ACCOUNTS
  • CONNECT
  • ACCESSIBILITY_ACCOUNT_VIEW_ADD_LABEL
  • ACCESSIBILITY_ACCOUNT_VIEW_ADD_HINT
  • ACCOUNTS
  • CONNECTIONS
  • ACCOUNTS_MEMBER_SUCCESS
  • ACCOUNTS_MEMBER_CHALLENGES
  • ACCOUNTS_MEMBER_ERROR
  • ACCOUNTS_CONNECTING
  • ACCOUNTS_THIS_MAY_TAKE_MINUTES
  • ACCOUNTS_MEMBER_SUCCESS
  • ACCOUNTS_MEMBER_CHALLENGES
  • ACCOUNTS_MEMBER_ERROR
  • ACCOUNTS_CONNECTING
  • INSTITUTION_DETAILS_UPDATE_CREDENTIALS
  • SPEEDBUMP_CONNECT_MORE_ACCOUNTS
  • MI_CONNECT_MORE_ACCOUNTS
  • SPEEDBUMP_GO_TO_DASHBOARD
  • FIRST_LOGIN_EXTERNAL_ACCOUNTS
  • ACCOUNTS_CONNECT_NON_CLIENT

Account Detail List Component

Appears in the Account Detail View and displays all the details for the selected account. This list is reactive to the type of account selected.

The Account Detail List component


Internal Configurations

internal_configs.json

1
2
3
"account_detail_list": {
  "graph_key_layout_is_horizontal": true
}

UI Text

  • TRANSACTIONS_TRANSACTIONS
  • ACCOUNT_DETAILS
  • TRANSACTIONS_NONE
  • ACCOUNT_DETAIL_ACCOUNT_HIDDEN_ACCESSIBLE
  • ACCOUNT_DETAIL_FEWER_DETAILS_A11Y
  • ACCOUNT_DETAIL_MORE_DETAILS_A11Y
  • ACCOUNT_DETAIL_ADVANCE_BUTTON
  • ACCOUNT_DETAIL_TRANSACTION_TABS
  • ACCOUNT_DETAIL_REQUEST_ADVANCE_BUTTON
  • ACCOUNT_DETAIL_REQUEST_ADVANCE_BUTTON_HINT
  • ACCOUNT_DETAIL_TRANSFER_BUTTON
  • ACCOUNT_DETAIL_TRANSFER_BUTTON_HINT
  • ACCOUNT_DETAIL_REMOTE_DEPOSIT_BUTTON
  • ACCOUNT_DETAIL_REMOTE_DEPOSIT_BUTTON_HINT
  • ACCOUNT_DETAIL_MAKE_A_PAYMENT_BUTTON
  • ACCOUNT_DETAIL_MAKE_A_PAYMENT_BUTTON_HINT
  • ACCOUNT_DETAIL_ADVANCE_ONE_TIME_PAYMENT_BUTTON
  • ACCOUNT_DETAIL_ADVANCE_ONE_TIME_PAYMENT_BUTTON_HINT
  • ACCOUNT_DETAIL_PAYMENT_SCHEDULE_BUTTON
  • ACCOUNT_DETAIL_PAYMENT_SCHEDULE_BUTTON_HINT
  • ACCOUNT_DETAIL_FEWER_DETAILS
  • ACCOUNT_DETAIL_MORE_DETAILS
  • TRANSACTIONS_TRANSACTIONS
  • ACCOUNT_DETAILS
  • ACCOUNT_DETAIL_ACCOUNT_HIDDEN
  • UNHIDE
  • ACCOUNT_DETAIL_ACCOUNT_CLOSED
  • TRANSACTIONS_NONE
  • ACCOUNT_DETAIL_EDITED_BY_USER

Connect Accounts Feature

The Connect Accounts feature lets users aggregate external accounts into one place.

Search Institutions View


Search Institutions View

The entry point for the connect account flow. This is where users can search and select the institution of the account they would like to connect.

Search Institutions View


UI Text

  • MI_MOST_POPULAR
  • MI_SEARCH_ACCOUNT
  • ACCOUNTS_ACCOUNTS
  • CANCEL
  • ADD_ANOTHER
  • INSTITUTION_DETAIL_DUPLICATES
  • SPEEDBUMP_CONNECT_ACCOUNTS

Institution Login View

The login view for the institution selected on the Search Institutions View. Once the user logs into the account, they will be taken back to the accounts view where they will be able to see the new accounts being added.

Institutions Login View


Context

This view takes in a InstitutionListData via a Routing::INSTITUTION_MODEL.


Configurations

  • uses_oauth
  • custom_url_protocol
  • has_ach_transfers

UI Text

  • MI_SECURED_CONNECTION
  • MI_CONNECT_ACCOUNT