@vtex/pickup-points-modal - npm Package Compare versions

Comparing version 0.1.27 to 0.1.28

lib/components/AskForGeolocation.js

@@ -68,3 +68,19 @@ 'use strict';
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.getCurrentPositionSuccess = function (position) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.handleGetCurrentPosition = function (props) {
+      if (props.askForGeolocation && props.status === _constants.WAITING) {
+        _this.handleGeolocationStatus(_constants.WAITING);
+
+        // Hard coded coords for development
+        if (window.location.host.includes(_constants.VTEXLOCAL)) {
+          _this.getCurrentPositionSuccess({
+            coords: {
+              latitude: -22.9432587,
+              longitude: -43.1862642
+            }
+          });
+          return;
+        }
+        props.googleMaps && (0, _CurrentPosition.getCurrentPosition)(_this.getCurrentPositionSuccess, _this.getCurrentPositionError);
+      }
+    }, _this.getCurrentPositionSuccess = function (position) {
       (0, _CurrentPosition.handleGetAddressByGeolocation)({
@@ -123,2 +139,4 @@ newPosition: {
       _this.props.onAskForGeolocationStatus(status);
+    }, _this.handleAskForGeolocationButtonClick = function () {
+      _this.props.onAskForGeolocationStatus(_constants.WAITING);
     }, _this.handleManualGeolocation = function () {
@@ -134,17 +152,7 @@ _this.props.onAskForGeolocation(false);
   AskForGeolocation.prototype.componentDidMount = function componentDidMount() {
-    if (this.props.askForGeolocation) {
-      this.handleGeolocationStatus(_constants.WAITING);
+    this.handleGetCurrentPosition(this.props);
+  };
 
-      // Hard coded coords for development
-      if (window.location.host.includes(_constants.VTEXLOCAL)) {
-        this.getCurrentPositionSuccess({
-          coords: {
-            latitude: -22.9432587,
-            longitude: -43.1862642
-          }
-        });
-        return;
-      }
-      this.props.googleMaps && (0, _CurrentPosition.getCurrentPosition)(this.getCurrentPositionSuccess, this.getCurrentPositionError);
-    }
+  AskForGeolocation.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
+    this.handleGetCurrentPosition(nextProps);
   };
@@ -172,22 +180,29 @@
         },
-        _react2.default.createElement(_UserGeolocation2.default, {
-          address: this.props.address,
-          pickupOptionGeolocations: this.props.pickupOptionGeolocations,
-          googleMaps: this.props.googleMaps,
-          onChangeAddress: this.props.onChangeAddress,
-          onGetGeolocation: this.handleGeolocationStatus,
-          handleAskForGeolocation: this.props.onAskForGeolocation,
-          rules: this.props.rules
-        }),
         _react2.default.createElement(
           'div',
-          { className: 'pkpmodal-ask-for-geolocation-manual' },
+          null,
           _react2.default.createElement(
-            'button',
-            {
-              type: 'button',
-              onClick: this.handleManualGeolocation,
-              className: 'btn-pkpmodal-ask-for-geolocation-manual btn btn-link'
-            },
-            this.translate('geolocationManual')
+            'div',
+            { className: 'ask-for-geolocation-cta' },
+            _react2.default.createElement(
+              'button',
+              {
+                className: 'btn-ask-for-geolocation-cta btn btn-success btn-large',
+                onClick: this.handleAskForGeolocationButtonClick
+              },
+              this.translate('askGeolocationAccept')
+            )
+          ),
+          _react2.default.createElement(
+            'div',
+            { className: 'pkpmodal-ask-for-geolocation-manual' },
+            _react2.default.createElement(
+              'button',
+              {
+                type: 'button',
+                onClick: this.handleManualGeolocation,
+                className: 'btn-pkpmodal-ask-for-geolocation-manual btn btn-link'
+              },
+              this.translate('geolocationManual')
+            )
           )
@@ -235,3 +250,3 @@ )
   address: _AddressShapeWithValidation2.default,
-  askForGeolocation: _propTypes2.default.bool.isRequired,
+  askForGeolocation: _propTypes2.default.bool,
   googleMaps: _propTypes2.default.object,
@@ -238,0 +253,0 @@ intl: _reactIntl.intlShape,

lib/components/GeolocationStatus.js

@@ -83,5 +83,5 @@ 'use strict';
             this.translate(subtitleBottom)
-          ),
-          this.props.children
-        )
+          )
+        ),
+        this.props.children
       )
@@ -88,0 +88,0 @@ );

lib/components/Home.js

@@ -47,2 +47,6 @@ 'use strict';
 
+var _GPS = require('../assets/components/GPS');
+
+var _GPS2 = _interopRequireDefault(_GPS);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -68,3 +72,8 @@
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.translate = function (id) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.onAskGeolocationClick = function () {
+      navigator.permissions.query({ name: 'geolocation' }).then(function (permission) {
+        _this.props.onAskForGeolocationStatus(permission.state === _constants.GRANTED || process.env.NODE !== 'production' ? _constants.WAITING : _constants.ASK);
+        _this.props.handleAskForGeolocation(true);
+      });
+    }, _this.translate = function (id) {
       return _this.props.intl.formatMessage({
@@ -142,13 +151,13 @@ id: 'pickupPointsModal.' + id
           }),
+          !isPickupDetailsActive && navigator.geolocation && _react2.default.createElement(
+            'button',
+            {
+              type: 'button',
+              className: 'button-ask-geolocation btn btn-link',
+              onClick: this.onAskGeolocationClick
+            },
+            _react2.default.createElement(_GPS2.default, null)
+          ),
           _react2.default.createElement(_SearchIcon2.default, null)
         ),
-        !isPickupDetailsActive && navigator.geolocation && _react2.default.createElement(
-          'button',
-          {
-            type: 'button',
-            className: 'button-ask-geolocation btn btn-link',
-            onClick: handleAskForGeolocation
-          },
-          this.translate('askGeolocation')
-        ),
         !isPickupDetailsActive && _react2.default.createElement(
@@ -170,2 +179,3 @@ 'div',
               items: items,
+              isList: true,
               logisticsInfo: logisticsInfo,
@@ -189,2 +199,3 @@ sellerId: sellerId,
                 items: items,
+                isList: true,
                 logisticsInfo: logisticsInfo,
@@ -242,2 +253,3 @@ sellerId: sellerId,
   handleAddressChange: _propTypes2.default.func.isRequired,
+  onAskForGeolocationStatus: _propTypes2.default.func.isRequired,
   handleAskForGeolocation: _propTypes2.default.func.isRequired,
@@ -244,0 +256,0 @@ updateLocationTab: _propTypes2.default.func.isRequired,

lib/components/PickupPoint.js

@@ -75,3 +75,4 @@ 'use strict';
         selectedRules = _props.selectedRules,
-        storePreferencesData = _props.storePreferencesData;
+        storePreferencesData = _props.storePreferencesData,
+        isList = _props.isList;
     var unavailableItemsAmount = this.state.unavailableItemsAmount;
@@ -105,6 +106,11 @@
           }),
-          _react2.default.createElement(
-            'div',
-            { className: 'pkpmodal-pickup-point-distance hide' },
-            pickupPoint.distance
+          pickupPoint.pickupStoreInfo.distance && _react2.default.createElement(
+            'p',
+            { className: 'pkpmodal-pickup-point-distance' },
+            this.translate('distance', {
+              distanceValue: (0, _Currency.formatNumber)({
+                value: pickupPoint.pickupStoreInfo.distance,
+                storePreferencesData: storePreferencesData
+              })
+            })
           )
@@ -122,3 +128,5 @@ ),
             'div',
-            { className: 'pkpmodal-pickup-point-address' },
+            {
+              className: 'pkpmodal-pickup-point-address ' + (isList ? 'list' : '')
+            },
             _react2.default.createElement(_addressForm.AddressSummary, {
@@ -125,0 +133,0 @@ address: pickupPoint.pickupStoreInfo.address,

lib/constants/index.js

@@ -20,3 +20,5 @@ 'use strict';
 var SEARCHING = exports.SEARCHING = 'searching';
+var GRANTED = exports.GRANTED = 'granted';
 var VTEXLOCAL = exports.VTEXLOCAL = 'vtexlocal';
+var HTTPS = exports.HTTPS = 'https:';
 
@@ -23,0 +25,0 @@ var EEMPTY = exports.EEMPTY = 'ERROR_EMPTY_FIELD';

lib/index.js

@@ -156,4 +156,4 @@ 'use strict';
     this.setState({
-      showAskForGeolocation: thisPickupOptions !== nextPickupOptions && this.state.askForGeolocationStatus === _constants.SEARCHING ? false : nextProps.askForGeolocation,
-      askForGeolocationStatus: thisPickupOptions !== nextPickupOptions && this.state.askForGeolocationStatus === _constants.SEARCHING ? null : this.state.askForGeolocationStatus,
+      showAskForGeolocation: nextProps.isSearching,
+      askForGeolocationStatus: nextProps.isSearching ? _constants.SEARCHING : this.state.askForGeolocationStatus,
       selectedPickupPoint: nextProps.selectedPickupPoint,
@@ -258,3 +258,3 @@ filteredPickupOptions: nextProps.pickupOptions.filter(function (option) {
           onAskForGeolocationStatus: this.handleAskForGeolocationStatus,
-          askForGeolocation: askForGeolocation
+          askForGeolocation: showAskForGeolocation
         }) : _react2.default.createElement(_Home2.default, {
@@ -274,2 +274,3 @@ mapStatus: mapStatus,
           largeScreen: largeScreen,
+          onAskForGeolocationStatus: this.handleAskForGeolocationStatus,
           changeActiveSLAOption: changeActiveSLAOption,
@@ -276,0 +277,0 @@ storePreferencesData: storePreferencesData,

lib/locales/en.json

@@ -94,8 +94,12 @@ {
   "pickupPointsModal.marker": "Geolocation marker",
-  "pickupPointsModal.geolocationDiscover": "We'll suggest the pickup point closest to you",
+  "pickupPointsModal.geolocationDiscover":
+    "We'll suggest the pickup point closest to you",
   "pickupPointsModal.geolocationAsk": "For that, we need your location",
   "pickupPointsModal.geolocationManual": "Search for an address manually",
-  "pickupPointsModal.geolocationAllow": "Select \"Allow\" in the prompt on your browser",
+  "pickupPointsModal.geolocationAllow":
+    "Select \"Allow\" in the prompt on your browser",
   "pickupPointsModal.geolocationWaiting": "Waiting on your authorization",
-  "pickupPointsModal.geolocationSearching": "Searching for your location"
+  "pickupPointsModal.geolocationSearching": "Searching for your location",
+  "pickupPointsModal.distance": "{distanceValue} km",
+  "pickupPointsModal.askGeolocationAccept": "Use my current location"
 }

lib/locales/es.json

@@ -94,8 +94,13 @@ {
   "pickupPointsModal.marker": "Pin de geolocalización",
-  "pickupPointsModal.geolocationDiscover": "Vamos sugerir un punto de recogida cerca de usted",
-  "pickupPointsModal.geolocationAsk": "Para esto, necesitamos saber su ubicación",
+  "pickupPointsModal.geolocationDiscover":
+    "Vamos sugerir un punto de recogida cerca de usted",
+  "pickupPointsModal.geolocationAsk":
+    "Para esto, necesitamos saber su ubicación",
   "pickupPointsModal.geolocationManual": "Buscar un punto manualmente",
-  "pickupPointsModal.geolocationAllow": "Seleccione \"Permitir\" en la alerta que aparece en su navegador",
+  "pickupPointsModal.geolocationAllow":
+    "Seleccione \"Permitir\" en la alerta que aparece en su navegador",
   "pickupPointsModal.geolocationWaiting": "Esperando su autorización",
-  "pickupPointsModal.geolocationSearching": "Buscando su ubicación"
+  "pickupPointsModal.geolocationSearching": "Buscando su ubicación",
+  "pickupPointsModal.distance": "{distanceValue} km",
+  "pickupPointsModal.askGeolocationAccept": "Usar mi ubicación actual"
 }

lib/locales/pt.json

@@ -92,8 +92,13 @@ {
   "pickupPointsModal.marker": "Pin de geolocalização",
-  "pickupPointsModal.geolocationDiscover": "Vamos sugerir o ponto de retirada mais perto de você",
-  "pickupPointsModal.geolocationAsk": "Para isso, precisamos saber sua localização",
+  "pickupPointsModal.geolocationDiscover":
+    "Vamos sugerir o ponto de retirada mais perto de você",
+  "pickupPointsModal.geolocationAsk":
+    "Para isso, precisamos saber sua localização",
   "pickupPointsModal.geolocationManual": "Procurar endereço manualmente",
-  "pickupPointsModal.geolocationAllow": "Selecione \"Permitir\" no alerta exibido no seu navegador",
+  "pickupPointsModal.geolocationAllow":
+    "Selecione \"Permitir\" no alerta exibido no seu navegador",
   "pickupPointsModal.geolocationWaiting": "Aguardando sua autorização",
-  "pickupPointsModal.geolocationSearching": "Buscando sua localização"
+  "pickupPointsModal.geolocationSearching": "Buscando sua localização",
+  "pickupPointsModal.distance": "{distanceValue} km",
+  "pickupPointsModal.askGeolocationAccept": "Usar minha localização atual"
 }

lib/utils/Currency.js

@@ -5,2 +5,3 @@ 'use strict';
 exports.formatCurrency = formatCurrency;
+exports.formatNumber = formatNumber;
 function formatCurrency(_ref) {
@@ -34,2 +35,26 @@ var value = _ref.value,
   return startsWithCurrencySymbol ? currencySymbol + ' ' + value : value + ' ' + currencySymbol;
+}
+
+function formatNumber(_ref2) {
+  var value = _ref2.value,
+      storePreferencesData = _ref2.storePreferencesData;
+  var currencySymbol = storePreferencesData.currencySymbol,
+      currencyFormatInfo = storePreferencesData.currencyFormatInfo;
+  var currencyDecimalSeparator = currencyFormatInfo.currencyDecimalSeparator,
+      currencyGroupSeparator = currencyFormatInfo.currencyGroupSeparator;
+
+
+  value = value.toFixed(1);
+
+  var valueDividedInParts = value.split('.');
+
+  var decimalPart = valueDividedInParts[1];
+
+  var wholePart = valueDividedInParts[0];
+
+  wholePart = wholePart.replace(/\B(?=(\d{3})+(?!\d))/g, currencyGroupSeparator);
+
+  value = decimalPart > 0 ? wholePart + currencyDecimalSeparator + decimalPart : wholePart;
+
+  return value;
 }

package.json

 {
   "name": "@vtex/pickup-points-modal",
-  "version": "0.1.27",
+  "version": "0.1.28",
   "description": "Pickup Points Modal React component",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

223247

increased by2.96%

Number of package files

66

increased by1.54%

Lines of code

4930

increased by2.82%

Worsened metrics

Number of low supply chain risk alerts

14

increased by7.69%

No dependency changes