-
Notifications
You must be signed in to change notification settings - Fork 103
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #3758 from Emurgo/sorin/YOEXT-1534/cashback-settin…
…g-option add setting option for bring cashback
- Loading branch information
Showing
3 changed files
with
243 additions
and
0 deletions.
There are no files selected for viewing
190 changes: 190 additions & 0 deletions
190
...roi-extension/app/components/settings/categories/general-setting/BringCashbackSettings.js
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,190 @@ | ||
| // @flow | ||
| import { Component } from 'react'; | ||
| import type { Node, ComponentType } from 'react'; | ||
| import { observer } from 'mobx-react'; | ||
| import classNames from 'classnames'; | ||
| import Select from '../../../common/Select'; | ||
| import { MenuItem, Typography, Stack } from '@mui/material'; | ||
| import { Box } from '@mui/system'; | ||
| import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl'; | ||
| import ReactToolboxMobxForm from '../../../../utils/ReactToolboxMobxForm'; | ||
| import LocalizableError from '../../../../i18n/LocalizableError'; | ||
| import styles from './UnitOfAccountSettings.scss'; | ||
| import Dialog from '../../../widgets/Dialog'; | ||
| import VerticalFlexContainer from '../../../layout/VerticalFlexContainer'; | ||
| import LoadingSpinner from '../../../widgets/LoadingSpinner'; | ||
| import globalMessages from '../../../../i18n/global-messages'; | ||
| import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; | ||
| import { withLayout } from '../../../../styles/context/layout'; | ||
| import type { InjectedLayoutProps } from '../../../../styles/context/layout'; | ||
| import WalletAccountIcon from '../../../topbar/WalletAccountIcon'; | ||
|
|
||
| const messages = defineMessages({ | ||
| bringCashbackTitle: { | ||
| id: 'settings.cashback.title', | ||
| defaultMessage: '!!!Bring cashback wallet', | ||
| }, | ||
| note: { | ||
| id: 'settings.cashback.note', | ||
| defaultMessage: | ||
| '!!!Your connected wallet is the designated wallet for receiving ADA cashback rewards through Bring and applied to all partner websites. You can switch to a different wallet anytime to ensure your cashback is directed to your preferred wallet or select “None” to decline this service.', | ||
| }, | ||
| label: { | ||
| id: 'settings.cashback.label', | ||
| defaultMessage: '!!!Connected Wallet', | ||
| }, | ||
| }); | ||
|
|
||
| type currentValue = Array<{ | ||
| isSelected: boolean, | ||
| name: string, | ||
| plate: any, | ||
| type: string, | ||
| walletId: number, | ||
| ... | ||
| }>; | ||
|
|
||
| type Props = {| | ||
| +onSelect: string => Promise<void>, | ||
| +isSubmitting: boolean, | ||
| +cardanoWallets: any, | ||
| +currentValue: currentValue, | ||
| +error?: ?LocalizableError, | ||
| |}; | ||
|
|
||
| const saturationFactor = { | ||
| saturationFactor: 0, | ||
| size: 8, | ||
| scalePx: 4, | ||
| iconSize: 32, | ||
| borderRadius: 4, | ||
| }; | ||
|
|
||
| @observer | ||
| class BringCashbackSettings extends Component<Props & InjectedLayoutProps> { | ||
| static defaultProps: {| error: void |} = { | ||
| error: undefined, | ||
| }; | ||
|
|
||
| static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { | ||
| intl: intlShape.isRequired, | ||
| }; | ||
|
|
||
| form: ReactToolboxMobxForm = new ReactToolboxMobxForm({ | ||
| fields: { | ||
| cashbackWalletId: { | ||
| label: this.context.intl.formatMessage(messages.label), | ||
| }, | ||
| }, | ||
| }); | ||
|
|
||
| render(): Node { | ||
| const { cardanoWallets, error, currentValue } = this.props; | ||
| const { intl } = this.context; | ||
| const { form } = this; | ||
| const cashbackWalletId = form.$('cashbackWalletId'); | ||
| const componentClassNames = classNames([styles.component, 'currency']); | ||
|
|
||
| const optionRenderer = option => { | ||
| return ( | ||
| <MenuItem | ||
| key={option.name} | ||
| value={option.name} | ||
| sx={{ height: '60px' }} | ||
| id={'selectCashbackWallet-' + option.name + '-menuItem'} | ||
| > | ||
| <Box sx={{ display: 'flex' }}> | ||
| <WalletIcon imagePart={option.plate.ImagePart} /> | ||
| <Box sx={{ marginLeft: '8px' }}> | ||
| <Typography variant="body1" color="ds.text_gray_medium"> | ||
| {option.name}| {option.plate.TextPart} | ||
| </Typography> | ||
| </Box> | ||
| </Box> | ||
| </MenuItem> | ||
| ); | ||
| }; | ||
|
|
||
| const dialog = this.props.isSubmitting ? ( | ||
| <Dialog title={intl.formatMessage(globalMessages.processingLabel)} closeOnOverlayClick={false}> | ||
| <VerticalFlexContainer> | ||
| <LoadingSpinner /> | ||
| </VerticalFlexContainer> | ||
| </Dialog> | ||
| ) : null; | ||
|
|
||
| return ( | ||
| <Box | ||
| sx={{ | ||
| b: '20px', | ||
| mt: '13px', | ||
| }} | ||
| className={componentClassNames} | ||
| > | ||
| {dialog} | ||
| <Typography component="h2" variant="body1" fontWeight={500} mb="16px"> | ||
| {intl.formatMessage(messages.bringCashbackTitle)} | ||
| </Typography> | ||
|
|
||
| <Box | ||
| sx={{ | ||
| width: '506px', | ||
| marginTop: '0px', | ||
| }} | ||
| > | ||
| <Select | ||
| formControlProps={{ error: !!error }} | ||
| helperText={error && intl.formatMessage(error, error.values)} | ||
| error={!!error} | ||
| {...cashbackWalletId.bind()} | ||
| onChange={this.props.onSelect} | ||
| value={currentValue[0]} | ||
| menuProps={{ | ||
| sx: { | ||
| '& .MuiMenu-paper': { | ||
| maxHeight: '280px', | ||
| }, | ||
| }, | ||
| }} | ||
| renderValue={value => ( | ||
| <Stack direction="row"> | ||
| <WalletIcon imagePart={value.plate.ImagePart} /> | ||
| <Typography variant="body1" color="ds.text_gray_medium" mt="2px"> | ||
| {value.name}| {value.plate.TextPart} | ||
| </Typography> | ||
| </Stack> | ||
| )} | ||
| > | ||
| {cardanoWallets.map(option => optionRenderer(option))} | ||
| </Select> | ||
| <Typography component="div" variant="caption1" display="inline-block" color="grayscale.700"> | ||
| <FormattedHTMLMessage {...messages.note} /> | ||
| </Typography> | ||
| </Box> | ||
| </Box> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default (withLayout(BringCashbackSettings): ComponentType<Props>); | ||
|
|
||
| const WalletIcon = ({ imagePart }: {| imagePart: string |}) => { | ||
| return ( | ||
| <Box | ||
| sx={{ | ||
| width: `24px`, | ||
| height: `24px`, | ||
| borderRadius: `8px`, | ||
| alignItems: 'center', | ||
| justifyContent: 'center', | ||
| '& .identicon': { | ||
| borderRadius: `8px`, | ||
| }, | ||
|
|
||
| marginRight: '16px', | ||
| }} | ||
| > | ||
| <WalletAccountIcon iconSeed={imagePart} saturationFactor={0} size={8} scalePx={4} /> | ||
| </Box> | ||
| ); | ||
| }; |
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