Merge branch 'overmind/PaymentInfo' of https://github.com/MichaelDeBoey/codesandbox-client into MichaelDeBoey-overmind/PaymentInfo

SaraVieira · SaraVieira · commit f1c99419a4cf · 2019-12-10T14:17:03.000+01:00
diff --git a/packages/app/src/app/overmind/namespaces/preferences/actions.ts b/packages/app/src/app/overmind/namespaces/preferences/actions.ts
@@ -86,9 +86,9 @@ export const paymentDetailsRequested: AsyncAction = async ({
   state.preferences.isLoadingPaymentDetails = false;
 };
 
-export const paymentDetailsUpdated: AsyncAction<{ token: string }> = async (
-  { state, effects },
-  { token }
+export const paymentDetailsUpdated: AsyncAction<string> = async (
+  { effects, state },
+  token
 ) => {
   state.preferences.isLoadingPaymentDetails = true;
   state.preferences.paymentDetails = await effects.api.updatePaymentDetails(
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/elements.ts b/packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/elements.ts
@@ -1,11 +1,6 @@
 import styled from 'styled-components';
-import { Subheading } from '../elements';
 
 export const Container = styled.div`
   font-weight: 400;
   color: rgba(255, 255, 255, 0.6);
 `;
-
-export const CustomSubHeading = styled(Subheading)`
-  margin-top: 2rem;
-`;
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/index.ts b/packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/index.ts
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
@@ -1,46 +1,56 @@
-import React, { useEffect } from 'react';
+import React, { ComponentProps, FunctionComponent, useEffect } from 'react';
+
 import { SubscribeForm } from 'app/components/SubscribeForm';
 import { useOvermind } from 'app/overmind';
-import { Card } from './Card';
+
 import { Title, Subheading } from '../elements';
-import { Container, CustomSubHeading } from './elements';
 
-export const PaymentInfo: React.FunctionComponent = () => {
+import { Card } from './Card';
+import { Container } from './elements';
+
+export const PaymentInfo: FunctionComponent = () => {
   const {
+    actions: {
+      preferences: { paymentDetailsRequested, paymentDetailsUpdated },
+    },
     state: {
       preferences: {
-        paymentDetailError,
-        paymentDetails: paymentDetailsFromHooks,
         isLoadingPaymentDetails,
+        paymentDetailError,
+        paymentDetails,
       },
     },
-    actions: {
-      preferences: { paymentDetailsRequested, paymentDetailsUpdated },
-    },
   } = useOvermind();
+
   useEffect(() => {
     paymentDetailsRequested();
   }, [paymentDetailsRequested]);
 
-  const updatePaymentDetails = ({ token }) => {
-    paymentDetailsUpdated({ token });
-  };
+  const updatePaymentDetails: ComponentProps<
+    typeof SubscribeForm
+  >['subscribe'] = ({ token }) => paymentDetailsUpdated(token);
 
-  const paymentDetails = () => {
-    const { last4, name, brand } = paymentDetailsFromHooks;
-    if (paymentDetailError)
+  const Body = () => {
+    if (isLoadingPaymentDetails) {
+      return <div>Loading payment details...</div>;
+    }
+
+    if (paymentDetailError) {
       return <div>An error occurred: {paymentDetailError}</div>;
+    }
 
     return (
       <div>
         <Subheading>Current card</Subheading>
-        <Card last4={last4} name={name} brand={brand} />
 
-        <CustomSubHeading>Update card info</CustomSubHeading>
+        <Card brand={paymentDetails.brand} last4={paymentDetails.last4} name={paymentDetails.name} />
+
+        <Subheading style={{ marginTop: '2rem' }}>Update card info</Subheading>
+
         <SubscribeForm
           buttonName="Update"
           loadingText="Updating Card Info..."
-          name={name}
+          name={paymentDetails.name}
           subscribe={updatePaymentDetails}
         />
       </div>
@@ -50,11 +60,8 @@ export const PaymentInfo: React.FunctionComponent = () => {
   return (
     <Container>
       <Title>Payment Info</Title>
-      {isLoadingPaymentDetails ? (
-        <div>Loading payment details...</div>
-      ) : (
-        paymentDetails()
-      )}
+
+      <Body />
     </Container>
   );
 };
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/index.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/index.tsx
@@ -17,7 +17,7 @@ import { Appearance } from './Appearance';
 import { EditorSettings } from './EditorPageSettings/EditorSettings';
 import { PreviewSettings } from './EditorPageSettings/PreviewSettings';
 import { CodeFormatting } from './CodeFormatting';
-import PaymentInfo from './PaymentInfo';
+import { PaymentInfo } from './PaymentInfo';
 import { Integrations } from './Integrations';
 import { Badges } from './Badges';
 import { Experiments } from './Experiments';
