2 files changed, 43 insertions, 21 deletions

diff --git a/gui/packages/desktop/src/renderer/components/Account.js b/gui/packages/desktop/src/renderer/components/Account.js
index 3140670675..bdfaec893e 100644
--- a/gui/packages/desktop/src/renderer/components/Account.js
+++ b/gui/packages/desktop/src/renderer/components/Account.js
@@ -51,16 +51,6 @@ export default class Account extends Component<Props, State> {
   }
 
   render() {
-    const expiry = moment(this.props.accountExpiry);
-    const isOutOfTime = expiry.isSameOrBefore(moment());
-    const formattedExpiry = expiry.toDate().toLocaleString(this.props.expiryLocale, {
-      day: 'numeric',
-      month: 'long',
-      year: 'numeric',
-      hour: 'numeric',
-      minute: 'numeric',
-    });
-
     return (
       <Layout>
         <Container>
@@ -89,13 +79,11 @@ export default class Account extends Component<Props, State> {
 
                   <View style={styles.account__row}>
                     <Text style={styles.account__row_label}>Paid until</Text>
-                    {isOutOfTime ? (
-                      <Text style={styles.account__out_of_time} testName="account__out_of_time">
-                        {'OUT OF TIME'}
-                      </Text>
-                    ) : (
-                      <Text style={styles.account__row_value}>{formattedExpiry}</Text>
-                    )}
+                    <FormattedAccountExpiry
+                      expiry={this.props.accountExpiry}
+                      locale={this.props.accountExpiryLocale}
+                      testName="account__expiry"
+                    />
                   </View>
 
                   <View style={styles.account__footer}>
@@ -121,3 +109,29 @@ export default class Account extends Component<Props, State> {
     );
   }
 }
+
+const FormattedAccountExpiry = (props) => {
+  if (!props.expiry) {
+    return <Text style={styles.account__row_value}>{'Currently unavailable'}</Text>;
+  }
+
+  const expiry = moment(props.expiry);
+
+  if (expiry.isSameOrBefore(moment())) {
+    return <Text style={styles.account__out_of_time}>{'OUT OF TIME'}</Text>;
+  }
+
+  const formatOptions = {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+  };
+
+  return (
+    <Text style={styles.account__row_value}>
+      {expiry.toDate().toLocaleString(props.locale, formatOptions)}
+    </Text>
+  );
+};
diff --git a/gui/packages/desktop/test/components/Account.spec.js b/gui/packages/desktop/test/components/Account.spec.js
index 34c7b5ddf4..4813f3d20e 100644
--- a/gui/packages/desktop/test/components/Account.spec.js
+++ b/gui/packages/desktop/test/components/Account.spec.js
@@ -54,14 +54,22 @@ describe('components/Account', () => {
     const props = makeProps({
       accountExpiry: new Date('2001-01-01').toISOString(),
     });
-    const component = getComponent(render(props), 'account__out_of_time');
-    expect(component).to.have.length(1);
+    const component = getComponent(render(props), 'account__expiry');
+    expect(component.dive().html()).to.contain('OUT OF TIME');
   });
 
   it('should not display "out of time" message when account is active', () => {
     const props = makeProps({});
-    const component = getComponent(render(props), 'account__out_of_time');
-    expect(component).to.have.length(0);
+    const component = getComponent(render(props), 'account__expiry');
+    expect(component.dive().html()).to.not.contain('OUT OF TIME');
+  });
+
+  it('should not display "unavailable" message when account expiry is missing', () => {
+    const props = makeProps({
+      accountExpiry: null,
+    });
+    const component = getComponent(render(props), 'account__expiry');
+    expect(component.dive().html()).to.contain('Currently unavailable');
   });
 });