Add voucher payment to account view

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>
+      )}
+    </>
+  );
+}