Feature: share button in location details

packages/map-template/CHANGELOG.md

@@ -5,27 +5,33 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.69.0] - 2025-02-17
+
+### Added
+
+- Share functionality: From the Location details view the user can now copy a URL or scan a QR code that links to the Location (requires the `supportsUrlParameters` prop to be true).
+
 ## [1.68.3] - 2025-02-13
 
-## Fixed
+### Fixed
 
 - Fix 2D/3D selector not respecting the primaryColor query parameter
 
 ## [1.68.2] - 2025-02-11
 
-## Fixed
+### Fixed
 
 - Aligned map-template version in package-lock.
 
 ## [1.68.1] - 2025-02-11
 
-## Fixed
+### Fixed
 
 - An issue when on initial load map would stop in a random position.
 
 ## [1.68.0] - 2025-02-03
 
-## Added
+### Added
 
 - Added display of 2D models in 3D mode based on app config property
 
@@ -37,91 +43,91 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [1.66.7] - 2025-01-29
 
-## Fixed
+### Fixed
 
 - Enabled and fixed eslint rules
 
 ## [1.66.6] - 2025-01-27
 
-## Fixed
+### Fixed
 
 - Upgraded to SDK v4.38.6.
 
 ## [1.66.5] - 2025-01-27
 
-## Fixed
+### Fixed
 
 - Fixed an issue with `startZoomLevel` prop causing the map starting in a random position.
 
 ## [1.66.4] - 2025-01-23
 
-## Fixed
+### Fixed
 
 - Fix `miTransitionLevel` prop breaking the React Component package.
 
 ## [1.66.3] - 2025-01-23
 
-## Fixed
+### Fixed
 
 - Fix package-lock issues.
 
 ## [1.66.2] - 2025-01-21
 
-## Fixed
+### Fixed
 
 - Upgrade to SDK v.4.38.5.
 
 ## [1.66.1] - 2025-01-16
 
-## Fixed
+### Fixed
 
 - Removed Create React App dependencies and replaced with standard ESLint rules
 
 ## [1.66.0] - 2025-01-16
 
-## Added
+### Added
 
 - The map now fits to matching Locations when the user clicks/taps on a Category.
 
 ## [1.65.3] - 2025-01-15
 
-## Fixed
+### Fixed
 
 - Fixed issue of clicking outside of MapsIndoors data to close the Categories tab
 
 ## [1.65.2] - 2025-01-13
 
-## Fixed
+### Fixed
 
 - An issue where miTransitionLevel is not respected for Mapbox map.
 
 ## [1.65.1] - 2025-01-08
 
-## Fixed
+### Fixed
 
 - Upgrade to SDK v4.38.3.
 
 ## [1.65.0] - 2025-01-08
 
-## Added
+### Added
 
 - Added functionality to exit location details by clicking outside MapsIndoors data on the map for both Google Maps and Mapbox.
 
 ## [1.64.0] - 2025-01-02
 
-## Added
+### Added
 
 - When panning/zooming to a Location, it will no longer zoom further in than zoom level 22.
 
 ## [1.63.0] - 2024-12-12
 
-## Added
+### Added
 
 - Update "Accessibility" toggle text to "Avoid stairs and escalators"
 
 ## [1.62.1] - 2024-12-10
 
-## Fixed
+### Fixed
 
 - Fixed bug that would cause a Google Maps map to never show.
 

packages/map-template/package.json

@@ -30,6 +30,7 @@
     "prop-types": "^15.8.1",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",
+    "react-click-away-listener": "2.3.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^13.5.0",
     "react-swipeable": "^7.0.0",

packages/map-template/src/atoms/qrCodeLinkState.js

@@ -0,0 +1,8 @@
+import { atom } from 'recoil';
+
+const qrCodeLinkState = atom({
+    key: 'qrCodeLink',
+    default: null
+});
+
+export default qrCodeLinkState;

packages/map-template/src/components/Directions/Directions.jsx

@@ -10,18 +10,20 @@ import directionsResponseState from "../../atoms/directionsResponseState";
 import activeStepState from "../../atoms/activeStep";
 import { snapPoints } from "../../constants/snapPoints";
 import substepsToggledState from "../../atoms/substepsToggledState";
+import currentLocationState from '../../atoms/currentLocationState';
 import getDesktopPaddingLeft from "../../helpers/GetDesktopPaddingLeft";
 import getMobilePaddingBottom from "../../helpers/GetMobilePaddingBottom";
 import getDesktopPaddingBottom from "../../helpers/GetDesktopPaddingBottom";
 import kioskLocationState from "../../atoms/kioskLocationState";
-import showQRCodeDialogState from "../../atoms/showQRCodeDialogState";
+import qrCodeLinkState from '../../atoms/qrCodeLinkState';
 import Accessibility from "../Accessibility/Accessibility";
 import isDestinationStepState from "../../atoms/isDestinationStepState";
 import primaryColorState from "../../atoms/primaryColorState";
 import { useIsKioskContext } from "../../hooks/useIsKioskContext";
 import { useIsDesktop } from "../../hooks/useIsDesktop";
 import showExternalIDsState from '../../atoms/showExternalIDsState';
 import PropTypes from "prop-types";
+import baseLinkSelector from '../../selectors/baseLink';
 
 let directionsRenderer;
 
@@ -68,7 +70,7 @@ function Directions({ isOpen, onBack, onSetSize, snapPointSwiped, onRouteFinishe
 
     const isDesktop = useIsDesktop();
 
-    const [, setShowQRCodeDialog] = useRecoilState(showQRCodeDialogState);
+    const [, setQRCodeLink] = useRecoilState(qrCodeLinkState)
 
     const isDestinationStep = useRecoilValue(isDestinationStepState);
 
@@ -78,6 +80,10 @@ function Directions({ isOpen, onBack, onSetSize, snapPointSwiped, onRouteFinishe
 
     const showExternalIDs = useRecoilValue(showExternalIDsState);
 
+    const baseShareLink = useRecoilValue(baseLinkSelector);
+
+    const currentLocation = useRecoilValue(currentLocationState);
+
     useEffect(() => {
         return () => {
             setDestinationDisplayRule(null);
@@ -255,6 +261,14 @@ function Directions({ isOpen, onBack, onSetSize, snapPointSwiped, onRouteFinishe
         }
     }
 
+    /**
+     * Build the QR code link and set the state in order to show the QR code dialog.
+     */
+    function showQRCode() {
+        const qrCodeLink = `${baseShareLink}&directionsFrom=${kioskLocation.id}&directionsTo=${currentLocation.id}`;
+        setQRCodeLink(qrCodeLink);
+    }
+
     /**
      * Set the size of the bottom sheet depending on the substepsOpen state.
      */
@@ -289,7 +303,7 @@ function Directions({ isOpen, onBack, onSetSize, snapPointSwiped, onRouteFinishe
                     <hr />
                     <div className="directions__kiosk">
                         <Accessibility onAccessibilityChanged={() => resetSubsteps()} />
-                        <button className="directions__qr-code" onClick={() => setShowQRCodeDialog(true)}><QRCode />{t('Scan QR code')}</button>
+                        <button className="directions__qr-code" onClick={() => showQRCode()}><QRCode />{t('Scan QR code')}</button>
                     </div>
                 </>
             }

packages/map-template/src/components/LocationDetails/LocationDetails.jsx

@@ -18,6 +18,7 @@ import { useIsDesktop } from '../../hooks/useIsDesktop';
 import showExternalIDsState from '../../atoms/showExternalIDsState';
 import useOutsideMapsIndoorsDataClick from '../../hooks/useOutsideMapsIndoorsDataClick';
 import PropTypes from 'prop-types';
+import ShareLocationLink from './ShareLocationLink/ShareLocationLink';
 
 LocationDetails.propTypes = {
     onBack: PropTypes.func,
@@ -239,9 +240,12 @@ function LocationDetails({ onBack, onStartWayfinding, onSetSize, snapPointSwiped
                     </div>
                     <mi-location-info level={t('Level')} ref={locationInfoElement} show-external-id={showExternalIDs} />
                 </div>
-                <button className="location-info__close" onClick={() => back()}>
-                    <CloseIcon />
-                </button>
+                <div className="location-info__actions">
+                    <ShareLocationLink buttonClassName="location-info__button" location={location} />
+                    <button className="location-info__button" onClick={() => back()}>
+                        <CloseIcon />
+                    </button>
+                </div>
             </div>
 
             <div ref={locationDetailsContainer} onScroll={e => setScrollIndicators(e)} className="location-details__details">

packages/map-template/src/components/LocationDetails/LocationDetails.scss

@@ -112,7 +112,7 @@
     display: grid;
     align-items: center;
     font-size: var(--font-size-small);
-    grid-template-columns: min-content 1fr var(--spacing-xx-large);
+    grid-template-columns: min-content 1fr min-content;
     gap: var(--spacing-x-small);
 
     &__icon {
@@ -124,7 +124,13 @@
         }
     }
 
-    &__close {
+    &__actions {
+        margin-left: auto;
+        display: flex;
+        gap: var(--spacing-x-small);
+    }
+
+    &__button {
         background: none;
         border: 1px solid var(--tailwind-colors-gray-200);
         margin-left: auto;