V2 Features (#29)

* in-progress, Grab map provider

* in-progress, Grab map provider

* handled undefined credentials case when stack is switched

* updated tests

* updated constants

* in progress, grab map and style support

* fixed ALS-1408

* fixed info content which was overlapping with logo

* fix for ALS-1252

* fix for ALS-1408

* in-progress, updates to Grab feature

* in-progress

* [ALS-1311] added tests and finalised functionality

* updated readme

* fixed build issue

* resolved bug and updated CF template link in README

* updated e2e test

* updated e2e test

* removed @tanstack/react-query

* removed @tanstack/react-query

* added tooltips and resolved innerHtml issue in console

* resoolved location when disconnecting stack while using Grab map provider

* bug fixes

* bug fixes

* attribution text color handling for different styles, removed bias position when searching with Grab map provider

* removed commented styles

* attribution fixes

* padding added to cater long suggestions in search

* fixed zoom issue for popup when clicking on search suggestion and renamed Grab to GrabMaps

* added await for E2E test

* added feedback from QA

* removed outline for info icon on Popup

* feedback from QA

* removed log

* enabled Route Options for walking when using Grab, disabled locate me icon UI fix

* style updates

* added CF templates

* synced upstream

* merged main

* updates responsive styles for disabled locate me button

* merged feature_ALS-1311

* updated Grab disclaimer modal

* merged main

* updated logic to show route options only for Car and Truck travel modes

* added stack region selection via dropdown

* updated README.md

* removed selected state for region dropdown

* updated UI for dropdown and locate me toast message

* enable selected state for region dropdown

* added default region selection to SettingsModal

* improved settings modal style change experience

* update UX for unit switch

* updated CF templates

* added Grab resources to README

* added Grab resources to README

* updated readme and region logic

* changed UI and added filters and search for map styles

* improved the code

* updated CF template link in readme

* updated filter icon, added some tests for MapButtons component and fixed placeholder for search and filter

* updates selected filters when a filter is clicked

* improvements

* show map styles below while filters are open

* updated settings modal test & checkbox design

* fixed typo

* resolved type

* resolved build issue

* changed default text of NotFoundCard

* updated E2E tests

* merged develop

* fix for light style showing in dark search

* feat: Add Light attribute to HERE_EXPLORE_TRUCK

* updated UI

* improved the checkbox, height

* debounced searches, pending routeBox test

* fixed routeBox test

* cleanup

* fix for ALS-1510

* fix for ALS-1514

* fix for ALS-1466

* feature ALS-1454 - Updated UI for styles not found

* Fox for search UI issues

- fixed border bottom rounded issue while searching and when not found card appears
- fixed search shaking and height when search has no result or loading

* Feature ALS-1450

* added check to reconnect websocket when disconnects
* fixed tooltip position
* changed UI for web socket connection
* improved web socket connection logic for tracker box
* replaced colors & UI according to design

* feature_ALS-1517-mapstyles-error-message

fixed clear filters button styling

* feature_ALS-1450_websocket-connection

* [ALS-1525] fixed stack region selection issue when GrabMaps selected

* fixed the banner issue when user connected back once it is closed (#21)

* fixed dynamic text issue on auto when toggling units

* unauth simulation, analytics, localization, translation script and update default CF template

* add footer in TriggeredByEnum and fix tests (#39)

* localization fixes for terms page, auth geofence box

* add pageViewDuration in LEAVE_PAGE event (#40)

* Improve leave page event attr (#44)

* fix pageViewDuration

* add pageViewIdentifier to track actions per page view

* placeholder for the loading state during the search operation. (#45)

* merged lib approach

* translated chinese in language dropdown

* improve pageViewIdentifier storage (#46)

* fixed text responsive issues with button (#42)

* updated README

* Dynamically Localize Number Formats for International User Support (#47)

* fixed text & added new script to update translation (#48)

* updated regex to support geofence name in multiple languages

* Updated CF templates (#49)

* Remove useRecordViewPage from DemoPlaceholderPage and amend page identifier key (#50)

* Update main-cf-template.yaml

* Update main-cf-template.yaml

* fixes callback to show auth tracker box

* removed log

* Improve analytics (#51)

* log session_end event and improve page identifiers storage

* remove pageViewDuration

* amend pageViewIdentifier

* Add Open Data Maps to demo app (#52)

* Addeede open data provider

* completed adding open data provider

* fixed attribute color issue with visualization dark mode

* fixed build issues and updated name for translation script

* Feat/change country approach (#53)

* change the country fetching approach, also remove initiateAnalytics

* add COUNTRY_EVALUATION_URL env variable

* fix env variables

* return undefined if the country code is Unknown getCountryCode

* revert stopsession debouce time and remove logs

* set default COUNTRY_EVALUATION_URL

* unauth simulation fixes - removed geofence border, fixed animation, updated icons

* Add the ability to dynamic evaluate and assign fastest region (#54)

* change env variable for multiple identity pool ids (#56)

* change env variable for multiple identity pool ids

* fix useEffect error in useRecordViewPage

* Fixed unauth simulation ui issues (#55)

* fixed unauth simulation ui issues

* removed unused import

* fixed unauth tracking history left icon alignment

* fixed notification icon size

* Allowed duplicates geeofence notifications for unauth

* fixed button hover for primary button

* updated env and websocket urls approach

* removed log

* updated env

* library format changed from es to cjs (#57)

* Revert "library format changed from es to cjs (#57)" (#58)

This reverts commit c4f2fa2.

* updated language icon ins settings modal

* added option in settings modal to select region

* updated translations

* add geofence notification case in cypress tests (#60)

* fixed dot issue in arabic and hebrew, fixed the RTL issue with short distance unit (#61)

* fixed dot issue in arabic and hebrew, fixed the rtl issue with short unit

* fixed short units translation

* fixed paused simulation issue when active the other routes & fixed spelling for trackers

* improved the short distance unit ui

* region and opendata ui fix

* fixes for unauth simulation

* Added kinesis resources & updated pinpoint event stream (#62)

Co-authored-by: Harshit Wadhawan <[email protected]>

* updated readme

* updated readme

* V2 features

* updated env example

* sync with upstream

---------

Co-authored-by: Dabeer Raza <[email protected]>
Co-authored-by: NihaalAftab-Makeen <[email protected]>
Co-authored-by: harshit-makeen <[email protected]>
Co-authored-by: Harshit Wadhawan <[email protected]>

.env.example

@@ -1,7 +1,7 @@
-VITE_AWS_COGNITO_IDENTITY_POOL_ID=XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab
-VITE_AWS_REGION=XX-XXXX-X
-VITE_AWS_COGNITO_IDENTITY_POOL_ID_ASIA=XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab
-VITE_AWS_REGION_ASIA=XX-XXXX-X
-VITE_AWS_CF_TEMPLATE=https://example.com
+VITE_AWS_COGNITO_IDENTITY_POOL_IDS=XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab,XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab
+VITE_AWS_WEB_SOCKET_URLS=XXXXXXXXXXXXXX-ats.iot.XX-XXXX-X.amazonaws.com,XXXXXXXXXXXXXX-ats.iot.XX-XXXX-X.amazonaws.com
+VITE_PINPOINT_IDENTITY_POOL_ID=XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab
+VITE_PINPOINT_APPLICATION_ID=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+VITE_AWS_CF_TEMPLATE=https://us-east-1.console.aws.amazon.com/cloudformation/home?region=us-east-1#/stacks/create?stackName=amazon-location-resources-setup&templateURL=<LINK_TO_UPLOADED_CF_TEMPLATE>
 VITE_APPLE_APP_STORE_LINK=https://apps.apple.com/app/amazon-location-demo/id1670477797?trk=18347227-315a-4761-a6a7-07e2ffdf08b6&sc_channel=el
 VITE_GOOGLE_PLAY_STORE_LINK=https://play.google.com/store/apps/details?id=com.aws.amazonlocation&trk=7246fb27-1ed0-4c04-ba03-7af6c090739b&sc_channel=el

.eslintignore

@@ -9,6 +9,7 @@ sample-projects
 node_modules
 extra
 dist
+lib
 dist-ssr
 *.local
 build

.gitignore

@@ -9,6 +9,8 @@ lerna-debug.log*
 
 # Non-editor directories
 node_modules
+lib
+demo-app-lib
 dist
 dist-ssr
 *.local

README.md

@@ -2,26 +2,28 @@
 
 ## Requirements
 
-1. Run the [CF template](https://us-east-1.console.aws.amazon.com/cloudformation/home?region=us-east-1#/stacks/create?stackName=amazon-location-resources-setup&templateURL=https://amazon-location-demo-resources.s3.amazonaws.com/location-services.yaml) or run the CF template from  `/extra/cloudformation/default-resources-template.yaml` on AWS in `us-east-1` region, using your own AWS account and get `IdentityPoolId` and `Region` from stack output.
-2. Values from above stack output will be added to `.env` file against the following keys `VITE_AWS_COGNITO_IDENTITY_POOL_ID` and `VITE_AWS_REGION` respectively.
-3. Run the CF template from  `/extra/cloudformation/default-grab-resources-template.yaml` on AWS in `ap-southeast-1` region, using your own AWS account and get `IdentityPoolId` and `Region` from stack output.
-4. Values from above stack output will be added to `.env` file against the following keys `VITE_AWS_COGNITO_IDENTITY_POOL_ID_ASIA` and `VITE_AWS_REGION_ASIA` respectively.
-5. Upload the CF template from `/extra/cloudformation/main-cf-template.yaml` to the same region as step 1 (`us-east-1`) and add the link to the key `VITE_AWS_CF_TEMPLATE` in `.env` file.
-6. Add the keys `VITE_APPLE_APP_STORE_LINK` and `VITE_GOOGLE_PLAY_STORE_LINK` in `.env` file with the links pointing to respective stores.
+1. Run the [CF template](https://us-east-1.console.aws.amazon.com/cloudformation/home?region=us-east-1#/stacks/create?stackName=amazon-location-default-unauth-resources&templateURL=<LINK_TO_UPLOADED_CF_TEMPLATE>) or use the template from `/extra/cloudformation/default-unauth-resources-template.yaml` to create a cloudformation stack on AWS in `us-east-1` region using your own AWS account and get `IdentityPoolId`, `PinPointAppId`, `WebSocketUrl` from stack output's tab.
+	- `IdentityPoolId` value will be added to `.env` file against `VITE_AWS_COGNITO_IDENTITY_POOL_IDS` and `VITE_PINPOINT_IDENTITY_POOL_ID`.
+	- `PinPointAppId` value will be added to `.env` file against `VITE_PINPOINT_APPLICATION_ID`.
+	- `WebSocketUrl` value will be added to `.env` file against `VITE_AWS_WEB_SOCKET_URLS`.
+2. Run the [CF template](https://ap-southeast-1.console.aws.amazon.com/cloudformation/home?region=ap-southeast-1#/stacks/create?stackName=amazon-location-default-unauth-resources&templateURL=<LINK_TO_UPLOADED_CF_TEMPLATE>) or use the template from `/extra/cloudformation/default-unauth-resources-template.yaml` to create a cloudformation stack on AWS in `ap-southeast-1` region using your own AWS account and get `IdentityPoolId`, `WebSocketUrl` from stack output's tab [Necessary if you want *GrabMaps* to be enabled].
+	- `IdentityPoolId` value will be added to `.env` file against `VITE_AWS_COGNITO_IDENTITY_POOL_IDS` (comma separated for multiple values).
+	- `WebSocketUrl` value will be added to `.env` file against `VITE_AWS_WEB_SOCKET_URLS` (comma separated for multiple values).
+5. Value for `VITE_AWS_CF_TEMPLATE`, `VITE_APPLE_APP_STORE_LINK`, `VITE_GOOGLE_PLAY_STORE_LINK` can be added as it is to `.env` file from `.env.examples`.
 
 #### Env keys required in `.env` file, see `.env.example` for reference
 
-> VITE_AWS_COGNITO_IDENTITY_POOL_ID<br />
-VITE_AWS_REGION<br />
-VITE_AWS_COGNITO_IDENTITY_POOL_ID_ASIA<br />
-VITE_AWS_REGION_ASIA<br />
+> VITE_AWS_COGNITO_IDENTITY_POOL_IDS<br />
+VITE_AWS_WEB_SOCKET_URLS<br />
+VITE_PINPOINT_IDENTITY_POOL_ID<br />
+VITE_PINPOINT_APPLICATION_ID<br />
 VITE_AWS_CF_TEMPLATE<br />
 VITE_APPLE_APP_STORE_LINK<br />
 VITE_GOOGLE_PLAY_STORE_LINK<br />
 
 ## Configure
 
-> git clone https://github.com/aws-geospatial/amazon-location-features-demo-web.git<br />
+> git clone <REPO_URL><br />
 cd amazon-location-features-demo-web/<br />
 yarn install<br />
 yarn vite
@@ -99,6 +101,10 @@ Run all the test cases for all the components within the repo and provides a cov
 - location.aws.com.demo.maps.HERE.Imagery - RasterHereExploreSatellite
 - location.aws.com.demo.maps.Grab.StandardLight - VectorGrabStandardLight
 - location.aws.com.demo.maps.Grab.StandardDark - VectorGrabStandardDark
+- location.aws.com.demo.maps.OpenData.StandardLight - VectorOpenDataStandardLight
+- location.aws.com.demo.maps.OpenData.StandardDark - VectorOpenDataStandardDark
+- location.aws.com.demo.maps.OpenData.VisualizationLight - VectorOpenDataVisualizationLight
+- location.aws.com.demo.maps.OpenData.VisualizationDark - VectorOpenDataVisualizationDark
 
 > Place indexes (Name)
 

__mocks__/styleMock.ts

@@ -0,0 +1 @@
+module.exports = {};

cypress/e2e/userIsAbleToUseTracker.cy.js

@@ -1,7 +1,10 @@
 /* Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. */
 /* SPDX-License-Identifier: MIT-0 */
+import { faker } from "@faker-js/faker";
 
 describe("Tracker", () => {
+	const geofenceName = faker.random.word();
+
 	beforeEach(() => {
 		cy.visitDomain(`${Cypress.env("WEB_DOMAIN")}/demo`);
 		cy.get('[id="Icon"]').click();
@@ -37,6 +40,81 @@ describe("Tracker", () => {
 			});
 		});
 		cy.wait(5000);
+
+		cy.get('[id="Icon"]').click();
+		cy.wait(2000);
+
+		cy.get("#root").then($root => {
+			const asd = $root.find('[class="amplify-button amplify-field-group__control amplify-button--primary"]');
+
+			if (asd.length && asd[0].innerText === "Sign in") {
+				asd[0].click();
+			} else {
+				cy.get('[id="Icon"]').click();
+			}
+		});
+
+		cy.wait(7000);
+	});
+
+	it("should allow user to add a tracker and the user should see the notifications for Geofence enter and exit events", () => {
+		cy.get('[id="Icon"]').click();
+		cy.wait(2000);
+
+		cy.contains("Tracker").click();
+		cy.wait(2000);
+
+		cy.contains("Continue").click();
+		cy.wait(2000);
+
+		cy.get('[class="amplify-flex geofence-button"]').click();
+		cy.wait(4000);
+
+		cy.get('[placeholder="Enter address or coordinates"]').type("Rio Tinto Perth Western Australia");
+		cy.wait(4000);
+		cy.contains("Rio Tinto Operations Centre").click();
+		cy.wait(2000);
+		cy.get('[placeholder="Type unique Geofence Name"]').type(`${geofenceName}`);
+		cy.wait(2000);
+		cy.contains("Save").click();
+		cy.wait(2000);
+		cy.get("div").should("contain", `${geofenceName}`);
+		cy.wait(1000);
+		cy.get('[class="amplify-flex geofence-card-close"]').click();
+		cy.wait(500);
+
+		cy.get('[class="mapboxgl-canvas"]').click("left", { force: true });
+		cy.wait(2000);
+		cy.get('[class="mapboxgl-canvas"]').click("right", { force: true });
+		cy.wait(2000);
+		cy.get('[class="mapboxgl-canvas"]').click("right", { force: true });
+		cy.wait(2000);
+
+		cy.contains("Save").click();
+		cy.wait(2000);
+
+		cy.get('[class="amplify-button amplify-field-group__control amplify-button--primary play-pause-button"]').click();
+		cy.wait(2000);
+
+		cy.get(
+			'[class="Toastify__toast Toastify__toast-theme--dark Toastify__toast--info Toastify__toast--close-on-click enter-geofence"]',
+			{ timeout: 50000 }
+		)
+			.should("be.visible")
+			.click({ multiple: true });
+
+		cy.get(
+			'[class="Toastify__toast Toastify__toast-theme--dark Toastify__toast--info Toastify__toast--close-on-click exit-geofence"]',
+			{ timeout: 50000 }
+		)
+			.should("be.visible")
+			.click({ multiple: true });
+
+		cy.wait(2000);
+	});
+
+	it("should allow user to add a tracker for car and be able to edit", () => {
+		cy.wait(5000);
 		cy.get('[placeholder="Search"]').click();
 		cy.wait(2000);
 		cy.get('[inputmode="search"]')
@@ -45,15 +123,16 @@ describe("Tracker", () => {
 			.type("{downArrow}")
 			.type("{enter}");
 		cy.wait(2000);
+
 		cy.get('[id="Icon"]').click();
-		cy.wait(5000);
+		cy.wait(2000);
+
 		cy.contains("Tracker").click();
 		cy.wait(2000);
+
 		cy.contains("Continue").click();
 		cy.wait(2000);
-	});
 
-	it("should allow user to add a tracker for car and be able to edit", () => {
 		cy.get('[class="mapboxgl-canvas"]').click("left", { force: true });
 		cy.wait(2000);
 		cy.get('[class="mapboxgl-canvas"]').click("right", { force: true });
@@ -70,9 +149,6 @@ describe("Tracker", () => {
 		cy.wait(2000);
 		cy.get("div").should("contain", "Pause");
 		cy.get('[class="amplify-flex tracking-card-close"]').click();
-		cy.get('[id="Icon"]').click();
-		cy.contains("Sign out").click();
-		cy.wait(5000);
 	});
 
 	// it("should allow user to add a tracker for walk", () => {