Feature/max density

.eslintrc.js

@@ -38,6 +38,12 @@ module.exports = {
       1,
       { extensions: ['.js', '.jsx', '.tsx'] },
     ],
+    'react/no-unknown-property': [
+      2,
+      {
+        ignore: ['jsx', 'global'],
+      },
+    ],
     'react/jsx-indent': 'off',
     'import/extensions': 'off',
     'import/no-unresolved': 'off',

package.json

@@ -113,7 +113,7 @@
     "@storybook/testing-library": "^0.0.11",
     "@types/d3-ease": "^1.0.9",
     "@types/node": "^14.0.26",
-    "@types/react": "^18.0.1",
+    "@types/react": "^16.9.43",
     "@types/react-map-gl": "^5.2.7",
     "@types/styled-jsx": "^2.2.8",
     "@types/uuid": "^8.3.0",

public/static/locales/en/manageProjects.json

@@ -41,6 +41,7 @@
   "yearOfAbandonment": "Approx. year of Abandonment",
   "firstTreePlanted": "First tree planted",
   "plantingDensity": "Planting Density",
+  "maxPlantingDensity": "Max Planting Density (optional)",
   "employeeCount": "Employee Count",
   "endangeredSpeciesValidation": "Not a Valid Input",
   "endangeredSpecies": "Endangered Species",
@@ -186,9 +187,11 @@
   "validation": "{{fieldName}} is Invalid",
   "date": "Date",
   "plantingDensityValidation": "Please enter Planting Density",
+  "maxPlantingDensityValidation": "please enter Maximum Planting Density",
   "onlyEnglish": "Please create/edit projects in English only. Translations of Projects are managed automatically by Plant-for-the-Planet.",
   "since": "since",
   "Since": "Since",
   "and": "and",
+  "errorForMaxPlantingDensity": "This value should be greater than planting density",
   "managePayoutsButton": "Manage Payouts"
 }

src/features/projects/components/projectDetails/ProjectInfo.tsx

@@ -174,7 +174,18 @@ function ProjectInfo({ project }: Props): ReactElement {
               {t('manageProjects:plantingDensity')}
             </div>
             <div className={styles.infoText}>
-              {project.plantingDensity} {t('manageProjects:treePerHa')}
+              {project.plantingDensity}
+              {project?.metadata?.maxPlantingDensity ? (
+                <div className={styles.infoTextMaxDensity}>
+                  {'-'}
+                  <div>{project?.metadata?.maxPlantingDensity}</div>
+                  <h4>{t('manageProjects:treePerHa')}</h4>
+                </div>
+              ) : (
+                <div style={{ paddingRight: '68px' }}>
+                  {t('manageProjects:treePerHa')}
+                </div>
+              )}{' '}
             </div>
           </div>
         )}

src/features/projects/styles/ProjectDetails.module.scss

@@ -151,7 +151,7 @@
 /* Additional Information */
 
 .projectMoreInfoHalfContainer {
-  width: 100%;
+  width: 340px;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -179,10 +179,23 @@
   font-size: $fontSmall;
   color: $primaryFontColor;
   display: flex;
-  flex-direction: row;
+  flex-direction:row;
   justify-content: space-between;
 }
 
+.infoTextMaxDensity {
+  padding-right: 51px;
+  display:flex;
+  flex-direction: row;
+  >div{
+    margin-left: 1px;
+  }
+  >h4 {
+    width: 104px;
+    margin-left: 4px;
+  }
+}
+
 .infoTextButton {
   color: $primaryColor;
 }

src/features/user/ManageProjects/StepForm.module.scss

@@ -36,6 +36,50 @@
   }
 }
 
+.inputEndAdornment {
+  margin-left: 4px;
+  width: 100%;
+  text-align: right;
+  font-size: 14px;
+}
+
+.hyphen {
+  font-size: 40px;
+  margin-top: 16px;
+  @include xsPhoneView {
+    writing-mode: vertical-rl; 
+    margin-top: 0;
+    margin-bottom: -19px;
+    margin-right: 126px;
+  }
+  @include smTabletView {
+    writing-mode: vertical-rl; 
+    margin-top: 0;
+    margin-bottom: -19px;
+    margin-right: 126px;    
+  }
+  @include mdTabletView {
+    writing-mode: horizontal-tb;
+    margin-top: 14px;
+    margin-bottom: 0;
+    margin-right: 0; 
+  }
+
+}
+.density {
+ display: flex;
+ @include xsPhoneView {
+   flex-direction: column;
+ }
+ @include smTabletView {
+  flex-direction: column;
+}
+@include mdTabletView {
+  flex-direction: row;
+}
+
+}
+
 .reviewContent {
   display: flex;
   flex-direction: column;
@@ -75,7 +119,8 @@
   max-width: 320px;
   justify-content: space-between;
   align-items: center;
-}
+ }
+
 
 .skipBasicButton {
   width: 89px;
@@ -87,6 +132,17 @@
   }
 }
 
+.skipDetailAnalysis {
+  width: 89px;
+  margin-right: 45px;
+}
+
+.saveAndContinueDetailAnalysis {
+  width:169px;
+  height: 46px;
+  margin-right: 20px;
+}
+
 .reviewButtons {
   display: flex;
   margin-top: 30px;
@@ -139,6 +195,10 @@
   max-width: 320px;
   min-width: 320px;
 }
+
+.formFieldFix {
+  position: relative;
+}
 .latitudeInput {
   width: fit-content !important;
   div {
@@ -711,6 +771,7 @@
     text-align: center;
     border: 2px solid $primaryColor;
     display: none;
+    left: -290px
   }
   &:hover,
   &:active {
@@ -721,6 +782,18 @@
   }
 }
 
+.infoIconDiv {
+  position: absolute;
+  top: -9px;
+  right: -292px;
+  width:fit-content
+}
+
+.causeOfDegradation {
+  position: absolute;
+  right: 13px;
+}
+
 // white modal
 .modal {
   background-color: $backgroundColor;