Styling Subscriptions Rows Continued

zreecespieces · May 14, 2021 · 95e000d · 95e000d
1 parent 48694ba
commit 95e000d
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 11 deletions.
diff --git a/frontend/src/components/settings/Payments.js b/frontend/src/components/settings/Payments.js
@@ -128,8 +128,14 @@ export default function Payments({
 
   const removeCard = () => {
     const remaining = user.paymentMethods.filter(method => method.last4 !== "")
+    const subscriptionPayment = user.subscriptions.find(
+      subscription => subscription.paymentMethod.last4 === card.last4
+    )
 
-    if (hasSubscriptionActive && remaining.length === 1) {
+    if (
+      (hasSubscriptionActive && remaining.length === 1) ||
+      subscriptionPayment
+    ) {
       dispatchFeedback(
         setSnackbar({
           status: "error",

diff --git a/frontend/src/components/settings/Subscriptions.js b/frontend/src/components/settings/Subscriptions.js
@@ -1,12 +1,18 @@
 import React, { useState, useEffect, useContext } from "react"
 import axios from "axios"
+import clsx from "clsx"
+import Chip from "@material-ui/core/Chip"
 import Grid from "@material-ui/core/Grid"
+import IconButton from "@material-ui/core/IconButton"
 import Typography from "@material-ui/core/Typography"
 import { makeStyles } from "@material-ui/core/styles"
 
 import SettingsGrid from "./SettingsGrid"
 import QtyButton from "../product-list/QtyButton"
 
+import DeleteIcon from "../../images/Delete"
+import pauseIcon from "../../images/pause.svg"
+
 import { UserContext, FeedbackContext } from "../../contexts"
 import { setSnackbar } from "../../contexts/actions"
 
@@ -18,6 +24,27 @@ const useStyles = makeStyles(theme => ({
     height: "10rem",
     width: "10rem",
   },
+  method: {
+    color: "#fff",
+    textTransform: "uppercase",
+    marginTop: "1rem",
+  },
+  lineHeight: {
+    lineHeight: 1.1,
+  },
+  deleteWrapper: {
+    height: "3rem",
+    width: "2.5rem",
+  },
+  pause: {
+    height: "3rem",
+    width: "3rem",
+  },
+  iconButton: {
+    "&:hover": {
+      backgroundColor: "transparent",
+    },
+  },
 }))
 
 export default function Subscriptions({ setSelectedSetting }) {
@@ -82,13 +109,25 @@ export default function Subscriptions({ setSelectedSetting }) {
       width: 350,
       sortable: false,
       renderCell: ({ value }) => (
-        <Typography variant="body2" classes={{ root: classes.bold }}>
-          {`${value.shippingInfo.name}`}
-          <br />
-          {`${value.shippingAddress.street}`}
-          <br />
-          {`${value.shippingAddress.city}, ${value.shippingAddress.state} ${value.shippingAddress.zip}`}
-        </Typography>
+        <Grid container direction="column">
+          <Grid item>
+            <Typography
+              variant="body2"
+              classes={{ root: clsx(classes.lineHeight, classes.bold) }}
+            >
+              {`${value.shippingInfo.name}`}
+              <br />
+              {`${value.shippingAddress.street}`}
+              <br />
+              {`${value.shippingAddress.city}, ${value.shippingAddress.state} ${value.shippingAddress.zip}`}
+            </Typography>
+          </Grid>
+          <Grid item>
+            <Typography variant="h3" classes={{ root: classes.method }}>
+              {value.paymentMethod.brand} {value.paymentMethod.last4}
+            </Typography>
+          </Grid>
+        </Grid>
       ),
     },
     {
@@ -135,10 +174,55 @@ export default function Subscriptions({ setSelectedSetting }) {
       headerName: "Frequency",
       width: 250,
       sortable: false,
+      renderCell: ({ value }) => (
+        <Chip
+          label={value.split("_").join(" ")}
+          classes={{ label: classes.bold }}
+        />
+      ),
+    },
+    {
+      field: "next_delivery",
+      headerName: "Next Order",
+      width: 250,
+      renderCell: ({ value }) => new Date(value).toLocaleDateString(),
+    },
+    {
+      field: "total",
+      headerName: "Total",
+      width: 250,
+      renderCell: ({ value }) => (
+        <Chip
+          label={`$${value.toFixed(2)}`}
+          classes={{ label: classes.bold }}
+        />
+      ),
+    },
+    {
+      field: "",
+      width: 250,
+      sortable: false,
+      renderCell: () => (
+        <Grid container>
+          <Grid item>
+            <IconButton classes={{ root: classes.iconButton }}>
+              <span className={classes.deleteWrapper}>
+                <DeleteIcon />
+              </span>
+            </IconButton>
+          </Grid>
+          <Grid item>
+            <IconButton classes={{ root: classes.iconButton }}>
+              <img
+                src={pauseIcon}
+                alt="pause subscription"
+                className={classes.pause}
+              />
+            </IconButton>
+          </Grid>
+        </Grid>
+      ),
     },
-    { field: "next_delivery", headerName: "Next Order", width: 250 },
-    { field: "total", headerName: "Total", width: 250 },
-    { field: "", width: 250, sortable: false },
   ]
 
   const rows = createData(subscriptions)