feat(link-transfer): add request ownership button to directory table (#…

…2179)
opengovsg · Mar 15, 2023 · 1a4f22f · 1a4f22f
1 parent 94cad4c
commit 1a4f22f
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 20 deletions.
diff --git a/src/client/directory/components/DirectoryResults/DirectoryTable/DirectoryTableRow/index.tsx b/src/client/directory/components/DirectoryResults/DirectoryTable/DirectoryTableRow/index.tsx
@@ -3,6 +3,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import copy from 'copy-to-clipboard'
 import {
   Hidden,
+  Link,
   TableCell,
   TableRow,
   Typography,
@@ -12,6 +13,7 @@ import {
   useTheme,
 } from '@material-ui/core'
 import personIcon from '@assets/components/directory/directory-results/person-icon.svg'
+import i18next from 'i18next'
 import { UrlTypePublic } from '../../../../reducers/types'
 import useAppMargins from '../../../../../app/components/AppMargins/appMargins'
 import { SetSuccessMessageAction } from '../../../../../app/components/pages/RootPage/actions/types'
@@ -46,7 +48,6 @@ const useStyles = makeStyles((theme) =>
       [theme.breakpoints.up('md')]: {
         width: '40%',
         paddingTop: theme.spacing(7.5),
-        paddingRight: () => '10%',
         marginLeft: () => 0,
       },
     },
@@ -87,6 +88,9 @@ const useStyles = makeStyles((theme) =>
         textDecoration: 'underline',
       },
     },
+    requestOwnershipText: {
+      color: 'inherit',
+    },
     domainTextInactive: {
       color: '#BBBBBB',
       [theme.breakpoints.up('md')]: {
@@ -104,10 +108,6 @@ const useStyles = makeStyles((theme) =>
         width: 'calc(100% - 32px)',
       },
     },
-    urlInformationCell: {
-      width: '100%',
-      marginRight: 0,
-    },
     contactEmailCell: {
       display: 'inline-flex',
       margin: 0,
@@ -123,21 +123,35 @@ const useStyles = makeStyles((theme) =>
         flexDirection: 'column',
       },
     },
-    IconCell: {
+    requestOwnershipCell: {
+      display: 'inline-flex',
+      margin: 0,
+      width: '100%',
+      border: 'none',
+      paddingLeft: (props: DirectoryTableRowStyleProps) => props.appMargins,
+      paddingBottom: theme.spacing(4),
+      [theme.breakpoints.up('md')]: {
+        paddingTop: theme.spacing(7.5),
+        paddingBottom: theme.spacing(0.5),
+        paddingLeft: () => 0,
+        width: 'fit-content',
+        flexDirection: 'column',
+      },
+    },
+    linkIconCell: {
       display: 'inline-flex',
       verticalAlign: 'middle',
       [theme.breakpoints.up('md')]: {
         paddingRight: theme.spacing(1.5),
         marginLeft: (props: DirectoryTableRowStyleProps) => props.appMargins,
       },
     },
-    mailIconCell: {
+    personIconCell: {
+      display: 'inline-flex',
+      verticalAlign: 'middle',
       [theme.breakpoints.up('md')]: {
-        paddingTop: theme.spacing(5.0),
-        paddingLeft: 0,
-        paddingRight: theme.spacing(1),
-        marginLeft: 0,
-        marginRight: 0,
+        paddingRight: theme.spacing(1.5),
+        marginLeft: theme.spacing(4),
       },
     },
     personIcon: {
@@ -154,7 +168,7 @@ const useStyles = makeStyles((theme) =>
     stateCell: {
       [theme.breakpoints.up('md')]: {
         paddingTop: theme.spacing(7.5),
-        minWidth: '100px',
+        minWidth: '75px',
       },
       [theme.breakpoints.down('sm')]: {
         display: 'inline-flex',
@@ -219,6 +233,20 @@ const DirectoryTableRow: FunctionComponent<DirectoryTableRowProps> = ({
     }
   }
 
+  const onClickRequestOwnership = (
+    e: React.MouseEvent<HTMLSpanElement, MouseEvent>,
+  ) => {
+    GAEvent(
+      'directory result',
+      `${query}`,
+      'request ownership',
+      parseInt(`${index}`, 10),
+    )
+    if (!isMobileView) {
+      e.stopPropagation()
+    }
+  }
+
   return (
     <TableRow
       className={classes.tableRow}
@@ -227,7 +255,7 @@ const DirectoryTableRow: FunctionComponent<DirectoryTableRowProps> = ({
     >
       <TableCell className={classes.shortLinkCell} key="shortUrlCell">
         <Typography variant="body2" className={classes.shortLinkText}>
-          <div className={classes.IconCell}>
+          <div className={classes.linkIconCell}>
             {url?.isFile ? (
               <DirectoryFileIcon
                 color={
@@ -284,7 +312,7 @@ const DirectoryTableRow: FunctionComponent<DirectoryTableRowProps> = ({
           className={classes.emailText}
           onClick={(e) => onClickEmail(e)}
         >
-          <div className={classes.IconCell}>
+          <div className={classes.personIconCell}>
             <img
               className={classes.personIcon}
               src={personIcon}
@@ -294,6 +322,24 @@ const DirectoryTableRow: FunctionComponent<DirectoryTableRowProps> = ({
           {String(url.email)}
         </Typography>
       </TableCell>
+
+      <Hidden smDown>
+        <TableCell
+          className={classes.requestOwnershipCell}
+          key="requestOwnershipCell"
+        >
+          <Link
+            variant="body2"
+            className={classes.requestOwnershipText}
+            onClick={(e) => onClickRequestOwnership(e)}
+            href={i18next.t('general.links.contact')}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Request ownership
+          </Link>
+        </TableCell>
+      </Hidden>
     </TableRow>
   )
 }

diff --git a/src/client/directory/components/DirectoryResults/MobilePanel/index.tsx b/src/client/directory/components/DirectoryResults/MobilePanel/index.tsx
@@ -2,6 +2,7 @@ import React, { FunctionComponent } from 'react'
 import copy from 'copy-to-clipboard'
 import { useDispatch } from 'react-redux'
 import {
+  Button,
   Divider,
   Drawer,
   Paper,
@@ -11,6 +12,7 @@ import {
 } from '@material-ui/core'
 import personIcon from '@assets/components/directory/directory-results/person-icon.svg'
 import copyEmailIcon from '@assets/components/directory/directory-results/copy-email-icon.svg'
+import i18next from 'i18next'
 import { SetSuccessMessageAction } from '../../../../app/components/pages/RootPage/actions/types'
 import rootActions from '../../../../app/components/pages/RootPage/actions'
 import useAppMargins from '../../../../app/components/AppMargins/appMargins'
@@ -45,11 +47,14 @@ const useStyles = makeStyles((theme) =>
       right: '10%',
     },
     row: {
-      padding: theme.spacing(3),
+      paddingTop: theme.spacing(1.5),
+      paddingBottom: theme.spacing(1.5),
+      paddingLeft: theme.spacing(3),
+      paddingRight: theme.spacing(3),
     },
     divider: {
-      marginTop: theme.spacing(3),
-      marginBottom: theme.spacing(3),
+      marginTop: theme.spacing(2),
+      marginBottom: theme.spacing(2),
     },
     shortUrlRow: {
       display: 'box',
@@ -92,7 +97,7 @@ const MobilePanel: FunctionComponent<MobilePanelProps> = ({
   const classes = useStyles({ appMargins })
   const dispatch = useDispatch()
 
-  const onClickEvent = () => {
+  const onCopyEmail = () => {
     copy(url.email)
     dispatch<SetSuccessMessageAction>(
       rootActions.setSuccessMessage('Email has been copied'),
@@ -190,11 +195,21 @@ const MobilePanel: FunctionComponent<MobilePanelProps> = ({
           <input
             type="image"
             src={copyEmailIcon}
-            onClick={() => onClickEvent()}
+            onClick={onCopyEmail}
             className={classes.copyIcon}
             alt="email icon"
           />
         </Typography>
+        <Divider className={classes.divider} />
+        <Typography className={classes.row} variant="body2">
+          <Button
+            href={i18next.t('general.links.contact')}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Request ownership
+          </Button>
+        </Typography>
       </Paper>
     </Drawer>
   )