Merge pull request #1426 from culturecreates/develop

Develop
culturecreates · Nov 1, 2024 · cdb9fde · cdb9fde
2 parents cad677d + f2ecf87
commit cdb9fde
Show file tree

Hide file tree

Showing 9 changed files with 215 additions and 13 deletions.
diff --git a/.github/workflows/build-production-deploy-s3.yml b/.github/workflows/build-production-deploy-s3.yml
@@ -19,6 +19,12 @@ jobs:
 
       - name: setup node
         run: npm install
+
+      # Append additional environment variables to .env.staging
+      - name: Add extra env variables
+        run: |
+          echo "REACT_APP_GOOGLE_MAPS_API_KEY=${{ secrets.GOOGLE_MAPS_API_KEY }}" >> .env.production
+          echo "REACT_APP_GOOGLE_MAPS_ID=${{ secrets.GOOGLE_MAPS_ID }}" >> .env.production  
         
       - name: build
         run: npm run build:production

diff --git a/.github/workflows/build-staging-deploy-s3.yml b/.github/workflows/build-staging-deploy-s3.yml
@@ -18,13 +18,11 @@ jobs:
         uses: actions/checkout@v2
       - name: setup node
         run: npm install
-      - name: Make envfile
-        uses: SpicyPizza/[email protected]
-        with:
-         envkey_GOOGLE_MAPS_API_KEY: ${{ secrets.GOOGLE_MAPS_API_KEY }}
-         envkey_GOOGLE_MAPS_ID: ${{ secrets.GOOGLE_MAPS_ID }}
-         file_name: .env.staging
-         fail_on_empty: false
+      # Append additional environment variables to .env.staging
+      - name: Add extra env variables
+        run: |
+          echo "REACT_APP_GOOGLE_MAPS_API_KEY=${{ secrets.GOOGLE_MAPS_API_KEY }}" >> .env.staging
+          echo "REACT_APP_GOOGLE_MAPS_ID=${{ secrets.GOOGLE_MAPS_ID }}" >> .env.staging
       - name: build
         run: npm run build:staging
       # Upload to S3

diff --git a/.github/workflows/publish-production-docker-image.yml b/.github/workflows/publish-production-docker-image.yml
@@ -54,6 +54,8 @@ jobs:
           envkey_REACT_APP_ENV: staging
           envkey_REACT_APP_INVITE_URL: http://localhost:3001/join?invitationId=
           envkey_REACT_APP_ACCEPT_URL: http://localhost:3001/accept?invitationId=
+          envkey_REACT_APP_GOOGLE_MAPS_API_KEY: ${{ secrets.GOOGLE_MAPS_API_KEY }}
+          envkey_REACT_APP_GOOGLE_MAPS_ID: ${{ secrets.GOOGLE_MAPS_ID }}
           file_name: .env
           fail_on_empty: false
 

diff --git a/.github/workflows/publish-staging-docker-image.yml b/.github/workflows/publish-staging-docker-image.yml
@@ -54,6 +54,8 @@ jobs:
           envkey_REACT_APP_ENV: staging
           envkey_REACT_APP_INVITE_URL: http://localhost:3001/join?invitationId=
           envkey_REACT_APP_ACCEPT_URL: http://localhost:3001/accept?invitationId=
+          envkey_REACT_APP_GOOGLE_MAPS_API_KEY: ${{ secrets.GOOGLE_MAPS_API_KEY }}
+          envkey_REACT_APP_GOOGLE_MAPS_ID: ${{ secrets.GOOGLE_MAPS_ID }}
           file_name: .env
           fail_on_empty: false
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@vis.gl/react-google-maps": "^1.3.0",
     "antd": "^4.24.0",
     "async-mutex": "^0.4.0",
     "compressorjs": "^1.1.1",

diff --git a/src/components/MapComponent/MapComponent.jsx b/src/components/MapComponent/MapComponent.jsx
@@ -0,0 +1,70 @@
+import React, { useState, useEffect } from 'react';
+import { APIProvider, Map, AdvancedMarker, Pin } from '@vis.gl/react-google-maps';
+
+const MapComponent = (props) => {
+  const { latitude, longitude, form, fieldName, handleGeocode } = props;
+  const [markerPosition, setMarkerPosition] = useState({
+    lat: latitude ?? 54.35291352856401,
+    lng: longitude ?? -110.072423828125,
+  });
+  const [center, setCenter] = useState({
+    lat: latitude ?? 54.35291352856401,
+    lng: longitude ?? -110.072423828125,
+  });
+
+  const [zoom, setZoom] = useState(20);
+
+  const handleMarkerDragEnd = (event) => {
+    const { latLng } = event;
+    const newPosition = {
+      lat: latLng.lat(),
+      lng: latLng.lng(),
+    };
+    setMarkerPosition(newPosition);
+    form.setFieldsValue({
+      [fieldName]: `${newPosition.lat},${newPosition.lng}`,
+      latitude: newPosition.lat,
+      longitude: newPosition.lng,
+    });
+    handleGeocode([newPosition.lat, newPosition.lng]);
+  };
+
+  useEffect(() => {
+    if (latitude && longitude) {
+      setMarkerPosition({
+        lat: latitude,
+        lng: longitude,
+      });
+      setCenter({
+        lat: latitude,
+        lng: longitude,
+      });
+      if (zoom !== 20) setZoom(20);
+    }
+  }, [latitude, longitude]);
+
+  return (
+    <APIProvider apiKey={process.env.REACT_APP_GOOGLE_MAPS_API_KEY}>
+      <Map
+        defaultZoom={5}
+        mapId={process.env.REACT_APP_GOOGLE_MAPS_ID}
+        style={{
+          height: '40vh',
+          width: '100%',
+        }}
+        zoom={zoom}
+        defaultCenter={center}
+        center={center}
+        onCameraChanged={(ev) => {
+          setZoom(ev?.detail?.zoom);
+          setCenter(ev?.detail?.center);
+        }}>
+        <AdvancedMarker position={markerPosition} draggable={true} onDragEnd={handleMarkerDragEnd}>
+          <Pin />
+        </AdvancedMarker>
+      </Map>
+    </APIProvider>
+  );
+};
+
+export default MapComponent;
diff --git a/src/components/MapComponent/index.js b/src/components/MapComponent/index.js
@@ -0,0 +1 @@
+export { default } from './MapComponent';
diff --git a/src/pages/Dashboard/CreateNewPlace/CreateNewPlace.jsx b/src/pages/Dashboard/CreateNewPlace/CreateNewPlace.jsx
@@ -92,6 +92,7 @@ import { getCurrentCalendarDetailsFromUserDetails } from '../../../utils/getCurr
 import CreateMultiLingualFormItems from '../../../layout/CreateMultiLingualFormItems/CreateMultiLingualFormItems';
 import { isDataValid, placeHolderCollectionCreator } from '../../../utils/MultiLingualFormItemSupportFunctions';
 import MultiLingualTextEditor from '../../../components/MultilingualTextEditor/MultiLingualTextEditor';
+import MapComponent from '../../../components/MapComponent';
 
 const { TextArea } = Input;
 
@@ -139,6 +140,7 @@ function CreateNewPlace() {
     ACCESSIBILITY_NOTE_WRAP: 'accessibilityNotewrap',
     REGION: 'region',
     CONTAINS_PLACE: 'containsPlace',
+    MAP: 'map',
   };
   const placeId = searchParams.get('id');
   const externalCalendarEntityId = searchParams.get('entityId');
@@ -227,6 +229,17 @@ function CreateNewPlace() {
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const [quickCreateKeyword, setQuickCreateKeyword] = useState('');
   const [publishValidateFields, setPublishValidateFields] = useState([]);
+  const [coordinates, setCoordinates] = useState({
+    latitude: null,
+    longitude: null,
+  });
+  const [geocoder, setGeocoder] = useState(null);
+
+  useEffect(() => {
+    if (window.google) {
+      setGeocoder(new window.google.maps.Geocoder());
+    }
+  }, []);
 
   let externalEntityData = externalCalendarEntityData?.length > 0 && externalCalendarEntityData[0];
   externalEntityData = {
@@ -756,6 +769,10 @@ function CreateNewPlace() {
           longitude: '' + latLng.lng,
           coordinates: latLng.lat + ',' + latLng.lng,
         });
+        setCoordinates({
+          latitude: latLng.lat,
+          longitude: latLng.lng,
+        });
       })
       .catch((error) => console.error(error));
     setDropdownOpen(false);
@@ -820,11 +837,82 @@ function CreateNewPlace() {
     setAddedFields(array);
     setScrollToSelectedField(array?.at(-1));
   };
-  //eslint-disable-next-line
-  const onFieldsChange = (changedValue, allValues) => {
-    if (changedValue?.length > 0 && !showDialog) {
-      if (changedValue?.filter((field) => field?.touched).length > 0) {
-        setShowDialog(true);
+  const isValidCoordinates = (latitude, longitude) => {
+    const isLatitudeValid = typeof latitude === 'number' && latitude >= -90 && latitude <= 90;
+    const isLongitudeValid = typeof longitude === 'number' && longitude >= -180 && longitude <= 180;
+
+    return isLatitudeValid && isLongitudeValid;
+  };
+
+  const handleGeocode = (coordinates) => {
+    if (!geocoder) return; // Ensure geocoder is initialized
+
+    const latlng = {
+      lat: parseFloat(coordinates[0]),
+      lng: parseFloat(coordinates[1]),
+    };
+
+    geocoder
+      .geocode({ location: latlng })
+      .then((response) => {
+        if (response.results[0]) {
+          const addressComponents = response.results[0].address_components;
+
+          const streetNumber =
+            addressComponents.find((item) => item.types.includes('street_number'))?.long_name || null;
+          const streetName = addressComponents.find((item) => item.types.includes('route'))?.long_name || null;
+          const streetAddress = [streetNumber, streetName].filter(Boolean).join(' ') || null;
+
+          calendarContentLanguage.forEach((language) => {
+            const langKey = contentLanguageKeyMap[language];
+
+            form.setFieldValue([formFieldNames.STREET_ADDRESS, langKey], streetAddress);
+            form.setFieldValue(
+              [formFieldNames.COUNTRY, langKey],
+              addressComponents.find((item) => item.types.includes('country'))?.long_name,
+            );
+            form.setFieldValue(
+              [formFieldNames.CITY, langKey],
+              addressComponents.find((item) => item.types.includes('locality'))?.long_name,
+            );
+            form.setFieldValue(
+              [formFieldNames.PROVINCE, langKey],
+              addressComponents.find((item) => item.types.includes('administrative_area_level_1'))?.short_name,
+            );
+          });
+
+          form.setFieldValue(
+            formFieldNames.POSTAL_CODE,
+            addressComponents.find((item) => item.types.includes('postal_code'))?.long_name,
+          );
+        }
+      })
+      .catch((e) => console.log(e));
+  };
+
+  const onFieldsChange = (changedValue) => {
+    if (changedValue?.length > 0) {
+      if (!showDialog) {
+        if (changedValue?.filter((field) => field?.touched).length > 0) {
+          setShowDialog(true);
+        }
+      }
+      const coordinatesField = changedValue.find((field) => field.name[0] === formFieldNames.COORDINATES);
+
+      if (coordinatesField?.touched) {
+        const coordinates = form.getFieldValue(formFieldNames.COORDINATES)?.split(/[, ]+/).map(parseFloat);
+
+        if (
+          coordinates.length === 2 &&
+          coordinates.every((coord) => !isNaN(coord)) &&
+          isValidCoordinates(coordinates[0], coordinates[1])
+        ) {
+          setCoordinates({
+            latitude: coordinates[0],
+            longitude: coordinates[1],
+          });
+          handleGeocode(coordinates);
+        }
       }
     }
   };
@@ -1031,6 +1119,10 @@ function CreateNewPlace() {
             latitude: placeData.geoCoordinates && '' + placeData.geoCoordinates.latitude,
             longitude: placeData.geoCoordinates && '' + placeData.geoCoordinates.longitude,
           });
+          setCoordinates({
+            latitude: parseFloat(placeData.geoCoordinates?.latitude),
+            longitude: parseFloat(placeData.geoCoordinates?.longitude),
+          });
           setAddedFields(initialAddedFields);
         } else
           window.location.replace(
@@ -1147,6 +1239,10 @@ function CreateNewPlace() {
           latitude: externalCalendarEntityData[0].geo && '' + externalCalendarEntityData[0].geo.latitude,
           longitude: externalCalendarEntityData[0].geo && '' + externalCalendarEntityData[0].geo.longitude,
         });
+        setCoordinates({
+          latitude: parseFloat(externalCalendarEntityData[0].geo?.latitude),
+          longitude: parseFloat(externalCalendarEntityData[0].geo?.longitude),
+        });
         setAddedFields(initialAddedFields);
       }
     }
@@ -1737,7 +1833,7 @@ function CreateNewPlace() {
                   <PlacesAutocomplete
                     googleCallbackName="initTwo"
                     searchOptions={{ componentRestrictions: { country: 'CA' } }}
-                    value={address}
+                    value={address ?? ''}
                     onChange={handleChange}
                     onSelect={handleSelect}
                     data-cy="google-places-autocomplete">
@@ -1992,6 +2088,18 @@ function CreateNewPlace() {
                   ]}>
                   <StyledInput data-cy="input-place-coordinates" />
                 </Form.Item>
+                <Form.Item name={formFieldNames.MAP} hidden={!coordinates.latitude || !coordinates.longitude}>
+                  {coordinates.latitude && coordinates.longitude && (
+                    <MapComponent
+                      longitude={coordinates.longitude}
+                      latitude={coordinates.latitude}
+                      setCoordinates={setCoordinates}
+                      form={form}
+                      fieldName={formFieldNames.COORDINATES}
+                      handleGeocode={handleGeocode}
+                    />
+                  )}
+                </Form.Item>
                 <Form.Item
                   data-cy="form-item-place-region"
                   name={formFieldNames.REGION}