feat: Prevent leaving the page without saving (#431)

* fix: make all fields required on the Terms & Conditions page if Show on
screen is enabled

fix: enable/disable the Terms & Conditions form based on the Show on
screen toggle

fix: replaced deactivated field with plain text when not editing

fix: make de non editable text content field scrollable

style: make it follow the same style as the other screens, with the edit
button and links to save and cancel

feat: created Prompt component to avoid leaving pages without saving

feat: applied component to the editable table

feat: applied component to the Cashout, Commissions, Locales, Cashboxes,
Notifications, CryptoBalanceOverrides and Wallet pages

feat: applied component to the ContactInfo and ReceiptPrinting pages

refactor: export the default prompt message to be used in other contexts

fix: applied prompt component to the Operator Info pages

fix: create routes for the operator info components

feat: applied the Prompt component to the Contact Info and Receipt pages

feat: applied the Prompt component to the Terms & Conditions page

* refactor: move prompt to components

* feat: use formik on the boolean properties table

* chore: removed console.logs

chore: removed comments

refactor: moved BooleanCell to the BooleanPropertiesTable file and make
it not a formik field

new-lamassu-admin/src/pages/OperatorInfo/OperatorInfo.js

@@ -1,6 +1,13 @@
 import { makeStyles } from '@material-ui/core'
 import Grid from '@material-ui/core/Grid'
-import React, { useState } from 'react'
+import React from 'react'
+import {
+  Route,
+  Switch,
+  Redirect,
+  useLocation,
+  useHistory
+} from 'react-router-dom'
 
 import Sidebar from 'src/components/layout/Sidebar'
 import TitleSection from 'src/components/layout/TitleSection'
@@ -24,34 +31,66 @@ const styles = {
 
 const useStyles = makeStyles(styles)
 
-const CONTACT_INFORMATION = 'Contact information'
-const RECEIPT = 'Receipt'
-const COIN_ATM_RADAR = 'Coin ATM Radar'
-const TERMS_CONDITIONS = 'Terms & Conditions'
+const innerRoutes = [
+  {
+    label: 'Contact information',
+    route: '/settings/operator-info/contact-info',
+    component: ContactInfo
+  },
+  {
+    label: 'Receipt',
+    route: '/settings/operator-info/receipt-printing',
+    component: ReceiptPrinting
+  },
+  {
+    label: 'Coin ATM Radar',
+    route: '/settings/operator-info/coin-atm-radar',
+    component: CoinAtmRadar
+  },
+  {
+    label: 'Terms & Conditions',
+    route: '/settings/operator-info/terms-conditions',
+    component: TermsConditions
+  }
+]
 
-const pages = [CONTACT_INFORMATION, RECEIPT, COIN_ATM_RADAR, TERMS_CONDITIONS]
+const Routes = () => (
+  <Switch>
+    <Redirect
+      exact
+      from="/settings/operator-info"
+      to="/settings/operator-info/contact-info"
+    />
+    <Route exact path="/" />
+    {innerRoutes.map(({ route, component: Page, key }) => (
+      <Route path={route} key={key}>
+        <Page name={key} />
+      </Route>
+    ))}
+  </Switch>
+)
 
 const OperatorInfo = () => {
-  const [selected, setSelected] = useState(CONTACT_INFORMATION)
   const classes = useStyles()
+  const history = useHistory()
+  const location = useLocation()
 
-  const isSelected = it => selected === it
+  const isSelected = it => location.pathname === it.route
+
+  const onClick = it => history.push(it.route)
 
   return (
     <>
       <TitleSection title="Operator information"></TitleSection>
       <Grid container className={classes.grid}>
         <Sidebar
-          data={pages}
+          data={innerRoutes}
           isSelected={isSelected}
-          displayName={it => it}
-          onClick={it => setSelected(it)}
+          displayName={it => it.label}
+          onClick={onClick}
         />
         <div className={classes.content}>
-          {isSelected(CONTACT_INFORMATION) && <ContactInfo />}
-          {isSelected(RECEIPT) && <ReceiptPrinting />}
-          {isSelected(TERMS_CONDITIONS) && <TermsConditions />}
-          {isSelected(COIN_ATM_RADAR) && <CoinAtmRadar />}
+          <Routes />
         </div>
       </Grid>
     </>