Merge pull request #175 from vtex/best-pickup-markers

CHK-599: Fix rendering of markers not updating on address change

Author: lucasecdb

.github/workflows/ci.yml

@@ -0,0 +1,50 @@
+name: CI
+on:
+  pull_request:
+    types: [opened, synchronize]
+  push:
+    branches: [main]
+
+jobs:
+  install:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+        with:
+          fetch-depth: 0
+      - name: NodeJS 12.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12.x
+      - run: |
+          yarn install --frozen-lockfile --check-files
+          yarn --cwd react install --frozen-lockfile --check-files
+      - uses: actions/cache@v2
+        id: cache-build
+        with:
+          path: ./*
+          key: ${{ github.sha }}
+
+  test:
+    runs-on: ubuntu-latest
+    needs: install
+    steps:
+    - name: Restore cache
+      uses: actions/cache@v2
+      id: restore-build
+      with:
+        path: ./*
+        key: ${{ github.sha }}
+    - run: yarn test
+
+  lint:
+    runs-on: ubuntu-latest
+    needs: install
+    steps:
+    - name: Restore cache
+      uses: actions/cache@v2
+      id: restore-build
+      with:
+        path: ./*
+        key: ${{ github.sha }}
+    - run: yarn lint

CHANGELOG.md

@@ -6,6 +6,11 @@ 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).
 
 ## [Unreleased]
+### Changed
+- Update to `Maps` component to declaretively render google maps and markers.
+
+### Fixed
+- Markers not updating on maps after changing address.
 
 ## [3.6.0] - 2021-12-10
 ### Added

package.json

@@ -15,9 +15,9 @@
     "lint-fix": "yarn lint --fix",
     "lint:locales": "intl-equalizer",
     "lint:ts": "tsc --noEmit -p react/tsconfig.json",
-    "test": "jest --env=jsdom",
-    "test:coverage": "jest --env=jsdom --coverage",
-    "test:watch": "jest --env=jsdom --watch",
+    "test": "yarn --cwd react test",
+    "test:coverage": "yarn --cwd react test --coverage",
+    "test:watch": "yarn --cwd react test --watch",
     "prepublishOnly": "npm run symlink:remove && npm run symlink && npm run build && npm run symlink:remove",
     "build:link": "npm link && watch 'npm run build' src",
     "postreleasy": "npm publish --access public"
@@ -37,36 +37,14 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.16.0",
-    "@babel/preset-env": "^7.16.0",
-    "@babel/preset-react": "^7.16.0",
-    "@babel/preset-typescript": "^7.16.0",
     "@vtex/prettier-config": "^0.3.6",
-    "babel-jest": "^27.3.1",
-    "enzyme": "^3.4.1",
-    "enzyme-adapter-react-16": "^1.2.0",
-    "enzyme-react-intl": "^2.0.0",
     "eslint": "^7",
     "eslint-config-vtex": "^14.1.1",
     "eslint-config-vtex-react": "^8.2.0",
     "husky": "^4.2.3",
-    "i18n-iso-countries": "^3.5.0",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.3.1",
-    "jest-enzyme": "^6.0.3",
     "lint-staged": "^10.1.1",
-    "mockdate": "^2.0.2",
     "nwb": "^0.23.0",
     "prettier": "^2.4.1",
-    "react": "^16.3.2",
-    "react-dom": "^16.3.2",
-    "react-hot-loader": "^3.1.3",
-    "react-intl": "^2.8.0",
-    "react-redux": "^5.0.7",
-    "react-test-renderer": "^16.2.0",
-    "react-testing-library": "^6.0.0",
-    "redux": "^4.0.0",
-    "typescript": "^3.8.3",
-    "watch": "^1.0.2"
+    "typescript": "^3.8.3"
   }
 }

react/ModalState.js

@@ -257,7 +257,7 @@ class ModalState extends Component {
 
     this.setSelectedPickupPoint({
       pickupPoint: bestPickupOptions[previousIndex],
-      isSelectedBestPickupPoint: previousIndex < BEST_PICKUPS_AMOUNT,
+      isBestPickupPoint: previousIndex < BEST_PICKUPS_AMOUNT,
     })
   }
 
@@ -272,7 +272,7 @@ class ModalState extends Component {
 
     this.setSelectedPickupPoint({
       pickupPoint: bestPickupOptions[nextIndex],
-      isSelectedBestPickupPoint: nextIndex < BEST_PICKUPS_AMOUNT,
+      isBestPickupPoint: nextIndex < BEST_PICKUPS_AMOUNT,
     })
   }
 

react/PickupPointsModal.js

@@ -1,7 +1,10 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import debounce from 'lodash/debounce'
-import Map from './components/Map'
+import { injectIntl, intlShape } from 'react-intl'
+import { helpers } from 'vtex.address-form'
+
+import Map from './components/Map.jsx'
 import CloseButton from './components/CloseButton'
 import styles from './index.css'
 import ZoomControls from './components/ZoomControls'
@@ -10,14 +13,16 @@ import ModalState from './ModalState'
 import Geolocation from './Geolocation'
 import SearchArea from './components/SearchArea'
 import SearchOverlay from './assets/components/SearchOverlay'
-import { injectIntl, intlShape } from 'react-intl'
 import { withGoogleMaps } from './containers/withGoogleMaps'
 import { translate } from './utils/i18nUtils'
 import { newAddress } from './utils/newAddress'
 import { HIDE_MAP, SHOW_MAP } from './constants'
 import { getPickupOptionGeolocations } from './utils/pickupUtils'
-import { helpers } from 'vtex.address-form'
-import { closePickupPointsModalEvent, openPickupPointsModalEvent, searchPickupAddressByGeolocationEvent } from './utils/metrics'
+import {
+  closePickupPointsModalEvent,
+  openPickupPointsModalEvent,
+  searchPickupAddressByGeolocationEvent,
+} from './utils/metrics'
 
 const { validateField, addValidation } = helpers
 const NULL_VALUE = {
@@ -48,7 +53,8 @@ class PickupPointsModal extends Component {
   }
 
   componentDidMount() {
-    const style = document.body.style
+    const { style } = document.body
+
     style.overflow = 'hidden'
     style.position = 'fixed'
     style.width = '100%'
@@ -83,6 +89,7 @@ class PickupPointsModal extends Component {
     // On mobile browsers trigger the resize event when keyboard is opened
     // even though the screen size itself is the same
     const isWidthEqual = this.state.innerWidth === window.innerWidth
+
     if (!this.state.isMounted || isWidthEqual) return
     this.setState({
       isLargeScreen: window.innerWidth > 1023,
@@ -91,15 +98,15 @@ class PickupPointsModal extends Component {
     })
   }, 200)
 
-  updateLocationTab = mapStatus => this.setState({ mapStatus })
+  updateLocationTab = (mapStatus) => this.setState({ mapStatus })
 
   activatePickupDetails = () =>
     this.setState({
       isPickupDetailsActive: true,
       mapStatus: HIDE_MAP,
     })
 
-  getPostalCodeValue = address => {
+  getPostalCodeValue = (address) => {
     // TODO move this to Address Form
     if (
       address &&
@@ -119,7 +126,7 @@ class PickupPointsModal extends Component {
     return address.postalCode && address.postalCode.value
   }
 
-  getValidPostalCode = address => {
+  getValidPostalCode = (address) => {
     if (address.postalCode) {
       const postalCodevalue = this.getPostalCodeValue(address)
 
@@ -149,10 +156,11 @@ class PickupPointsModal extends Component {
         visited: null,
       }
     }
+
     return NULL_VALUE
   }
 
-  handleAddressChange = address => {
+  handleAddressChange = (address) => {
     const { searchAddress } = this.props
 
     const addressValidated = {
@@ -180,7 +188,8 @@ class PickupPointsModal extends Component {
   }
 
   handleCloseModal = () => {
-    const style = document.body.style
+    const { style } = document.body
+
     style.overflow = 'auto'
     style.position = ''
     if (this.state.isLoadingGeolocation) {
@@ -191,6 +200,7 @@ class PickupPointsModal extends Component {
         elapsedTime,
       })
     }
+
     this.props.closePickupPointsModal()
   }
 
@@ -265,25 +275,29 @@ class PickupPointsModal extends Component {
               pickupOptions={pickupOptions}
               salesChannel={salesChannel}
               orderFormId={orderFormId}
-              selectedPickupPoint={selectedPickupPoint}>
+              selectedPickupPoint={selectedPickupPoint}
+            >
               <Geolocation
                 address={searchAddressWithAddressQuery}
                 askForGeolocation={askForGeolocation}
                 googleMaps={googleMaps}
                 onChangeAddress={this.handleAddressChange}
                 onChangeGeolocationState={this.handleChangeGeolocationLoading}
-                rules={rules}>
+                rules={rules}
+              >
                 <SearchArea
                   address={searchAddressWithAddressQuery}
                   mapStatus={mapStatus}
                   shouldShow={shouldShowMap}
                   isLargeScreen={isLargeScreen}
                 />
-                <ZoomControls
-                  isLargeScreen={isLargeScreen}
-                  mapStatus={mapStatus}
-                  shouldShow={shouldShowMap}
-                />
+                {/*
+                 * Used for rendering the <ZoomControls /> component. This is
+                 * currently done this way because the ZoomControls must be a child of <Map />
+                 * to be able to consume the <GoogleMaps /> context, but it must be placed in
+                 * this position for the layout to work
+                 */}
+                <div id="controls-wrapper" />
 
                 {shouldUseMaps && (
                   <Map
@@ -301,7 +315,13 @@ class PickupPointsModal extends Component {
                     selectedPickupPointGeolocation={getPickupOptionGeolocations(
                       selectedPickupPoint
                     )}
-                  />
+                  >
+                    <ZoomControls
+                      isLargeScreen={isLargeScreen}
+                      mapStatus={mapStatus}
+                      shouldShow={shouldShowMap}
+                    />
+                  </Map>
                 )}
                 <SearchOverlay />
                 <StateHandler