Intervention webapp fixes

public/assets/images/icons/InterventionIcon.tsx

@@ -0,0 +1,26 @@
+
+
+
+import React from 'react';
+import { IconProps } from '../../../../src/features/common/types/common';
+
+function InterventionIcon({ color = 'black' }: IconProps) {
+    return (
+        <svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect width="27" height="27" transform="matrix(-1 0 0 1 27 0)" fill="white" />
+            <g clip-path="url(#clip0_5513_164)">
+                <path d="M9.73693 25C9.4499 24.9184 9.30557 24.7177 9.22936 24.4354C9.09638 23.9458 8.95043 23.4578 8.79151 22.9764C8.75097 22.8524 8.65204 22.743 8.56447 22.6402C7.78932 21.728 7.30769 20.6868 7.19904 19.4857C7.11633 18.58 7.2412 17.7086 7.62067 16.873C7.8704 16.323 8.08608 15.7568 8.31798 15.197C8.7834 14.0759 9.24071 12.9531 9.71585 11.8369C9.93964 11.313 10.2315 10.8267 10.6402 10.4204C10.6694 10.391 10.6872 10.3273 10.6791 10.2849C10.5186 9.43632 10.3483 8.59098 10.1894 7.74238C10.0856 7.18426 9.97208 6.62614 9.90883 6.06313C9.83748 5.42504 9.86018 4.7837 10.1051 4.17499C10.2851 3.72784 10.564 3.35413 11.0099 3.13871C11.138 3.07507 11.2775 3.04406 11.4105 3C11.5289 3 11.6489 3 11.7673 3C11.8013 3.00979 11.8354 3.02448 11.871 3.03101C12.1337 3.0816 12.2959 3.23826 12.377 3.49447C12.6867 4.45568 12.9997 5.41362 13.3127 6.37319C13.7327 7.65915 14.1527 8.94511 14.5727 10.2294C14.7511 10.7761 14.9408 11.3196 15.1062 11.8712C15.2554 12.3705 15.283 12.8846 15.1338 13.3872C14.7657 14.634 14.3846 15.8759 14.0068 17.1211C13.7862 17.8505 13.5641 18.58 13.3467 19.3111C13.3289 19.3699 13.3305 19.4449 13.3532 19.502C13.7927 20.6656 14.2354 21.8275 14.6798 22.9895C14.7933 23.2881 14.7414 23.5378 14.5273 23.7091C14.2322 23.9458 13.7781 23.8348 13.6419 23.4807C13.3403 22.7006 13.0451 21.9173 12.7484 21.1356C12.5927 20.7276 12.4532 20.3115 12.2765 19.9133C12.137 19.5983 12.1402 19.3095 12.2408 18.9831C12.8375 17.0476 13.4181 15.1073 14.0084 13.1702C14.1106 12.8324 14.1073 12.4994 13.9987 12.1682C13.4959 10.626 12.9916 9.08545 12.4889 7.54492C12.1435 6.4858 11.8013 5.42831 11.4559 4.36919C11.4429 4.33165 11.4283 4.29412 11.4056 4.23863C11.2629 4.38877 11.1689 4.54543 11.1186 4.72658C11.0035 5.14762 10.9905 5.58008 11.0472 6.00601C11.1121 6.50211 11.2126 6.99332 11.3051 7.48453C11.4559 8.27765 11.6132 9.06913 11.764 9.86225C11.777 9.92916 11.8013 9.95853 11.8662 9.96833C12.3283 10.0369 12.6559 10.311 12.9138 10.6815C13.0273 10.8447 13.0467 11.0258 12.9803 11.2167C12.4986 12.6072 12.1727 14.04 11.8467 15.4728C11.7267 16.0016 11.6245 16.5336 11.5159 17.0656C11.464 17.3169 11.3229 17.4866 11.0716 17.5421C10.8267 17.596 10.624 17.5111 10.4764 17.3087C10.3775 17.1716 10.3597 17.0117 10.3937 16.8485C10.5315 16.186 10.6564 15.5201 10.8121 14.8625C11.0407 13.8947 11.2905 12.9335 11.537 11.9707C11.5986 11.7292 11.6862 11.4925 11.7575 11.2527C11.7689 11.2151 11.7737 11.1417 11.7575 11.1352C11.7154 11.1156 11.6554 11.1041 11.6148 11.1205C11.5483 11.1482 11.4851 11.1923 11.4316 11.2429C11.1251 11.5382 10.9191 11.9038 10.757 12.2889C10.1018 13.849 9.45963 15.4141 8.80935 16.9758C8.62285 17.4246 8.42825 17.8685 8.35528 18.3548C8.22393 19.2409 8.35204 20.0814 8.75259 20.881C8.98448 21.3461 9.29098 21.7557 9.64774 22.1327C9.7191 22.2094 9.78396 22.3057 9.81477 22.4052C10.0013 23.0042 10.178 23.6063 10.3532 24.2101C10.457 24.5675 10.3207 24.8368 9.97856 24.9706C9.96072 24.9772 9.94613 24.9886 9.92991 24.9967H9.72883L9.73693 25Z" fill="#333333" />
+                <path d="M25 13.9992C25 15.7274 25 17.4556 25 19.1838C25 19.5412 24.7632 19.7844 24.4081 19.7844C23.654 19.786 22.8983 19.786 22.1442 19.7844C21.8102 19.7844 21.5653 19.5412 21.5637 19.2051C21.5604 17.4099 21.562 15.6132 21.5604 13.8181C21.5604 12.1568 21.5604 10.4955 21.5604 8.8358C21.5604 8.44577 21.7907 8.21403 22.1767 8.2124C22.9161 8.2124 23.6556 8.2124 24.3951 8.2124C24.76 8.2124 24.9967 8.44903 24.9967 8.81295C24.9967 10.5412 24.9967 12.2694 24.9967 13.9976L25 13.9992Z" fill="#333333" />
+                <path d="M20.3993 13.9994C20.3993 15.7276 20.3993 17.4558 20.3993 19.184C20.3993 19.5398 20.1577 19.7862 19.8074 19.7878C19.0598 19.7878 18.3139 19.7878 17.5663 19.7878C17.1998 19.7878 16.963 19.5528 16.963 19.1856C16.963 15.7259 16.963 12.2646 16.963 8.80495C16.963 8.45082 17.2014 8.21582 17.5533 8.21582C18.3041 8.21582 19.055 8.21582 19.8058 8.21582C20.1609 8.21582 20.3993 8.45571 20.3993 8.81637C20.3993 10.5446 20.3993 12.2728 20.3993 14.001V13.9994Z" fill="#333333" />
+                <path d="M8.3131 9.54893C8.2985 9.60768 8.27418 9.71702 8.24175 9.82309C7.80552 11.1972 7.36767 12.5713 6.93307 13.9453C6.51468 15.2656 6.09629 16.5874 5.67952 17.9077C5.53033 18.3809 5.37952 18.8542 5.23032 19.3291C5.1087 19.7126 4.79734 19.8627 4.41625 19.7322C3.77245 19.5118 3.12865 19.2964 2.48161 19.0843C2.07133 18.9488 1.91565 18.6665 2.04701 18.2536C2.4508 16.9791 2.85784 15.7046 3.26001 14.43C3.71569 12.9874 4.17138 11.5448 4.62707 10.1022C4.78275 9.60768 4.93843 9.11157 5.09897 8.61873C5.20113 8.30214 5.51249 8.13895 5.82872 8.24339C6.51468 8.46696 7.1974 8.69543 7.88012 8.92717C8.17039 9.02508 8.31634 9.22581 8.31472 9.5473L8.3131 9.54893Z" fill="#333333" />
+            </g>
+            <defs>
+                <clipPath id="clip0_5513_164">
+                    <rect width="23" height="22" fill="white" transform="translate(2 3)" />
+                </clipPath>
+            </defs>
+        </svg>
+    );
+}
+
+export default InterventionIcon;

src/features/common/types/plantLocation.d.ts

@@ -1,8 +1,11 @@
+import { InterventionTypes } from '@planet-sdk/common';
 import { DateString } from './common';
 import { Links } from './payments';
 import { Polygon, Point } from 'geojson';
+import { INTERVENTION_TYPE } from '../../../utils/constants/intervention';
 
 export interface PlantLocationBase {
+  type: InterventionTypes 
   hid: string;
   id: string;
   idempotencyKey: string;
@@ -52,7 +55,9 @@ export interface PlantLocationMulti extends PlantLocationBase {
   nextMeasurementDate: null;
 }
 
-export type PlantLocation = PlantLocationSingle | PlantLocationMulti;
+
+
+export type PlantLocation = PlantLocationSingle | PlantLocationMulti  ;
 
 export interface SamplePlantLocation extends PlantLocationBase {
   type: 'sample-tree-registration';

src/features/projectsV2/ProjectDetails/components/OtherInterventionInfo.tsx

@@ -0,0 +1,144 @@
+import type {
+  Measurements,
+  PlantedSpecies,
+  PlantLocationBase,
+  SamplePlantLocation,
+} from '../../../common/types/plantLocation';
+import type { DateString, SetState } from '../../../common/types/common';
+
+import { useMemo } from 'react';
+import { useTranslations } from 'next-intl';
+import * as turf from '@turf/turf';
+import styles from '../styles/PlantLocationInfo.module.scss';
+import SpeciesPlanted from './microComponents/SpeciesPlanted';
+import SampleTrees from './microComponents/SampleTrees';
+import TreeMapperBrand from './microComponents/TreeMapperBrand';
+import ImageSlider from './microComponents/ImageSlider';
+import MobileInfoSwiper from '../../MobileInfoSwiper';
+import OtherInterventionInfoHeader from './microComponents/OtherInterventionHeader';
+import OtherInterventionMetaData from './microComponents/OtherInterventionMetaData';
+import { INTERVENTION_TYPE } from '../../../../utils/constants/intervention';
+
+export interface OtherInterventions extends PlantLocationBase {
+  sampleTreeCount: number;
+  sampleInterventions: SamplePlantLocation[];
+  plantedSpecies: PlantedSpecies[];
+  nextMeasurementDate: null;
+  scientificName: string | null;
+  scientificSpecies: string | null;
+  tag: string | null;
+  measurements: Measurements;
+  originalGeometry: turf.Point;
+  geometry: turf.Point;
+}
+
+interface Props {
+  plantLocationInfo: any | null;
+  isMobile: boolean;
+  setSelectedSamplePlantLocation: SetState<SamplePlantLocation | null>;
+}
+
+const OtherInterventionInfo = ({
+  plantLocationInfo,
+  isMobile,
+  setSelectedSamplePlantLocation,
+}: Props) => {
+  const tProjectDetails = useTranslations('ProjectDetails');
+  const isMultiTreeRegistration =
+    plantLocationInfo?.type === 'enrichment-planting';
+  const { totalTreesCount, plantedLocationArea } = useMemo(() => {
+    const totalTreesCount =
+      plantLocationInfo &&
+        plantLocationInfo.plantedSpecies &&
+        plantLocationInfo.plantedSpecies.length > 0
+        ? plantLocationInfo.plantedSpecies.reduce(
+          (sum: any, species: { treeCount: any; }) => sum + species.treeCount,
+          0
+        )
+        : 0;
+    const area = plantLocationInfo?.geometry
+      ? turf.area(plantLocationInfo?.geometry)
+      : 0;
+    const plantedLocationArea = area / 10000;
+    return { totalTreesCount, plantedLocationArea };
+  }, [plantLocationInfo?.geometry, plantLocationInfo?.type]);
+
+  const plantingDensity = totalTreesCount / plantedLocationArea;
+
+  const sampleInterventionSpeciesImages = useMemo(() => {
+    if (isMultiTreeRegistration) {
+      const result = plantLocationInfo.sampleInterventions && plantLocationInfo.sampleInterventions.map((item: {
+        coordinates: {
+          id: any; image: any;
+        }[]; tag: any;
+      }) => {
+        return {
+          id: item.coordinates[0].id,
+          image: item.coordinates[0].image ?? '',
+          description: tProjectDetails('sampleTreeTag', { tag: item.tag }),
+        };
+      });
+      return result;
+    }
+  }, [isMultiTreeRegistration ? plantLocationInfo.sampleInterventions : null]);
+
+  const shouldDisplayImageCarousel =
+    sampleInterventionSpeciesImages !== undefined &&
+    sampleInterventionSpeciesImages?.length > 0;
+
+  const content = [
+    <>
+      {shouldDisplayImageCarousel && (
+        <ImageSlider
+          key="imageSlider"
+          images={sampleInterventionSpeciesImages}
+          type="coordinate"
+          isMobile={isMobile}
+          imageSize="large"
+          allowFullView={!isMobile}
+        />
+      )}
+    </>,
+    <OtherInterventionInfoHeader
+      key="plantingDetails"
+      plantingDensity={plantingDensity}
+      plantDate={plantLocationInfo?.interventionStartDate}
+      type={plantLocationInfo?.type}
+    />,
+    <OtherInterventionMetaData
+      key="plantingDetails"
+      metaData={plantLocationInfo?.metadata}
+      plantDate={plantLocationInfo?.interventionStartDate}
+      type={plantLocationInfo?.type}
+    />,
+    plantLocationInfo?.plantedSpecies && plantLocationInfo.plantedSpecies.length > 0 && (
+      <SpeciesPlanted
+        key="speciesPlanted"
+        totalTreesCount={totalTreesCount}
+        plantedSpecies={plantLocationInfo.plantedSpecies}
+      />
+    ),
+    isMultiTreeRegistration &&
+    plantLocationInfo.sampleInterventions && plantLocationInfo.sampleInterventions.length > 0 && (
+      <SampleTrees
+        key="sampleTrees"
+        sampleInterventions={plantLocationInfo.sampleInterventions}
+        setSelectedSamplePlantLocation={setSelectedSamplePlantLocation}
+      />
+    ),
+  ].filter(Boolean);
+  console.log("OJK,plantLocationInfo", plantLocationInfo)
+  return isMobile ? (
+    <MobileInfoSwiper
+      slides={content}
+      uniqueKey={plantLocationInfo?.hid || ''}
+    />
+  ) : (
+    <section className={styles.plantLocationInfoSection}>
+      {content}
+      <TreeMapperBrand />
+    </section>
+  );
+};
+
+export default OtherInterventionInfo;

src/features/projectsV2/ProjectDetails/components/microComponents/OtherInterventionHeader.tsx

@@ -0,0 +1,50 @@
+import formatDate from '../../../../../utils/countryCurrency/getFormattedDate';
+import styles from '../../styles/PlantLocationInfo.module.scss';
+import { useLocale, useTranslations } from 'next-intl';
+import { AllIntervention } from '../../../../../utils/constants/intervention';
+
+interface Props {
+  plantingDensity: number | null;
+  type: string | undefined,
+  plantDate: string | null | undefined;
+}
+
+const OtherInterventionInfoHeader = ({ plantingDensity, plantDate, type }: Props) => {
+  const tProjectDetails = useTranslations('ProjectDetails');
+  const locale = useLocale();
+
+  const findInterventionHeader = (valueKey: string | undefined) => {
+    const found = AllIntervention.find(item => item.value === valueKey);
+    return found ? found.label : '';
+  };
+  const plantingDetails = [
+    {
+      label: "Intervention",
+      data: findInterventionHeader(type),
+      shouldRender: plantingDensity !== null,
+    },
+    {
+      label: "Intervention Date",
+      data: plantDate ? formatDate(plantDate) : null,
+      shouldRender: plantDate !== null,
+    },
+  ];
+  return (
+    <div className={`planting-details-group ${styles.plantingDetailsGroup}`}>
+      {plantingDetails.map((item, key) => {
+        if (!item.shouldRender) return;
+        return (
+          <div
+            key={key}
+            className={`planting-details-item ${styles.plantingDetailsItem}`}
+          >
+            <h2 className={styles.label}>{item.label}</h2>
+            <p className={styles.data}>{item.data}</p>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default OtherInterventionInfoHeader;

src/features/projectsV2/ProjectDetails/components/microComponents/OtherInterventionMetaData.tsx

@@ -0,0 +1,87 @@
+import styles from '../../styles/PlantLocationInfo.module.scss';
+import { useLocale, useTranslations } from 'next-intl';
+import { Metadata } from '../../../../common/types/plantLocation';
+
+interface Props {
+  metaData: Metadata | undefined;
+  type: string | undefined,
+  plantDate: string | null | undefined;
+}
+
+const OtherInterventionMetaData = ({ metaData }: Props) => {
+  const tProjectDetails = useTranslations('ProjectDetails');
+  const locale = useLocale();
+
+  function isJsonString(str: string) {
+    try {
+      const parsed = JSON.parse(str);
+      return typeof parsed === 'object' && parsed !== null;
+    } catch (e) {
+      return false;
+    }
+  }
+
+
+
+  interface MetaDataValue {
+    value: string;
+    label: string;
+  }
+
+  interface PublicMetaData {
+    [key: string]: string | MetaDataValue;
+  }
+
+  const renderMetaData = () => {
+    const checkForPublic: { value: string; key: string }[] = [];
+    const parsedData = metaData;
+
+    if (parsedData?.public && typeof parsedData.public === 'object' && !Array.isArray(parsedData.public)) {
+      Object.entries(parsedData.public as PublicMetaData).forEach(([key, value]) => {
+        if (key !== 'isEntireSite') {
+          if (typeof value === 'string') {
+            checkForPublic.push({ value, key });
+          } else if (typeof value === 'object' && value !== null && 'value' in value && 'label' in value) {
+            if (isJsonString(value.value)) {
+              try {
+                const parsedValue = JSON.parse(value.value);
+                if (parsedValue && typeof parsedValue === 'object' && 'value' in parsedValue) {
+                  checkForPublic.push({ value: parsedValue.value, key: value.label });
+                }
+              } catch (error) {
+                console.error('Error parsing JSON:', error);
+              }
+            } else {
+              checkForPublic.push({ value: value.value, key: value.label });
+            }
+          }
+        }
+      });
+    }
+
+    return checkForPublic;
+  };
+
+
+  const cardData=renderMetaData()
+  if(cardData.length===0){
+    return null
+  }
+  return (
+    <div className={`planting-details-group ${styles.interventionMetaDataGroup}`}>
+      {cardData.map((item, key) => {
+        return (
+          <div
+            key={key}
+            className={`planting-details-item ${styles.interventionMetaItem}`}
+          >
+            <h2 className={styles.label}>{item.key}</h2>
+            <p className={styles.data}>{item.value}</p>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default OtherInterventionMetaData;

src/features/projectsV2/ProjectDetails/index.tsx

@@ -23,6 +23,7 @@ import MultiPlantLocationInfo from './components/MultiPlantLocationInfo';
 import SinglePlantLocationInfo from './components/SinglePlantLocationInfo';
 import { getPlantData } from '../../../utils/projectV2';
 import ProjectDetailsMeta from '../../../utils/getMetaTags/ProjectDetailsMeta';
+import OtherInterventionInfo from './components/OtherInterventionInfo';
 
 const ProjectDetails = ({
   currencyCode,
@@ -125,6 +126,8 @@ const ProjectDetails = ({
     (hoveredPlantLocation?.type === 'multi-tree-registration' ||
       selectedPlantLocation?.type === 'multi-tree-registration') &&
     !isMobile;
+  const PLANTATION_TYPES = ['multi-tree-registration', 'single-tree-registration']
+  const shouldShowOtherIntervention = (hoveredPlantLocation !== null && !PLANTATION_TYPES.includes(hoveredPlantLocation.type)) || (selectedPlantLocation !== null && !PLANTATION_TYPES.includes(selectedPlantLocation.type))
   const shouldShowSinglePlantInfo =
     (hoveredPlantLocation?.type === 'single-tree-registration' ||
       selectedPlantLocation?.type === 'single-tree-registration' ||
@@ -176,13 +179,17 @@ const ProjectDetails = ({
               hoveredPlantLocation?.type === 'multi-tree-registration'
                 ? hoveredPlantLocation
                 : selectedPlantLocation?.type === 'multi-tree-registration'
-                ? selectedPlantLocation
-                : undefined
+                  ? selectedPlantLocation
+                  : undefined
             }
             setSelectedSamplePlantLocation={setSelectedSamplePlantLocation}
             isMobile={isMobile}
           />
         )}
+
+        {shouldShowOtherIntervention && <OtherInterventionInfo plantLocationInfo={selectedPlantLocation || hoveredPlantLocation} setSelectedSamplePlantLocation={setSelectedSamplePlantLocation}
+          isMobile={isMobile} />}
+
         {shouldShowProjectInfo && (
           <ProjectInfo
             project={singleProject}

src/features/projectsV2/ProjectDetails/styles/PlantLocationInfo.module.scss

@@ -181,4 +181,26 @@
   .scientificName .data {
     font-style: italic;
   }
+
+}
+
+.interventionMetaDataGroup {
+  display: flex;
+  flex-direction: column,
+
+}
+
+.interventionMetaItem {
+  padding: 20px;
+  background: rgba(0, 122, 73, 0.05);
+  border-radius: 12px;
+  margin-bottom: 10px;
+}
+
+.plantMetaDataCardLabel {
+  color: rgba(0, 122, 73, 1);
+  font-weight: 700;
+  font-size: 12px;
+  padding: 5px 10px;
 }
+