Update redeem voucher alert design

3 files changed, 79 insertions, 38 deletions

diff --git a/gui/src/renderer/components/ExpiredAccountAddTime.tsx b/gui/src/renderer/components/ExpiredAccountAddTime.tsx
index 9831430d4e..12c34b2453 100644
--- a/gui/src/renderer/components/ExpiredAccountAddTime.tsx
+++ b/gui/src/renderer/components/ExpiredAccountAddTime.tsx
@@ -100,7 +100,7 @@ export function VoucherInput() {
               <StyledTitle>{messages.pgettext('connect-view', 'Redeem voucher')}</StyledTitle>
               <StyledLabel>{messages.pgettext('connect-view', 'Enter voucher code')}</StyledLabel>
               <StyledRedeemVoucherInput />
-              <RedeemVoucherResponse disableSuccessMessage />
+              <RedeemVoucherResponse />
             </StyledBody>
 
             <StyledFooter>
@@ -120,7 +120,9 @@ export function VoucherInput() {
 
 export function VoucherVerificationSuccess() {
   return (
-    <TimeAdded title={messages.pgettext('connect-view', 'Voucher was successfully redeemed')} />
+    <TimeAdded
+      title={messages.pgettext('redeem-voucher-view', 'Voucher was successfully redeemed')}
+    />
   );
 }
 
diff --git a/gui/src/renderer/components/RedeemVoucher.tsx b/gui/src/renderer/components/RedeemVoucher.tsx
index b878a94c4f..72ff6aa265 100644
--- a/gui/src/renderer/components/RedeemVoucher.tsx
+++ b/gui/src/renderer/components/RedeemVoucher.tsx
@@ -1,10 +1,15 @@
 import React, { useCallback, useContext, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { sprintf } from 'sprintf-js';
 import { VoucherResponse } from '../../shared/daemon-rpc-types';
+import { formatRelativeDate } from '../../shared/date-helper';
 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 ImageView from './ImageView';
 import { ModalAlert } from './Modal';
 import {
   StyledEmptyResponse,
@@ -12,7 +17,8 @@ import {
   StyledInput,
   StyledLabel,
   StyledSpinner,
-  StyledSuccessResponse,
+  StyledStatusIcon,
+  StyledTitle,
 } from './RedeemVoucherStyles';
 
 const MIN_VOUCHER_LENGTH = 16;
@@ -143,11 +149,7 @@ export function RedeemVoucherInput(props: IRedeemVoucherInputProps) {
   );
 }
 
-interface IRedeemVoucherResponseProps {
-  disableSuccessMessage?: boolean;
-}
-
-export function RedeemVoucherResponse(props: IRedeemVoucherResponseProps) {
+export function RedeemVoucherResponse() {
   const { response, submitting } = useContext(RedeemVoucherContext);
 
   if (submitting) {
@@ -157,15 +159,7 @@ export function RedeemVoucherResponse(props: IRedeemVoucherResponseProps) {
   if (response) {
     switch (response.type) {
       case 'success':
-        if (props.disableSuccessMessage) {
-          return <StyledEmptyResponse />;
-        } else {
-          return (
-            <StyledSuccessResponse>
-              {messages.pgettext('redeem-voucher-view', 'Voucher was successfully redeemed.')}
-            </StyledSuccessResponse>
-          );
-        }
+        return <StyledEmptyResponse />;
       case 'invalid':
         return (
           <StyledErrorResponse>
@@ -207,22 +201,55 @@ interface IRedeemVoucherAlertProps {
 
 export function RedeemVoucherAlert(props: IRedeemVoucherAlertProps) {
   const { submitting, response } = useContext(RedeemVoucherContext);
-  const cancelDisabled = submitting || response?.type === 'success';
+  const accountData = useSelector((state: IReduxState) => state.account);
 
-  return (
-    <ModalAlert
-      buttons={[
-        <RedeemVoucherSubmitButton key="submit" />,
-        <AppButton.BlueButton key="cancel" disabled={cancelDisabled} onClick={props.onClose}>
-          {messages.pgettext('redeem-voucher-alert', 'Cancel')}
-        </AppButton.BlueButton>,
-      ]}
-      close={props.onClose}>
-      <StyledLabel>{messages.pgettext('redeem-voucher-alert', 'Enter voucher code')}</StyledLabel>
-      <RedeemVoucherInput />
-      <RedeemVoucherResponse />
-    </ModalAlert>
-  );
+  const duration =
+    (accountData.expiry &&
+      accountData.previousExpiry &&
+      formatRelativeDate(accountData.expiry, accountData.previousExpiry)) ??
+    '';
+
+  if (response?.type === 'success') {
+    return (
+      <ModalAlert
+        buttons={[
+          <AppButton.BlueButton key="gotit" onClick={props.onClose}>
+            {messages.gettext('Got it!')}
+          </AppButton.BlueButton>,
+        ]}
+        close={props.onClose}>
+        <StyledStatusIcon>
+          <ImageView source="icon-success" height={60} width={60} />
+        </StyledStatusIcon>
+        <StyledTitle>
+          {messages.pgettext('redeem-voucher-view', 'Voucher was successfully redeemed.')}
+        </StyledTitle>
+        <StyledLabel>
+          {sprintf(
+            messages.pgettext('redeem-voucher-view', '%(duration)s was added to your account.'),
+            {
+              duration,
+            },
+          )}
+        </StyledLabel>
+      </ModalAlert>
+    );
+  } else {
+    return (
+      <ModalAlert
+        buttons={[
+          <RedeemVoucherSubmitButton key="submit" />,
+          <AppButton.BlueButton key="cancel" disabled={submitting} onClick={props.onClose}>
+            {messages.pgettext('redeem-voucher-alert', 'Cancel')}
+          </AppButton.BlueButton>,
+        ]}
+        close={props.onClose}>
+        <StyledLabel>{messages.pgettext('redeem-voucher-alert', 'Enter voucher code')}</StyledLabel>
+        <RedeemVoucherInput />
+        <RedeemVoucherResponse />
+      </ModalAlert>
+    );
+  }
 }
 
 interface IRedeemVoucherButtonProps {
@@ -241,7 +268,7 @@ export function RedeemVoucherButton(props: IRedeemVoucherButtonProps) {
         {messages.pgettext('redeem-voucher-alert', 'Redeem voucher')}
       </AppButton.GreenButton>
       {showAlert && (
-        <RedeemVoucherContainer onSuccess={onClose}>
+        <RedeemVoucherContainer>
           <RedeemVoucherAlert onClose={onClose} />
         </RedeemVoucherContainer>
       )}
diff --git a/gui/src/renderer/components/RedeemVoucherStyles.tsx b/gui/src/renderer/components/RedeemVoucherStyles.tsx
index e710bfe5bf..908681898a 100644
--- a/gui/src/renderer/components/RedeemVoucherStyles.tsx
+++ b/gui/src/renderer/components/RedeemVoucherStyles.tsx
@@ -36,11 +36,6 @@ export const StyledResponse = styled.span({
   lineHeight: '20px',
 });
 
-export const StyledSuccessResponse = styled(StyledResponse)({
-  fontWeight: 600,
-  color: colors.green,
-});
-
 export const StyledErrorResponse = styled(StyledResponse)({
   fontWeight: 800,
   color: colors.red,
@@ -54,3 +49,20 @@ export const StyledEmptyResponse = styled.span({
 export const StyledSpinner = styled(ImageView)({
   marginTop: '8px',
 });
+
+export const StyledStatusIcon = styled.div({
+  alignSelf: 'center',
+  width: '60px',
+  height: '60px',
+  marginBottom: '18px',
+  marginTop: '25px',
+});
+
+export const StyledTitle = styled.span({
+  fontFamily: 'Open Sans',
+  fontSize: '16px',
+  lineHeight: '22px',
+  fontWeight: 800,
+  color: colors.white,
+  marginBottom: '5px',
+});