fix: added missing lodash dependency to accounts lib

fix: made the properties table editable even when the receipt printing
is off

fix: change company registration to company number on the
receipt printing page

fix: refetch config after saving

fix: set fixed height for the editable property row

fix: remove debug log

fix: placed the options of the BooleanPropertiesTable in a TableCell to
avoid raising an error caused by having an <svg> inside a <td>

fix: change the receipt options to a switch

fix: copied style instead of importing from other component

new-lamassu-admin/src/components/booleanPropertiesTable/BooleanPropertiesTable.js

@@ -84,28 +84,30 @@ const BooleanPropertiesTable = memo(
                   <TableCell className={classes.leftTableCell}>
                     {element.display}
                   </TableCell>
-                  {editing && (
-                    <RadioGroup
-                      options={radioButtonOptions}
-                      value={element.value}
-                      onChange={event =>
-                        handleRadioButtons(
-                          element.name,
-                          event.target.value === 'true'
-                        )
-                      }
-                      className={classnames(
-                        classes.radioButtons,
-                        classes.rightTableCell
-                      )}
-                    />
-                  )}
-                  {!editing && (
-                    <BooleanCell
-                      className={classes.rightTableCell}
-                      value={element.value}
-                    />
-                  )}
+                  <TableCell className={classes.rightTableCell}>
+                    {editing && (
+                      <RadioGroup
+                        options={radioButtonOptions}
+                        value={element.value}
+                        onChange={event =>
+                          handleRadioButtons(
+                            element.name,
+                            event.target.value === 'true'
+                          )
+                        }
+                        className={classnames(
+                          classes.radioButtons,
+                          classes.rightTableCell
+                        )}
+                      />
+                    )}
+                    {!editing && (
+                      <BooleanCell
+                        className={classes.rightTableCell}
+                        value={element.value}
+                      />
+                    )}
+                  </TableCell>
                 </TableRow>
               ))}
           </TableBody>

new-lamassu-admin/src/components/editableProperty/EditableProperty.styles.js

@@ -1,3 +1,5 @@
+const optionsRowHeigth = 43
+
 const editablePropertyStyles = {
   transparentButton: {
     '& > *': {
@@ -13,7 +15,8 @@ const editablePropertyStyles = {
     display: 'flex',
     alignItems: 'center',
     position: 'relative',
-    flex: 'wrap'
+    flex: 'wrap',
+    height: optionsRowHeigth
   },
   rightAligned: {
     display: 'flex',
@@ -22,7 +25,8 @@ const editablePropertyStyles = {
   },
   radioButtons: {
     display: 'flex',
-    flexDirection: 'row'
+    flexDirection: 'row',
+    height: optionsRowHeigth
   },
   leftSpace: {
     marginLeft: '20px'

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

@@ -1,35 +1,28 @@
-// import { makeStyles } from '@material-ui/core/styles'
 import { useQuery, useMutation } from '@apollo/react-hooks'
+import { makeStyles } from '@material-ui/core/styles'
 import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState, memo } from 'react'
 
 import { BooleanPropertiesTable } from 'src/components/booleanPropertiesTable'
-import { EditableProperty } from 'src/components/editableProperty'
+import { Switch } from 'src/components/inputs'
+import { H4, P, Label2 } from 'src/components/typography'
 import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'
-// import { ActionButton } from 'src/components/buttons'
-// import { ReactComponent as UploadIcon } from 'src/styling/icons/button/upload/zodiac.svg'
-// import { ReactComponent as UploadIconInverse } from 'src/styling/icons/button/upload/white.svg'
-// import { TextInput } from 'src/components/inputs'
 
-// import { mainStyles } from './ReceiptPrinting.styles'
+import { mainStyles } from './ReceiptPrinting.styles'
 
-// const useStyles = makeStyles(mainStyles)
+const useStyles = makeStyles(mainStyles)
 
 const initialValues = {
   active: 'off',
-  // logo: false,
   operatorWebsite: false,
   operatorEmail: false,
   operatorPhone: false,
-  companyRegistration: false,
+  companyNumber: false,
   machineLocation: false,
   customerNameOrPhoneNumber: false,
-  // commission: false,
   exchangeRate: false,
   addressQRCode: false
-  // customText: false,
-  // customTextContent: ''
 }
 
 const GET_CONFIG = gql`
@@ -44,34 +37,12 @@ const SAVE_CONFIG = gql`
   }
 `
 
-const receiptPrintingOptions = [
-  {
-    code: 'off',
-    display: 'Off'
-  },
-  // {
-  //   code: 'optional',
-  //   display: 'Optional (ask user)'
-  // },
-  {
-    code: 'on',
-    display: 'On'
-  }
-]
-
 const ReceiptPrinting = memo(() => {
   const [receiptPrintingConfig, setReceiptPrintingConfig] = useState(null)
 
-  // const classes = useStyles()
+  const classes = useStyles()
 
-  const [saveConfig] = useMutation(SAVE_CONFIG, {
-    onCompleted: configResponse => {
-      return setReceiptPrintingConfig(
-        fromNamespace(namespaces.RECEIPT, configResponse.saveConfig)
-      )
-    }
-  })
-  useQuery(GET_CONFIG, {
+  const { refetch: getReceiptPrintingConfig } = useQuery(GET_CONFIG, {
     onCompleted: configResponse => {
       const response = fromNamespace(namespaces.RECEIPT, configResponse.config)
       const values = R.merge(initialValues, response)
@@ -79,6 +50,16 @@ const ReceiptPrinting = memo(() => {
     }
   })
 
+  const [saveConfig] = useMutation(SAVE_CONFIG, {
+    onCompleted: configResponse => {
+      setReceiptPrintingConfig(
+        fromNamespace(namespaces.RECEIPT, configResponse.saveConfig)
+      )
+
+      getReceiptPrintingConfig()
+    }
+  })
+
   const save = it =>
     saveConfig({
       variables: { config: toNamespace(namespaces.RECEIPT, it) }
@@ -88,47 +69,34 @@ const ReceiptPrinting = memo(() => {
 
   return (
     <>
-      <EditableProperty
-        title={'Receipt options'}
-        prefixText={'Receipt printing'}
-        disabled={false}
-        options={receiptPrintingOptions}
-        code={receiptPrintingConfig.active}
-        save={it =>
-          saveConfig({
-            variables: {
-              config: toNamespace(
-                namespaces.RECEIPT,
-                R.merge(receiptPrintingConfig, { active: it })
-              )
+      <div className={classes.rowWrapper}>
+        <H4>Receipt options</H4>
+      </div>
+      <div className={classes.rowWrapper}>
+        <P>Share information?</P>
+        <div className={classes.switchWrapper}>
+          <Switch
+            checked={receiptPrintingConfig.active}
+            onChange={event =>
+              saveConfig({
+                variables: {
+                  config: toNamespace(
+                    namespaces.RECEIPT,
+                    R.merge(receiptPrintingConfig, {
+                      active: event.target.checked
+                    })
+                  )
+                }
+              })
             }
-          })
-        }
-      />
+          />
+        </div>
+        <Label2>{receiptPrintingConfig.active ? 'Yes' : 'No'}</Label2>
+      </div>
       <BooleanPropertiesTable
         title={'Visible on the receipt (optionals)'}
-        disabled={receiptPrintingConfig.active === 'off'}
         data={receiptPrintingConfig}
         elements={[
-          // {
-          //   name: 'logo',
-          //   display: (
-          //     <>
-          //       {'Logo'}
-          //       <ActionButton
-          //         className={classes.actionButton}
-          //         Icon={UploadIcon}
-          //         InverseIcon={UploadIconInverse}
-          //         color={'primary'}
-          //         onClick={() => {
-          //           // TODO: make the replace logo feature
-          //         }}>
-          //         Replace logo
-          //       </ActionButton>
-          //     </>
-          //   ),
-          //   value: receiptPrintingConfig.logo
-          // },
           {
             name: 'operatorWebsite',
             display: 'Operator website',
@@ -145,9 +113,9 @@ const ReceiptPrinting = memo(() => {
             value: receiptPrintingConfig.operatorPhone
           },
           {
-            name: 'companyRegistration',
-            display: 'Company registration',
-            value: receiptPrintingConfig.companyRegistration
+            name: 'companyNumber',
+            display: 'Company number',
+            value: receiptPrintingConfig.companyNumber
           },
           {
             name: 'machineLocation',
@@ -159,11 +127,6 @@ const ReceiptPrinting = memo(() => {
             display: 'Customer name or phone number (if known)',
             value: receiptPrintingConfig.customerNameOrPhoneNumber
           },
-          // {
-          //   name: 'commission',
-          //   display: 'Commission',
-          //   value: receiptPrintingConfig.commission
-          // },
           {
             name: 'exchangeRate',
             display: 'Exchange rate',
@@ -174,23 +137,9 @@ const ReceiptPrinting = memo(() => {
             display: 'Address QR code',
             value: receiptPrintingConfig.addressQRCode
           }
-          // {
-          //   name: 'customText',
-          //   display: 'Custom text',
-          //   value: receiptPrintingConfig.customText
-          // }
         ]}
         save={save}
       />
-      {/* TODO: textInput should appear only when table is in edit mode, and have it's value saved along with the table values */}
-      {/* <TextInput
-        className={classes.textInput}
-        label={'Custom text content'}
-        multiline
-        rows="4"
-        defaultValue={receiptPrintingConfig.customTextContent}
-      /> */}
-      {/* TODO: add receipt preview on the right side of the page */}
     </>
   )
 })

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

@@ -1,10 +1,13 @@
 const mainStyles = {
-  textInput: {
-    margin: [[28, 20]],
-    width: 304
+  rowWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    position: 'relative',
+    flex: 'wrap'
   },
-  actionButton: {
-    margin: [[0, 24]]
+  switchWrapper: {
+    display: 'flex',
+    marginLeft: 120
   }
 }
 

test/fixtures/new-settings.json

@@ -35,7 +35,7 @@
       "operatorWebsite": true,
       "operatorEmail": false,
       "operatorPhone": false,
-      "companyRegistration": false,
+      "companyNumber": false,
       "machineLocation": true,
       "customerNameOrPhoneNumber": true,
       "exchangeRate": false,
@@ -120,7 +120,7 @@
     "receipt_operatorWebsite": false,
     "receipt_operatorEmail": false,
     "receipt_operatorPhone": false,
-    "receipt_companyRegistration": true,
+    "receipt_companyNumber": true,
     "receipt_machineLocation": false,
     "receipt_customerNameOrPhoneNumber": true,
     "receipt_exchangeRate": false,