Dev/add chatbot

.github/workflows/pr-to-s3.yml

@@ -0,0 +1,28 @@
+name: PR Deploy
+on:
+  pull_request:
+    branches: [ master ]
+  workflow_dispatch:
+
+jobs:
+  pr-deploy:
+    if: "!contains(github.event.head_commit.message, 'skip ci')"
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/cache@v3
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node
+      - run: npm ci
+      - run: npm run build
+      - name: Configure AWS Credentials
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: eu-central-1
+      - name: Deploy static site to S3 bucket
+        run: aws s3 sync dist s3://demo.woosmap.com/storelocator/mapjs/pr-${{ github.event.pull_request.number }}/ --acl public-read

package.json

@@ -40,6 +40,7 @@
     "@typescript-eslint/eslint-plugin": "^6.20.0",
     "@typescript-eslint/parser": "^6.20.0",
     "cypress": "^13.6.4",
+    "deep-chat": "^2.0.1",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "lint-staged": "^15.2.1",

src/App.ts

@@ -7,6 +7,7 @@ import StoresListComponent, {StoresListComponentEvents} from "./components/store
 import "./styles/main.scss";
 import FilterComponent, {FilterComponentEvents} from "./components/filter/filter";
 import DirectionsComponent, {DirectionsComponentEvents, IDirections} from "./components/directions/directions";
+import ChatbotComponent, {ChatbotComponentEvents} from "./components/chatbot/chatbot";
 import {setUserLocale, SYSTEM_LANG} from './helpers/locale';
 import {debounce} from "./utils/utils";
 import {Configuration, getConfig, setConfig} from "./configuration/config";
@@ -38,9 +39,11 @@ export default class StoreLocator extends Component<IStoreLocator> {
     public storesListComponent!: StoresListComponent;
     public storeDetailsComponent!: StoreDetailsComponent;
     public filterComponent!: FilterComponent;
+    public chatbotComponent!: ChatbotComponent;
     private $sidebarContentContainer!: HTMLElement;
     private urlParameterManager!: URLParameterManager<AllowedParameters>;
     private userLocationMarker!: woosmap.map.Marker | null;
+    private closestStore!: woosmap.map.stores.StoreResponse | null;
 
     init(): void {
         this.urlParameterManager = new URLParameterManager();
@@ -104,6 +107,12 @@ export default class StoreLocator extends Component<IStoreLocator> {
                 store: undefined
             },
         });
+        this.chatbotComponent = new ChatbotComponent({
+            $target: document.getElementById(
+                getConfig().selectors.chatContainerID
+            ) as HTMLElement,
+            initialState: {},
+        });
         if (getConfig().search.availableServices.length) {
             this.filterComponent = new FilterComponent({
                 $target: document.getElementById(
@@ -132,6 +141,54 @@ export default class StoreLocator extends Component<IStoreLocator> {
                 this.setListView();
             }
         );
+        [ChatbotComponentEvents.FIND_NEARBY_STORES, ChatbotComponentEvents.MOVE_MAP].forEach(event => {
+            this.chatbotComponent.on(event, (locality?: SearchLocation) => {
+                this.directionsComponent.emit(DirectionsComponentEvents.CLOSE_DIRECTIONS)
+                if (locality) {
+                    this.searchComponent.setState({selectedLocality: locality}, true, () => {
+                        this.searchComponent.selectLocality();
+                    })
+                } else {
+                    const centerLatLng = this.mapComponent.map.getCenter().toJSON()
+                    locality = {
+                        name: `${centerLatLng.lat}, ${centerLatLng.lng}`,
+                        location: {
+                            lat: centerLatLng.lat,
+                            lng: centerLatLng.lng
+                        }
+                    };
+                    this.searchComponent.setState({selectedLocality: locality}, true, () => {
+                        this.searchComponent.selectLocality();
+                    })
+                }
+                this.storesListComponent.once(StoresListComponentEvents.STORES_CHANGED, ({stores}) => {
+                    this.chatbotComponent.emit(ChatbotComponentEvents.NEARBY_STORES_RETRIEVED, ({stores, locality}))
+                });
+            });
+        });
+        this.chatbotComponent.on(ChatbotComponentEvents.FILTER_STORES, (filters) => {
+            this.filterComponent.setActiveFilters(filters)
+        })
+        this.chatbotComponent.on(ChatbotComponentEvents.GET_DIRECTIONS, ({origin, destination}) => {
+            let directionState = {};
+            if (!destination && this.closestStore) {
+                destination = {
+                    name: this.closestStore.properties.name,
+                    location: {
+                        lat: this.closestStore.geometry.coordinates[1],
+                        lng: this.closestStore.geometry.coordinates[0],
+                    },
+                }
+            }
+            directionState = {...directionState, origin};
+            directionState = {...directionState, destination};
+
+            this.directionsComponent.setState(directionState, true, () => {
+                this.directionsComponent.emit(DirectionsComponentEvents.DESTINATION_CHANGED)
+                this.setDirectionsView();
+            });
+        })
+
         this.searchComponent.on(SearchComponentEvents.SEARCH_CLEAR, () => {
                 this.urlParameterManager.setLocality(undefined)
                 this.storesListComponent.setState({nearbyLocation: undefined, stores: []});
@@ -150,6 +207,7 @@ export default class StoreLocator extends Component<IStoreLocator> {
                     this.setUserPosition(nearbyLocation);
                 }
             );
+            this.closestStore = stores[0];
             this.setListView();
         });
         this.storesListComponent.on(StoresListComponentEvents.STORE_SELECTED, (selectedStore: AssetFeatureResponse) => {
@@ -177,6 +235,7 @@ export default class StoreLocator extends Component<IStoreLocator> {
         });
         this.mapComponent.on(MapComponentEvents.MAP_READY, () => {
             this.directionsComponent.emit(DirectionsComponentEvents.MAP_READY, this.mapComponent.map);
+            this.chatbotComponent.emit(DirectionsComponentEvents.MAP_READY, this.mapComponent.map)
             this.setChildrenInitialState()
         });
         this.mapComponent.on(MapComponentEvents.MAP_IDLE, () => {
@@ -304,7 +363,7 @@ export default class StoreLocator extends Component<IStoreLocator> {
         }
     }
 
-    setUserPosition(position: woosmap.map.LatLngLiteral | undefined): void {
+    setUserPosition(position: woosmap.map.LatLng | woosmap.map.LatLngLiteral | undefined): void {
         if (!position && this.userLocationMarker) {
             this.userLocationMarker.setMap(null);
             return;
@@ -381,6 +440,7 @@ export default class StoreLocator extends Component<IStoreLocator> {
            </div>
         <div id="${getConfig().selectors.directionsContainerID}"></div>   
         <div id="${getConfig().selectors.roadbookContainerID}"></div>
-        </div>`;
+        </div>
+        <div id="${getConfig().selectors.chatContainerID}"></div>`;
     }
 }