/app/pages/common/Modals/PreferencesModal/PaymentInfo/index 🔨 Refactor 🧠 Overmind Hacktoberfest

packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/PaymentInfo.tsx

@@ -0,0 +1,60 @@
+import React, { 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 = () => {
+  const {
+    state: {
+      preferences: {
+        paymentDetailError,
+        paymentDetails: paymentDetailsFromHooks,
+        isLoadingPaymentDetails,
+      },
+    },
+    actions: {
+      preferences: { paymentDetailsRequested, paymentDetailsUpdated },
+    },
+  } = useOvermind();
+  useEffect(() => {
+    paymentDetailsRequested();
+  }, [paymentDetailsRequested]);
+
+  const updatePaymentDetails = ({ token }) => {
+    paymentDetailsUpdated({ token });
+  };
+
+  const paymentDetails = () => {
+    const { last4, name, brand } = paymentDetailsFromHooks;
+    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>
+        <SubscribeForm
+          buttonName="Update"
+          loadingText="Updating Card Info..."
+          name={name}
+          subscribe={updatePaymentDetails}
+        />
+      </div>
+    );
+  };
+
+  return (
+    <Container>
+      <Title>Payment Info</Title>
+      {isLoadingPaymentDetails ? (
+        <div>Loading payment details...</div>
+      ) : (
+        paymentDetails()
+      )}
+    </Container>
+  );
+};

packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/elements.ts

@@ -1,6 +1,11 @@
 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;
+`;

packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/index.ts

@@ -0,0 +1,3 @@
+import { PaymentInfo } from './PaymentInfo';
+
+export default PaymentInfo;

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';