fix: account page layout and style

src/features/Account/Account.tsx

@@ -1,9 +1,7 @@
 import { Box, Tab, Tabs } from "@mui/material";
-import Button from "@mui/material/Button";
 import { styled } from "@mui/material/styles";
 import { Elements } from "@stripe/react-stripe-js";
 import { loadStripe } from "@stripe/stripe-js";
-import { Auth } from "aws-amplify";
 import { Layout } from "components/Layout";
 import {
   useSeatsAvailable,
@@ -19,6 +17,7 @@ import { formatPath } from "../../helpers/helpers";
 import { useSubscriptionInfo } from "../../hooks/subscription";
 import { client as api } from "../../services/APIService";
 import { Intent } from "../../types/intent";
+import { SubscriptionStatus } from "../../types/subscription";
 import { Billing } from "./Billing";
 import { Modal as AddUser } from "./Modal";
 import { columns } from "./TableColumns";
@@ -60,7 +59,7 @@ export const Account = () => {
   const result = useUsers();
   const user = useUser();
   const users = useTableUsers(result);
-  const info = useSubscriptionInfo();
+  const subInfo = useSubscriptionInfo();
 
   const tab = searchParams.get("t");
 
@@ -96,20 +95,23 @@ export const Account = () => {
 
   useEffect(() => {
     const fn = async () => {
-      const pi = await api.post<PaymentIntentData, Intent>(
-        "/subscriptions/payment-intent",
-        {
-          currency: "eur",
-          amount: 1000,
-        }
-      );
-
-      console.log(pi);
-      setOptions({ clientSecret: pi.client_secret });
+      if (
+        !subInfo ||
+        subInfo.subscription.statusId != SubscriptionStatus.Cleared
+      ) {
+        const pi = await api.post<PaymentIntentData, Intent>(
+          "/subscriptions/payment-intent",
+          {
+            currency: "eur",
+            amount: 1000,
+          }
+        );
+        setOptions({ clientSecret: pi.client_secret });
+      }
       setTab(getTabIndex(tab));
     };
     fn();
-  }, [tab]);
+  }, [subInfo, tab]);
 
   const toggleModal = () => {
     setOpen(!isOpen);
@@ -145,7 +147,9 @@ export const Account = () => {
           <AddUser />
         </div>
       </StyledHeader>
+
       <br />
+
       <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
         <Tabs
           onChange={handleChange}
@@ -158,19 +162,9 @@ export const Account = () => {
       </Box>
 
       <CustomTabPanel value={tabValue} index={0}>
-        {seatsResult.maxSeats == 3 ? (
-          <>
-            <h2>Basic Plan</h2>
-
-            {info && <Billing {...info} />}
-            <StyledPremiumButton variant="contained" onClick={toggleModal}>
-              Upgrade to Premium
-            </StyledPremiumButton>
-          </>
-        ) : (
-          <h2>Premium Plan</h2>
-        )}
+        <Billing onToggle={toggleModal} subInfo={subInfo} />
       </CustomTabPanel>
+
       <CustomTabPanel value={tabValue} index={1}>
         <StyledTable
           columns={columns}
@@ -181,6 +175,7 @@ export const Account = () => {
           emptyText={"No users"}
         />
       </CustomTabPanel>
+
       {options && user && (
         <Elements stripe={stripePromise} options={options}>
           <UpgradeModal
@@ -221,11 +216,3 @@ const StyledTable = styled(Table)`
     color: var(--gray7);
   }
 `;
-
-const StyledPremiumButton = styled(Button)`
-  background: var(--blue7);
-
-  &:hover {
-    background: var(--blue8);
-  }
-`;

src/features/Account/Billing/Billing.tsx

@@ -0,0 +1,142 @@
+import { Hive } from "@mui/icons-material";
+import Button from "@mui/material/Button";
+import { styled } from "@mui/material/styles";
+import Table from "rc-table";
+import React from "react";
+
+import {
+  SubscriptionInfo,
+  SubscriptionStatus,
+} from "../../../types/subscription";
+import { PremiumPlan } from "../constants";
+import { transactionColumns } from "../TableColumns";
+import { components } from "../TableRow";
+
+interface BillingProps {
+  onToggle: () => void;
+  subInfo: SubscriptionInfo | undefined;
+}
+
+export const Billing = ({ onToggle, subInfo }: BillingProps) => {
+  const handleUpgrade = () => {
+    onToggle();
+  };
+
+  if (!subInfo || subInfo.subscription.statusId != SubscriptionStatus.Cleared) {
+    return (
+      <div>
+        <StyledHeader>
+          <Hive className="icon" />
+          <h2>Basic Plan</h2>
+        </StyledHeader>
+
+        <StyledPremiumButton variant="contained" onClick={handleUpgrade}>
+          Upgrade to Premium
+        </StyledPremiumButton>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <StyledHeader>
+        <Hive className="icon" />
+        <h2>Premium Plan</h2>
+      </StyledHeader>
+      <h3>Payment Method</h3>
+      <StyledPaymentMethod>
+        <span>Card</span>
+        <span>{subInfo.paymentMethod.billing_details.name}</span>
+        <aside>
+          <img
+            alt="card brand"
+            src={`/cardbrands/${getCardIcon(
+              subInfo.paymentMethod.card?.brand
+            )}`}
+          />
+          <span>{subInfo.paymentMethod.card?.last4}</span>
+        </aside>
+      </StyledPaymentMethod>
+      <StyledTable
+        columns={transactionColumns}
+        data={subInfo.transactions}
+        rowKey="id"
+        components={components}
+        tableLayout="auto"
+        emptyText={"No transactions"}
+      />
+    </div>
+  );
+};
+
+function getCardIcon(brand: string | undefined): string {
+  let icon: string;
+  switch (brand) {
+    case "visa":
+      icon = "visa.png";
+      break;
+    case "discover":
+      icon = "discover.png";
+      break;
+    case "mastercard":
+      icon = "mastercard.png";
+      break;
+    case "paypal":
+      icon = "paypal.png";
+      break;
+    case "maestro":
+      icon = "maestro.png";
+      break;
+    default:
+      icon = "default.png";
+  }
+  return icon;
+}
+
+const StyledTable = styled(Table)`
+  margin: var(--p48) 0;
+  th {
+    font-family: ProximaNova-Extrabold;
+    font-size: var(--p14);
+    color: var(--gray7);
+  }
+`;
+
+const StyledPremiumButton = styled(Button)`
+  background: var(--blue7);
+
+  &:hover {
+    background: var(--blue8);
+  }
+`;
+
+const StyledPaymentMethod = styled("div")`
+  display: flex;
+  flex-direction: row;
+  width: 500px;
+
+  justify-content: space-between;
+  align-items: center;
+  aside {
+    display: flex;
+    align-items: center;
+  }
+
+  img {
+    width: var(--p64);
+    border: 1px solid #eee;
+    border-radius: 8px;
+    margin: var(--p8);
+  }
+`;
+
+const StyledHeader = styled("div")`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  svg {
+    color: var(--gray7);
+    margin-right: var(--p8);
+  }
+`;

src/features/Account/Billing/index.ts

@@ -0,0 +1 @@
+export { Billing } from "./Billing";