Merge pull request #3280 from LiteFarmOrg/LF-3951/show-water-calculat…

…or-with-wild-crops LF-3951: Show water calculator with wild crops
LiteFarmOrg · Aug 16, 2024 · a4535e0 · a4535e0
2 parents 7c2615b + 7302aa6
commit a4535e0
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 12 deletions.
diff --git a/packages/webapp/public/locales/en/translation.json b/packages/webapp/public/locales/en/translation.json
@@ -162,6 +162,7 @@
     "IRRIGATION_VIEW": {
       "BRAND_TOOLTIP": "This task is for watering your location. If you want to install irrigation, create a field work task instead.",
       "CALCULATE_WATER_USAGE": "Calculate Water Usage",
+      "CALCULATE_WATER_USAGE_WARNING": "For wild crops, estimation of water usage by depth is not available.",
       "DEFAULT_APPLICATION_DEPTH": "Set as default application depth for this location",
       "DEFAULT_LOCATION_FLOW_RATE": "Set as default flow rate for this location",
       "DEPTH": "Depth",

diff --git a/packages/webapp/public/locales/es/translation.json b/packages/webapp/public/locales/es/translation.json
@@ -167,6 +167,7 @@
     "IRRIGATION_VIEW": {
       "BRAND_TOOLTIP": "Esta tarea es para regar su ubicación. Si desea instalar riego, cree una tarea de trabajo de campo en su lugar.",
       "CALCULATE_WATER_USAGE": "Calcular el consumo de agua",
+      "CALCULATE_WATER_USAGE_WARNING": "MISSING",
       "DEFAULT_APPLICATION_DEPTH": "Establecer como profundidad de aplicación predeterminada para esta ubicación",
       "DEFAULT_LOCATION_FLOW_RATE": "Establecer como índice de flujo predeterminado para esta ubicación",
       "DEPTH": "Profundidad",

diff --git a/packages/webapp/public/locales/fr/translation.json b/packages/webapp/public/locales/fr/translation.json
@@ -167,6 +167,7 @@
     "IRRIGATION_VIEW": {
       "BRAND_TOOLTIP": "Cette tâche est d'arroser votre emplacement. Pour configuer l'irrigation, créez plutôt une tâche de terrain.",
       "CALCULATE_WATER_USAGE": "Calculer la consommation d'eau",
+      "CALCULATE_WATER_USAGE_WARNING": "MISSING",
       "DEFAULT_APPLICATION_DEPTH": "Sélectionner cette profondeur d'application par défaut pour cet emplacement",
       "DEFAULT_LOCATION_FLOW_RATE": "Sélectionner ce débit par défaut pour cet emplacement",
       "DEPTH": "Profondeur",

diff --git a/packages/webapp/public/locales/pt/translation.json b/packages/webapp/public/locales/pt/translation.json
@@ -167,6 +167,7 @@
     "IRRIGATION_VIEW": {
       "BRAND_TOOLTIP": "Esta tarefa é para regar seu cultivo. Se você deseja instalar a irrigação, crie uma tarefa de trabalho de campo.",
       "CALCULATE_WATER_USAGE": "Calcular uso de água",
+      "CALCULATE_WATER_USAGE_WARNING": "MISSING",
       "DEFAULT_APPLICATION_DEPTH": "Definir como profundidade de aplicação padrão para esta área",
       "DEFAULT_LOCATION_FLOW_RATE": "Definir como vazão padrão para esta área",
       "DEPTH": "Profundidade",

diff --git a/packages/webapp/src/components/Task/PureIrrigationTask/index.jsx b/packages/webapp/src/components/Task/PureIrrigationTask/index.jsx
@@ -5,7 +5,8 @@ import { Controller } from 'react-hook-form';
 import ReactSelect from '../../Form/ReactSelect';
 import Checkbox from '../../Form/Checkbox';
 import RadioGroup from '../../Form/RadioGroup';
-import styles from '../../Typography/typography.module.scss';
+import typographyStyles from '../../Typography/typography.module.scss';
+import styles from './styles.module.scss';
 import Input, { getInputErrors, numberOnKeyDown } from '../../Form/Input';
 import Unit from '../../Form/Unit';
 import { getUnitOptionMap } from '../../../util/convert-units/getUnitOptionMap';
@@ -16,6 +17,7 @@ import { getIrrigationTaskTypes } from '../../../containers/Task/IrrigationTaskT
 import { useDispatch, useSelector } from 'react-redux';
 import { irrigationTaskTypesSliceSelector } from '../../../containers/irrigationTaskTypesSlice';
 import { cropLocationsSelector } from '../../../containers/locationSlice';
+import { BsFillExclamationCircleFill } from 'react-icons/bs';
 
 export default function PureIrrigationTask({
   system,
@@ -199,6 +201,7 @@ export default function PureIrrigationTask({
     !measurement_type ||
     (measurement_type === 'DEPTH' && !location);
 
+  const calculatorLinkIsDisabled = measurement_type === 'DEPTH' && !location;
   return (
     <>
       <Controller
@@ -251,7 +254,7 @@ export default function PureIrrigationTask({
       />
       <div style={{ paddingBlock: '10px' }} />
 
-      <Label className={styles.label} style={{ marginBottom: '24px', fontSize: '16px' }}>
+      <Label className={typographyStyles.label} style={{ marginBottom: '24px', fontSize: '16px' }}>
         {t('ADD_TASK.IRRIGATION_VIEW.HOW_DO_YOU_MEASURE_WATER_USE_FOR_THIS_IRRIGATION_TYPE')}
       </Label>
 
@@ -303,16 +306,42 @@ export default function PureIrrigationTask({
         onKeyDown={numberOnKeyDown}
         onChangeUnitOption={() => setEstimatedWaterUsageComputed(true)}
       />
-      {!disabled && (
-        <>
-          <Label style={{ marginTop: '4px', marginBottom: `${disabled ? 36 : 0}px` }}>
-            {t('ADD_TASK.IRRIGATION_VIEW.NOT_SURE')}{' '}
-            <Underlined onClick={() => !disabled && setShowWaterUseCalculatorModal(true)}>
-              {t('ADD_TASK.IRRIGATION_VIEW.CALCULATE_WATER_USAGE')}
-            </Underlined>
-          </Label>
-        </>
-      )}
+      {!disabled &&
+        (!calculatorLinkIsDisabled ? (
+          <>
+            <Label style={{ marginTop: '4px', marginBottom: `${disabled ? 36 : 0}px` }}>
+              {t('ADD_TASK.IRRIGATION_VIEW.NOT_SURE')}{' '}
+              <Underlined onClick={() => !disabled && setShowWaterUseCalculatorModal(true)}>
+                {t('ADD_TASK.IRRIGATION_VIEW.CALCULATE_WATER_USAGE')}
+              </Underlined>
+            </Label>
+          </>
+        ) : (
+          <>
+            <div className={styles.waterCalculatorWrapper}>
+              <Label
+                style={{
+                  marginBottom: `${disabled ? 36 : 0}px`,
+                  color: 'var(--Colors-Neutral-Neutral-300)',
+                }}
+              >
+                {t('ADD_TASK.IRRIGATION_VIEW.NOT_SURE')}{' '}
+                {t('ADD_TASK.IRRIGATION_VIEW.CALCULATE_WATER_USAGE')}
+              </Label>
+              <div className={styles.waterCalculatorWarningWrapper}>
+                <BsFillExclamationCircleFill />
+                <Label
+                  style={{
+                    marginBottom: `${disabled ? 36 : 0}px`,
+                    color: 'var(--Colors-Accent---singles-Red-full)',
+                  }}
+                >
+                  {t('ADD_TASK.IRRIGATION_VIEW.CALCULATE_WATER_USAGE_WARNING')}
+                </Label>
+              </div>
+            </div>
+          </>
+        ))}
 
       {!waterCalculatorDisabled && (
         <WaterUsageCalculatorModal

diff --git a/packages/webapp/src/components/Task/PureIrrigationTask/styles.module.scss b/packages/webapp/src/components/Task/PureIrrigationTask/styles.module.scss
@@ -0,0 +1,33 @@
+/*
+ *  Copyright 2024 LiteFarm.org
+ *  This file is part of LiteFarm.
+ *
+ *  LiteFarm is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  LiteFarm is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
+ */
+
+@import '../../../assets/mixin.scss';
+
+.waterCalculatorWrapper {
+  display: flex;
+  gap: 10px;
+  margin-top: 4px;
+
+  @include md-breakpoint {
+    flex-direction: column;
+  }
+}
+
+.waterCalculatorWarningWrapper {
+  color: var(--Colors-Accent---singles-Red-full);
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}