feat: add subscription cancel dialog

app/javascript/bundles/User/components/SubscriptionCancel.jsx

@@ -0,0 +1,72 @@
+import React, { useState } from 'react'
+import Button from '@material-ui/core/Button'
+import Dialog from '@material-ui/core/Dialog'
+import DialogActions from '@material-ui/core/DialogActions'
+import DialogContent from '@material-ui/core/DialogContent'
+import DialogContentText from '@material-ui/core/DialogContentText'
+import DialogTitle from '@material-ui/core/DialogTitle'
+
+const SUBSCRIPTION_CANCEL_URL = userID => `/users/${userID}/subscription`
+
+function SubscriptionCancelView ({ user, subscription }) {
+  const [open, setOpen] = useState(false)
+
+  const handleClickOpen = () => {
+    setOpen(true)
+  }
+
+  const handleClose = () => {
+    setOpen(false)
+  }
+
+  const handleSubscriptionCancellation = async () => {
+    await fetch(SUBSCRIPTION_CANCEL_URL(user.id), {
+      method: 'delete'
+    })
+
+    handleClose()
+  }
+
+  if (!subscription.active) {
+    return null
+  }
+
+  return (
+    <div>
+      <Button color='secondary' onClick={handleClickOpen}>
+        Cancel Subscription
+      </Button>
+      <Dialog
+        open={open}
+        onClose={handleClose}
+        id='cancel-subscription-dialog'
+        aria-labelledby='cancel-subscription-title'
+        aria-describedby='cancel-subscription-description'
+      >
+        <DialogTitle id='cancel-subscription-title'>
+          Do you want to terminate your current subscription?
+        </DialogTitle>
+        <DialogContent>
+          <DialogContentText id='cancel-subscription-description'>
+            Terminating your subscription will stop your current plan and the
+            benefits you receive from it.
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose} color='primary'>
+            Close
+          </Button>
+          <Button
+            onClick={handleSubscriptionCancellation}
+            color='primary'
+            autoFocus
+          >
+            Cancel Subscription
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </div>
+  )
+}
+
+export const SubscriptionCancel = props => <SubscriptionCancelView {...props} />

app/javascript/bundles/User/components/UserShow.jsx

@@ -16,24 +16,25 @@ function UserShowView ({ user, subscription, streak }) {
   const classes = useStyles()
 
   return (
-    <Paper className={classes.root}>
-      <h3>Contact Data</h3>
-      <p>
-        <strong>Name:</strong>
-      </p>
-      <p>{user.name}</p>
-
-      <p>
-        <strong>Email:</strong>
-      </p>
-      <p>{user.email}</p>
-
-      {subscription && streak && (
+    <>
+      {subscription && subscription.active && streak && (
         <p className='notice--subscription'>
           You have been subscribed for {streak}
         </p>
       )}
-    </Paper>
+      <Paper className={classes.root}>
+        <h3>Contact Data</h3>
+        <p>
+          <strong>Name:</strong>
+        </p>
+        <p>{user.name}</p>
+
+        <p>
+          <strong>Email:</strong>
+        </p>
+        <p>{user.email}</p>
+      </Paper>
+    </>
   )
 }
 

app/javascript/packs/user-bundle.js

@@ -2,8 +2,10 @@ import ReactOnRails from 'react-on-rails'
 
 import { UserShow } from '../bundles/User/components/UserShow'
 import { DonationsHistory } from '../bundles/User/components/DonationsHistory'
+import { SubscriptionCancel } from '../bundles/User/components/SubscriptionCancel'
 
 ReactOnRails.register({
   UserShow,
-  DonationsHistory
+  DonationsHistory,
+  SubscriptionCancel
 })

app/views/users/show.html.erb

@@ -3,4 +3,5 @@
 
   <%= react_component("UserShow", props: {user: @user, streak: @user.current_streak, subscription: @user.subscription}) %>
   <%= react_component("DonationsHistory", props: {activePlan: @user.subscription&.plan, donations: @user.donations}) %>
+  <%= react_component("SubscriptionCancel", props: {user: @user, subscription: @user.subscription}) %>
 </section>