|
| 1 | +import React from 'react' |
| 2 | +import { useSelector } from 'react-redux' |
| 3 | + |
| 4 | +import 'src/views/oauth/experiments/PredirectInstructions.css' |
| 5 | + |
| 6 | +import { selectConnectConfig } from 'src/redux/reducers/configSlice' |
| 7 | + |
| 8 | +import { Icon, IconWeight, Text } from '@mxenabled/mxui' |
| 9 | +import { __ } from 'src/utilities/Intl' |
| 10 | +import { Divider, Paper } from '@mui/material' |
| 11 | +import { ExampleCheckbox } from 'src/components/ExampleCheckbox' |
| 12 | + |
| 13 | +export const WELLS_FARGO_INSTRUCTIONS_FEATURE_NAME = 'WELLS_FARGO_INSTRUCTIONS' |
| 14 | + |
| 15 | +function PredirectInstructions(props: React.FunctionComponent & { institutionName: string }) { |
| 16 | + const config = useSelector(selectConnectConfig) |
| 17 | + const products = config?.data_request?.products || [] |
| 18 | + const showProfileSelection = |
| 19 | + products.includes('account_verification') || products.includes('identity_verification') |
| 20 | + |
| 21 | + const institutionColor = '#d9181f' // Wells Fargo red |
| 22 | + |
| 23 | + const uiElementTypes = { |
| 24 | + CHECKING_OR_SAVINGS_ACCOUNT: 'checking-or-savings-account', |
| 25 | + DIVIDER: 'divider', |
| 26 | + PROFILE_INFORMATION: 'profile', |
| 27 | + } |
| 28 | + const checkboxItems = [uiElementTypes.CHECKING_OR_SAVINGS_ACCOUNT] |
| 29 | + |
| 30 | + if (showProfileSelection) { |
| 31 | + checkboxItems.push(uiElementTypes.DIVIDER) |
| 32 | + checkboxItems.push(uiElementTypes.PROFILE_INFORMATION) |
| 33 | + } |
| 34 | + |
| 35 | + /* Bold text is needed. The styles applied to this text prevent server-provided styles from ruining strong elements */ |
| 36 | + const instructionText = showProfileSelection |
| 37 | + ? __( |
| 38 | + 'After logging in, share at least one account and %1profile information%2.', |
| 39 | + "<strong style='font-weight: bold;'>", |
| 40 | + '</strong>', |
| 41 | + ) |
| 42 | + : __('After logging in, share at least one account.') |
| 43 | + |
| 44 | + return ( |
| 45 | + <> |
| 46 | + <Text bold={true} component="h2" sx={{ mb: 12 }} truncate={false} variant="H2"> |
| 47 | + {__('Log in at %1', props.institutionName)} |
| 48 | + </Text> |
| 49 | + <div className="predirect-instruction-text-wrapper"> |
| 50 | + <Text |
| 51 | + className="predirect-instruction-text" |
| 52 | + color="textSecondary" |
| 53 | + dangerouslySetInnerHTML={{ |
| 54 | + __html: instructionText, |
| 55 | + }} |
| 56 | + truncate={false} |
| 57 | + variant="body1" |
| 58 | + /> |
| 59 | + {showProfileSelection && ( |
| 60 | + <Icon color="secondary" name="info" size={20} weight={IconWeight.Dark} /> |
| 61 | + )} |
| 62 | + </div> |
| 63 | + |
| 64 | + <div className="institution-panel-wrapper"> |
| 65 | + <Paper className="institution-panel" elevation={2}> |
| 66 | + {/* Inline color and font styles on the header and text because this is a dynamic area */} |
| 67 | + <div className="institution-panel-header" style={{ backgroundColor: institutionColor }}> |
| 68 | + <Text aria-hidden="true" sx={{ fontWeight: 600, color: 'white' }} uppercase={true}> |
| 69 | + {props.institutionName} |
| 70 | + </Text> |
| 71 | + </div> |
| 72 | + <div className="institution-panel-body"> |
| 73 | + <ul aria-label={__('Information to select on the %1 site', props.institutionName)}> |
| 74 | + {checkboxItems.map((item, index) => { |
| 75 | + if (item === uiElementTypes.DIVIDER) { |
| 76 | + return <Divider key={`divider-${index}`} /> |
| 77 | + } else { |
| 78 | + let text = '' |
| 79 | + if (item === uiElementTypes.CHECKING_OR_SAVINGS_ACCOUNT) { |
| 80 | + text = __('Checking or savings account') |
| 81 | + } else if (item === uiElementTypes.PROFILE_INFORMATION) { |
| 82 | + text = __('Profile information') |
| 83 | + } |
| 84 | + |
| 85 | + const isLastItem = index === checkboxItems.length - 1 |
| 86 | + |
| 87 | + return ( |
| 88 | + <li key={item}> |
| 89 | + <ExampleCheckbox |
| 90 | + id={item} |
| 91 | + pseudoFocusColor={institutionColor} |
| 92 | + showTouchIndicator={isLastItem} |
| 93 | + /> |
| 94 | + <Text className="psuedo-checkbox-label" variant="body1"> |
| 95 | + {text} |
| 96 | + </Text> |
| 97 | + </li> |
| 98 | + ) |
| 99 | + } |
| 100 | + })} |
| 101 | + </ul> |
| 102 | + </div> |
| 103 | + </Paper> |
| 104 | + </div> |
| 105 | + </> |
| 106 | + ) |
| 107 | +} |
| 108 | + |
| 109 | +export { PredirectInstructions } |
0 commit comments