fix small issue with undefined

SaraVieira · SaraVieira · commit 4cb503a5454b · 2019-12-10T14:49:02.000+01:00
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/index.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/index.tsx
@@ -31,6 +31,7 @@ export const PaymentInfo: FunctionComponent = () => {
   >['subscribe'] = ({ token }) => paymentDetailsUpdated(token);
 
   const Body = () => {
+    const { brand, last4, name } = paymentDetails || {};
     if (isLoadingPaymentDetails) {
       return <div>Loading payment details...</div>;
     }
@@ -42,15 +43,12 @@ export const PaymentInfo: FunctionComponent = () => {
     return (
       <div>
         <Subheading>Current card</Subheading>
-
-        <Card brand={paymentDetails.brand} last4={paymentDetails.last4} name={paymentDetails.name} />
-
+        <Card brand={brand} last4={last4} name={name} />
         <Subheading style={{ marginTop: '2rem' }}>Update card info</Subheading>
-
         <SubscribeForm
           buttonName="Update"
           loadingText="Updating Card Info..."
-          name={paymentDetails.name}
+          name={name}
           subscribe={updatePaymentDetails}
         />
       </div>
@@ -60,7 +58,6 @@ export const PaymentInfo: FunctionComponent = () => {
   return (
     <Container>
       <Title>Payment Info</Title>
-
       <Body />
     </Container>
   );
