fix: rework soil cracks page helper text (#2425)

* fix: rework soil cracks page helper text * fix: add missing description string
techmatters · Nov 12, 2024 · 26505a8 · 26505a8
1 parent e995fac
commit 26505a8
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 4 deletions.
diff --git a/dev-client/src/screens/SoilScreen/components/SoilSurfaceScreen.tsx b/dev-client/src/screens/SoilScreen/components/SoilSurfaceScreen.tsx
@@ -15,7 +15,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 import {useCallback, useMemo} from 'react';
-import {useTranslation} from 'react-i18next';
+import {Trans, useTranslation} from 'react-i18next';
 import {Image} from 'react-native';
 
 import {
@@ -30,6 +30,7 @@ import {
   Column,
   Heading,
   Paragraph,
+  Text,
 } from 'terraso-mobile-client/components/NativeBaseAdapters';
 import {RestrictBySiteRole} from 'terraso-mobile-client/components/RestrictByRole';
 import {SiteRoleContextProvider} from 'terraso-mobile-client/context/SiteRoleContext';
@@ -87,9 +88,37 @@ export const SoilSurfaceScreen = ({siteId}: Props) => {
           />
           <Box height="lg" />
 
+          <Paragraph>{t('soil.vertical_cracking.description')}</Paragraph>
+
+          <Paragraph>
+            <Trans
+              i18nKey="soil.vertical_cracking.no_cracks"
+              components={{
+                bold: <Text bold />,
+              }}
+            />
+          </Paragraph>
+
           <Paragraph>
-            {t('soil.vertical_cracking.description', {units: 'METRIC'})}
+            <Trans
+              i18nKey="soil.vertical_cracking.surface_cracks"
+              values={{units: 'METRIC'}}
+              components={{
+                bold: <Text bold />,
+              }}
+            />
           </Paragraph>
+
+          <Paragraph>
+            <Trans
+              i18nKey="soil.vertical_cracking.deep_vertical_cracks"
+              values={{units: 'METRIC'}}
+              components={{
+                bold: <Text bold />,
+              }}
+            />
+          </Paragraph>
+
           <Box width="100%" alignItems="center">
             <Image
               source={require('terraso-mobile-client/assets/surface/vertical-cracking.png')}

diff --git a/dev-client/src/translations/en.json b/dev-client/src/translations/en.json
@@ -585,7 +585,10 @@
             "soilTexture": "Includes texture class and rock fragment volume"
         },
         "vertical_cracking": {
-            "description": "Vertical cracks may appear on the soil surface when some soils experience changes in moisture or temperature. The cracks may be permanent, or they may disappear after some time.\n\nVertical cracks are at least $t(soil.vertical_cracking.description_width, {\"context\": \"{{units}}\"}) wide and $t(soil.vertical_cracking.description_depth, {\"context\": \"{{units}}\"}) deep. You should be able to place a pencil inside the cracks.",
+            "description": "Surface cracks develop in clay-rich soils after they dry out.",
+            "no_cracks": "<bold>No Cracks</bold>\nNo cracks are visible on the soil surface.",
+            "surface_cracks": "<bold>Surface Cracks</bold>\nSurface cracks are less than $t(soil.vertical_cracking.description_depth, {\"context\": \"{{units}}\"}) deep.",
+            "deep_vertical_cracks": "<bold>Deep Vertical Cracks</bold>\nDeep vertical cracks are at least $t(soil.vertical_cracking.description_width, {\"context\": \"{{units}}\"}) wide and $t(soil.vertical_cracking.description_depth, {\"context\": \"{{units}}\"}) deep. You should be able to place a pencil inside the cracks.",
             "description_width_METRIC": "5 mm",
             "description_width_ENGLISH": "3/16”",
             "description_depth_METRIC": "25 cm",

diff --git a/dev-client/src/translations/es.json b/dev-client/src/translations/es.json
@@ -737,7 +737,10 @@
             "soilTexture": "Incluye clase de textura y volumen de fragmentos de roca"
         },
         "vertical_cracking": {
-            "description": "Pueden aparecer grietas verticales en la superficie cuando algunos suelos experimentan cambios de humedad o temperatura. Las grietas pueden ser permanentes o desaparecer con el tiempo.\n\nLas grietas verticales tienen al menos $t(soil.vertical_cracking.description_width, {\"context\": \"{{units}}\"}) de ancho y $t(soil.vertical_cracking.description_depth, {\"context\": \"{{units}}\"}) de profundidad. Deberías poder colocar un lápiz dentro de las grietas.",
+            "description": "Surface cracks develop in clay-rich soils after they dry out.",
+            "no_cracks": "<bold>No Cracks</bold>\nNo cracks are visible on the soil surface.",
+            "surface_cracks": "<bold>Surface Cracks</bold>\nSurface cracks are less than $t(soil.vertical_cracking.description_depth, {\"context\": \"{{units}}\"}) deep.",
+            "deep_vertical_cracks": "<bold>Deep Vertical Cracks</bold>\nDeep vertical cracks are at least $t(soil.vertical_cracking.description_width, {\"context\": \"{{units}}\"}) wide and $t(soil.vertical_cracking.description_depth, {\"context\": \"{{units}}\"}) deep. You should be able to place a pencil inside the cracks.",
             "description_width_METRIC": "5 mm",
             "description_width_ENGLISH": "3/16”",
             "description_depth_METRIC": "25 cm",