diff options
| -rw-r--r-- | gui/src/renderer/components/Account.tsx | 103 | ||||
| -rw-r--r-- | gui/src/renderer/components/AccountStyles.tsx | 2 | ||||
| -rw-r--r-- | gui/src/renderer/components/RedeemVoucher.tsx | 28 |
3 files changed, 84 insertions, 49 deletions
diff --git a/gui/src/renderer/components/Account.tsx b/gui/src/renderer/components/Account.tsx index 0055a32049..7863040f83 100644 --- a/gui/src/renderer/components/Account.tsx +++ b/gui/src/renderer/components/Account.tsx @@ -13,7 +13,9 @@ import styles, { import AccountTokenLabel from './AccountTokenLabel'; import * as AppButton from './AppButton'; import { Layout } from './Layout'; +import { ModalContainer } from './Modal'; import { BackBarItem, NavigationBar, NavigationItems } from './NavigationBar'; +import { RedeemVoucherButton } from './RedeemVoucher'; import SettingsHeader, { HeaderTitle } from './SettingsHeader'; import { AccountToken } from '../../shared/daemon-rpc-types'; @@ -31,58 +33,63 @@ interface IProps { export default class Account extends React.Component<IProps> { public render() { return ( - <Layout> - <StyledContainer> - <NavigationBar> - <NavigationItems> - <BackBarItem action={this.props.onClose}> - { - // TRANSLATORS: Back button in navigation bar - messages.pgettext('navigation-bar', 'Settings') - } - </BackBarItem> - </NavigationItems> - </NavigationBar> + <ModalContainer> + <Layout> + <StyledContainer> + <NavigationBar> + <NavigationItems> + <BackBarItem action={this.props.onClose}> + { + // TRANSLATORS: Back button in navigation bar + messages.pgettext('navigation-bar', 'Settings') + } + </BackBarItem> + </NavigationItems> + </NavigationBar> - <AccountContainer> - <SettingsHeader> - <HeaderTitle>{messages.pgettext('account-view', 'Account')}</HeaderTitle> - </SettingsHeader> + <AccountContainer> + <SettingsHeader> + <HeaderTitle>{messages.pgettext('account-view', 'Account')}</HeaderTitle> + </SettingsHeader> - <AccountRow> - <AccountRowLabel> - {messages.pgettext('account-view', 'Account number')} - </AccountRowLabel> - <AccountRowValue - as={AccountTokenLabel} - accountToken={this.props.accountToken || ''} - /> - </AccountRow> + <AccountRow> + <AccountRowLabel> + {messages.pgettext('account-view', 'Account number')} + </AccountRowLabel> + <AccountRowValue + as={AccountTokenLabel} + accountToken={this.props.accountToken || ''} + /> + </AccountRow> - <AccountRow> - <AccountRowLabel>{messages.pgettext('account-view', 'Paid until')}</AccountRowLabel> - <FormattedAccountExpiry - expiry={this.props.accountExpiry} - locale={this.props.expiryLocale} - /> - </AccountRow> + <AccountRow> + <AccountRowLabel>{messages.pgettext('account-view', 'Paid until')}</AccountRowLabel> + <FormattedAccountExpiry + expiry={this.props.accountExpiry} + locale={this.props.expiryLocale} + /> + </AccountRow> - <AccountFooter> - <AppButton.BlockingButton - disabled={this.props.isOffline} - onPress={this.props.onBuyMore}> - <AppButton.GreenButton style={styles.account__buy_button}> - <AppButton.Label>{messages.gettext('Buy more credit')}</AppButton.Label> - <AppButton.Icon source="icon-extLink" height={16} width={16} /> - </AppButton.GreenButton> - </AppButton.BlockingButton> - <AppButton.RedButton onPress={this.props.onLogout}> - {messages.pgettext('account-view', 'Log out')} - </AppButton.RedButton> - </AccountFooter> - </AccountContainer> - </StyledContainer> - </Layout> + <AccountFooter> + <AppButton.BlockingButton + disabled={this.props.isOffline} + onPress={this.props.onBuyMore}> + <AppButton.GreenButton style={styles.button}> + <AppButton.Label>{messages.gettext('Buy more credit')}</AppButton.Label> + <AppButton.Icon source="icon-extLink" height={16} width={16} /> + </AppButton.GreenButton> + </AppButton.BlockingButton> + + <RedeemVoucherButton style={styles.button} /> + + <AppButton.RedButton onPress={this.props.onLogout}> + {messages.pgettext('account-view', 'Log out')} + </AppButton.RedButton> + </AccountFooter> + </AccountContainer> + </StyledContainer> + </Layout> + </ModalContainer> ); } } diff --git a/gui/src/renderer/components/AccountStyles.tsx b/gui/src/renderer/components/AccountStyles.tsx index c793b96a1b..970309e4f8 100644 --- a/gui/src/renderer/components/AccountStyles.tsx +++ b/gui/src/renderer/components/AccountStyles.tsx @@ -52,7 +52,7 @@ export const AccountFooter = styled.div({ }); export default { - account__buy_button: Styles.createViewStyle({ + button: Styles.createViewStyle({ marginBottom: 24, }), }; diff --git a/gui/src/renderer/components/RedeemVoucher.tsx b/gui/src/renderer/components/RedeemVoucher.tsx index 7a1c84e060..ad16523f54 100644 --- a/gui/src/renderer/components/RedeemVoucher.tsx +++ b/gui/src/renderer/components/RedeemVoucher.tsx @@ -1,9 +1,12 @@ import React, { useCallback, useContext, useState } from 'react'; +import { useSelector } from 'react-redux'; +import { Types } from 'reactxp'; import { VoucherResponse } from '../../shared/daemon-rpc-types'; import { messages } from '../../shared/gettext'; import { useAppContext } from '../context'; import useActions from '../lib/actionsHook'; import accountActions from '../redux/account/actions'; +import { IReduxState } from '../redux/store'; import * as AppButton from './AppButton'; import { ModalAlert } from './Modal'; import { @@ -195,3 +198,28 @@ export function RedeemVoucherAlert(props: IRedeemVoucherAlertProps) { </ModalAlert> ); } + +interface IRedeemVoucherButtonProps { + style?: Types.StyleRuleSetRecursive<Types.ViewStyleRuleSet>; +} + +export function RedeemVoucherButton(props: IRedeemVoucherButtonProps) { + const isBlocked = useSelector((state: IReduxState) => state.connection.isBlocked); + const [showAlert, setShowAlert] = useState(false); + + const onPress = useCallback(() => setShowAlert(true), []); + const onAlertClose = useCallback(() => setShowAlert(false), []); + + return ( + <> + <AppButton.GreenButton disabled={isBlocked} onPress={onPress} style={props.style}> + {messages.pgettext('redeem-voucher-alert', 'Redeem voucher')} + </AppButton.GreenButton> + {showAlert && ( + <RedeemVoucherContainer onSuccess={onAlertClose}> + <RedeemVoucherAlert onClose={onAlertClose} /> + </RedeemVoucherContainer> + )} + </> + ); +} |