Merge pull request #222 from cozy/refactor/make-the-permission-dialog…

…-reusable Make the permission dialog reusable
cozy · Oct 20, 2022 · a9eb032 · a9eb032
2 parents f11f64b + b3a2081
commit a9eb032
Show file tree

Hide file tree

Showing 11 changed files with 179 additions and 82 deletions.
diff --git a/src/components/DaccBanner/DaccBanner.jsx → ...ents/DaccBanner/CO2EmissionDaccBanner.jsx b/src/components/DaccBanner/DaccBanner.jsx → ...ents/DaccBanner/CO2EmissionDaccBanner.jsx
@@ -1,12 +1,13 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 import Banner from 'cozy-ui/transpiled/react/Banner'
 import Button from 'cozy-ui/transpiled/react/Buttons'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import LightbulbIcon from 'cozy-ui/transpiled/react/Icons/Lightbulb'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 
-const DaccBanner = ({ onDiscard, onAccept }) => {
+const CO2EmissionDaccBanner = ({ onDiscard, onAccept }) => {
   const { t } = useI18n()
 
   return (
@@ -41,4 +42,9 @@ const DaccBanner = ({ onDiscard, onAccept }) => {
   )
 }
 
-export default DaccBanner
+CO2EmissionDaccBanner.propTypes = {
+  onDiscard: PropTypes.func.isRequired,
+  onAccept: PropTypes.func.isRequired
+}
+
+export default CO2EmissionDaccBanner
diff --git a/src/components/DaccManager/BikeGoalDaccManager.jsx b/src/components/DaccManager/BikeGoalDaccManager.jsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+
+import DaccManager from 'src/components/DaccManager/DaccManager'
+
+const BikeGoalDaccManager = ({ onClose, onRefuse, onAccept }) => {
+  const { t } = useI18n()
+
+  return (
+    <DaccManager
+      onClose={onClose}
+      onRefuse={onRefuse}
+      onAccept={onAccept}
+      componentProps={{
+        DaccPermissionsDialog: {
+          sharedDataLabel: t(
+            'dacc.permissionsDialog.anonymized_bikegoal_progression'
+          )
+        }
+      }}
+    />
+  )
+}
+
+BikeGoalDaccManager.propTypes = {
+  onClose: PropTypes.func.isRequired,
+  onRefuse: PropTypes.func.isRequired,
+  onAccept: PropTypes.func.isRequired
+}
+
+export default BikeGoalDaccManager
diff --git a/...ponents/DaccManager/DaccCompareDialog.jsx → ...cManager/CO2EmissionDaccCompareDialog.jsx b/...ponents/DaccManager/DaccCompareDialog.jsx → ...cManager/CO2EmissionDaccCompareDialog.jsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 import { ConfirmDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 import Button from 'cozy-ui/transpiled/react/Buttons'
@@ -8,7 +9,11 @@ import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 
 import DaccCompareSVG from 'src/assets/icons/dacc-compare.svg'
 
-const DaccDialogsManager = ({ open, onClose, showDaccPermissionsDialog }) => {
+const CO2EmissionDaccCompareDialog = ({
+  open,
+  onClose,
+  showDaccPermissionsDialog
+}) => {
   const { t } = useI18n()
 
   return (
@@ -42,4 +47,10 @@ const DaccDialogsManager = ({ open, onClose, showDaccPermissionsDialog }) => {
   )
 }
 
-export default DaccDialogsManager
+CO2EmissionDaccCompareDialog.propTypes = {
+  open: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  showDaccPermissionsDialog: PropTypes.func.isRequired
+}
+
+export default CO2EmissionDaccCompareDialog
diff --git a/src/components/DaccManager/CO2EmissionDaccManager.jsx b/src/components/DaccManager/CO2EmissionDaccManager.jsx
@@ -0,0 +1,78 @@
+import React, { useState } from 'react'
+
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+
+import useSettings from 'src/hooks/useSettings'
+import CO2EmissionDaccBanner from 'src/components/DaccBanner/CO2EmissionDaccBanner'
+import CO2EmissionDaccCompareDialog from 'src/components/DaccManager/CO2EmissionDaccCompareDialog'
+import DaccManager from 'src/components/DaccManager/DaccManager'
+
+const CO2EmissionDaccManager = () => {
+  const { t } = useI18n()
+  const [showCompareDialog, setShowCompareDialog] = useState(false)
+  const [showPermissionsDialog, setShowPermissionsDialog] = useState(false)
+  const {
+    isLoading,
+    value: CO2Emission = {},
+    save: setCO2Emission
+  } = useSettings('CO2Emission')
+
+  if (isLoading) {
+    return null
+  }
+
+  const { showAlert = true, sendToDacc = false } = CO2Emission
+
+  const handleOnDiscard = () => {
+    setCO2Emission({
+      ...CO2Emission,
+      showAlert: false
+    })
+  }
+
+  const handleOnAccept = () => {
+    setCO2Emission({
+      ...CO2Emission,
+      showAlert: false,
+      sendToDACC: true
+    })
+  }
+
+  return (
+    <>
+      {showAlert && !sendToDacc && (
+        <CO2EmissionDaccBanner
+          onDiscard={handleOnDiscard}
+          onAccept={() => setShowCompareDialog(true)}
+        />
+      )}
+      <CO2EmissionDaccCompareDialog
+        open={showCompareDialog}
+        onClose={() => setShowCompareDialog(false)}
+        showDaccPermissionsDialog={() => {
+          setShowCompareDialog(false)
+          setShowPermissionsDialog(true)
+        }}
+      />
+      {showPermissionsDialog && (
+        <DaccManager
+          onClose={() => setShowPermissionsDialog(false)}
+          onRefuse={() => setShowPermissionsDialog(false)}
+          onAccept={() => {
+            handleOnAccept()
+            setShowPermissionsDialog(false)
+          }}
+          componentProps={{
+            DaccPermissionsDialog: {
+              sharedDataLabel: t('dacc.permissionsDialog.anonymized_emissions')
+            }
+          }}
+        />
+      )}
+    </>
+  )
+}
+
+CO2EmissionDaccManager.propTypes = {}
+
+export default CO2EmissionDaccManager
diff --git a/...omponents/DaccManager/DaccManager.spec.js → ...accManager/CO2EmissionDaccManager.spec.js b/...omponents/DaccManager/DaccManager.spec.js → ...accManager/CO2EmissionDaccManager.spec.js
@@ -4,7 +4,7 @@ import { render, fireEvent } from '@testing-library/react'
 import { useQuery } from 'cozy-client'
 
 import AppLike from 'test/AppLike'
-import DaccManager from 'src/components/DaccManager/DaccManager'
+import CO2EmissionDaccManager from 'src/components/DaccManager/CO2EmissionDaccManager'
 
 jest.mock('cozy-client/dist/hooks/useQuery', () => jest.fn())
 
@@ -22,7 +22,7 @@ const setup = ({
 
   return render(
     <AppLike>
-      <DaccManager />
+      <CO2EmissionDaccManager />
     </AppLike>
   )
 }

diff --git a/src/components/DaccManager/DaccManager.jsx b/src/components/DaccManager/DaccManager.jsx
@@ -1,89 +1,38 @@
 import React, { useState } from 'react'
+import PropTypes from 'prop-types'
 
-import { isQueryLoading, useClient, useQuery } from 'cozy-client'
-
-import { SETTINGS_DOCTYPE } from 'src/doctypes'
-import { buildSettingsQuery } from 'src/queries/queries'
-import DaccBanner from 'src/components/DaccBanner/DaccBanner'
-import DaccCompareDialog from 'src/components/DaccManager/DaccCompareDialog'
 import DaccPermissionsDialog from 'src/components/DaccManager/DaccPermissionsDialog'
 import DaccReasonsDialog from 'src/components/DaccManager/DaccReasonsDialog'
 
-const DaccManager = () => {
-  const [showCompareDialog, setShowCompareDialog] = useState(false)
-  const [showPermissionsDialog, setShowPermissionsDialog] = useState(false)
+const DaccManager = ({ onClose, onRefuse, onAccept, componentProps }) => {
   const [showReasonsDialog, setShowReasonsDialog] = useState(false)
-  const client = useClient()
-  const settingsQuery = buildSettingsQuery()
-  const { data: settings, ...settingsQueryLeft } = useQuery(
-    settingsQuery.definition,
-    settingsQuery.options
-  )
-
-  const isLoading = isQueryLoading(settingsQueryLeft)
-
-  if (isLoading) {
-    return null
-  }
-
-  const CO2Emission = settings[0]?.CO2Emission || {}
-
-  const { showAlert = true, sendToDacc = false } = CO2Emission
-
-  const handleOnDiscard = () => {
-    client.save({
-      ...settings[0],
-      _type: SETTINGS_DOCTYPE,
-      CO2Emission: {
-        ...CO2Emission,
-        showAlert: false
-      }
-    })
-  }
-
-  const handleOnAccept = () => {
-    client.save({
-      ...settings[0],
-      _type: SETTINGS_DOCTYPE,
-      CO2Emission: {
-        ...CO2Emission,
-        showAlert: false,
-        sendToDACC: true
-      }
-    })
-  }
 
   return (
     <>
-      {showAlert && !sendToDacc && (
-        <DaccBanner
-          onDiscard={handleOnDiscard}
-          onAccept={() => setShowCompareDialog(true)}
-        />
-      )}
-      <DaccCompareDialog
-        open={showCompareDialog}
-        onClose={() => setShowCompareDialog(false)}
-        showDaccPermissionsDialog={() => {
-          setShowCompareDialog(false)
-          setShowPermissionsDialog(true)
-        }}
-      />
       <DaccPermissionsDialog
-        open={showPermissionsDialog}
-        onClose={() => setShowPermissionsDialog(false)}
-        onAccept={() => {
-          handleOnAccept()
-          setShowPermissionsDialog(false)
-        }}
+        open
+        onClose={onClose}
+        onRefuse={onRefuse}
+        onAccept={onAccept}
         showDaccReasonsDialog={() => setShowReasonsDialog(true)}
+        {...componentProps.DaccPermissionsDialog}
       />
-      <DaccReasonsDialog
-        open={showReasonsDialog}
-        onClose={() => setShowReasonsDialog(false)}
-      />
+      {showReasonsDialog && (
+        <DaccReasonsDialog open onClose={() => setShowReasonsDialog(false)} />
+      )}
     </>
   )
 }
 
+DaccManager.propTypes = {
+  onClose: PropTypes.func.isRequired,
+  onRefuse: PropTypes.func.isRequired,
+  onAccept: PropTypes.func.isRequired,
+  componentProps: PropTypes.shape({
+    DaccPermissionsDialog: PropTypes.shape({
+      sharedDataLabel: PropTypes.string.isRequired
+    }).isRequired
+  }).isRequired
+}
+
 export default DaccManager
diff --git a/src/components/DaccManager/DaccPermissionsDialog.jsx b/src/components/DaccManager/DaccPermissionsDialog.jsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 import { ConfirmDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 import Button from 'cozy-ui/transpiled/react/Buttons'
@@ -17,8 +18,10 @@ import AnonymousIcon from 'src/assets/icons/icon-anonymous.svg'
 import ExportIcon from 'src/assets/icons/icon-export.svg'
 
 const DaccPermissionsDialog = ({
+  sharedDataLabel,
   open,
   onClose,
+  onRefuse,
   onAccept,
   showDaccReasonsDialog
 }) => {
@@ -60,7 +63,7 @@ const DaccPermissionsDialog = ({
                     <ListItemText
                       primary={
                         <Typography variant="body2">
-                          {t('dacc.permissionsDialog.anonymized_emissions')}
+                          {sharedDataLabel}
                         </Typography>
                       }
                     />
@@ -89,7 +92,7 @@ const DaccPermissionsDialog = ({
           <>
             <Button
               label={t('dacc.permissionsDialog.refuse')}
-              onClick={onClose}
+              onClick={onRefuse}
             />
             <Button
               label={t('dacc.permissionsDialog.accept')}
@@ -102,4 +105,13 @@ const DaccPermissionsDialog = ({
   )
 }
 
+DaccPermissionsDialog.propTypes = {
+  sharedDataLabel: PropTypes.string.isRequired,
+  open: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onRefuse: PropTypes.func.isRequired,
+  onAccept: PropTypes.func.isRequired,
+  showDaccReasonsDialog: PropTypes.func.isRequired
+}
+
 export default DaccPermissionsDialog
diff --git a/src/components/DaccManager/DaccReasonsDialog.jsx b/src/components/DaccManager/DaccReasonsDialog.jsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 import { ConfirmDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
@@ -16,4 +17,9 @@ const DaccReasonsDialog = ({ open, onClose }) => {
   )
 }
 
+DaccReasonsDialog.propTypes = {
+  open: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired
+}
+
 export default DaccReasonsDialog
diff --git a/src/components/Views/Trips.jsx b/src/components/Views/Trips.jsx
@@ -17,7 +17,7 @@ import {
 } from 'src/components/Providers/AccountProvider'
 import SpinnerOrEmptyContent from 'src/components/SpinnerOrEmptyContent'
 import CO2EmissionsChart from 'src/components/CO2EmissionsChart/CO2EmissionsChart'
-import DaccManager from 'src/components/DaccManager/DaccManager'
+import CO2EmissionDaccManager from 'src/components/DaccManager/CO2EmissionDaccManager'
 import BikeGoalManager from 'src/components/Goals/BikeGoal/BikeGoalManager'
 
 const style = {
@@ -80,7 +80,7 @@ export const Trips = () => {
       )}
       {flag('coachco2.bikegoal.enabled') && <BikeGoalManager />}
       <CO2EmissionsChart />
-      <DaccManager />
+      <CO2EmissionDaccManager />
       {isMobile && <Divider style={style.divider} />}
       <TripsList timeseries={timeseries} />
       {timeseriesQueryLeft.hasMore && (

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -139,6 +139,7 @@
       "why_asking": "Why ask me for these permissions?",
       "export_outside": "Exporting out of Cozy",
       "anonymized_emissions": "My anonymized CO2 emissions",
+      "anonymized_bikegoal_progression": "My anonymized progression",
       "accept": "Always allow",
       "refuse": "Refuse"
     },

diff --git a/src/locales/fr.json b/src/locales/fr.json
@@ -139,6 +139,7 @@
       "why_asking": "Pourquoi me demander ces permissions ?",
       "export_outside": "Exporter hors du Cozy",
       "anonymized_emissions": "Mes émissions de CO2 anonymisées",
+      "anonymized_bikegoal_progression": "Ma progression de façon anonyme",
       "accept": "Toujours autoriser",
       "refuse": "Refuser"
     },