@woosmap/ui 3.47.0 → 3.48.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/package.json +1 -1
  2. package/src/components/Demo/AddressDemo.js +84 -63
  3. package/src/components/Demo/MerchantDemo.styl +11 -12
  4. package/src/styles/console/MerchantDemo.styl +210 -0
  5. package/src/styles/console/fonts.styl +1 -1
  6. package/src/styles/style-website.styl +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@woosmap/ui",
3
- "version": "3.47.0",
3
+ "version": "3.48.0",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/WebGeoServices/ui.git"
package/src/components/Demo/AddressDemo.js CHANGED
@@ -2,17 +2,17 @@
2
2
  import React, { Component } from 'react';
3
3
  import axios from 'axios';
4
4
  import cl from 'classnames';
5
- import GoogleMapReact from 'google-map-react';
6
5
  import Demo from './SkeletonDemo';
7
- import AddressAutocomplete from '../Woosmap/AddressAutocomplete';
8
- import Marker from '../Map/Marker';
9
6
  import Constants from '../../Constants';
10
- import { viewpoint } from '../Map/drawOnMap';
7
+ import { createWoosmapMap, WoosmapMapBoundingBox } from '../Map/drawOnMap';
11
8
  import Button from '../Button/Button';
12
9
  import ButtonGroup from '../Button/ButtonGroup';
13
10
  import CountrySelect from '../Select/CountrySelect';
14
11
  import { tr } from '../utils/locale';
15
12
  import Input from '../Input/Input';
13
+ import Script from '../utils/Script';
14
+ import markerIcon from '../../images/marker.png';
15
+ import AddressAutocomplete from '../Woosmap/AddressAutocomplete';
16
16
 
17
17
  const languages = [
18
18
  { value: 'fr', label: 'French' },
@@ -49,6 +49,11 @@ export default class AddressDemo extends Component {
49
49
  this.requestGeocodeUrl = 'https://api.woosmap.com/address/geocode/json';
50
50
  this.inputRef = React.createRef();
51
51
  this.addressAutocompleteRef = React.createRef();
52
+ this.demoRef = React.createRef();
53
+ }
54
+
55
+ componentDidMount() {
56
+ this.displayMap();
52
57
  }
53
58
 
54
59
  componentWillUnmount() {
@@ -80,9 +85,9 @@ export default class AddressDemo extends Component {
80
85
  };
81
86
  if (usecase === 'geocode') {
82
87
  // eslint-disable-next-line prefer-destructuring
83
- state.selectedLocality = response.data.results[0];
88
+ state.selectedAddress = response.data.results[0];
84
89
  }
85
- this.setState(state);
90
+ this.setState(state, this.displayOnMap);
86
91
  }
87
92
  })
88
93
  .catch((error) => {
@@ -107,12 +112,15 @@ export default class AddressDemo extends Component {
107
112
  })
108
113
  .then((response) => {
109
114
  if (this.mounted) {
110
- this.setState({
111
- error: null,
112
- showDetails: true,
113
- response: response.data.result,
114
- selectedLocality: response.data.result,
115
- });
115
+ this.setState(
116
+ {
117
+ error: null,
118
+ showDetails: true,
119
+ response: response.data.result,
120
+ selectedAddress: response.data.result,
121
+ },
122
+ this.displayOnMap
123
+ );
116
124
  }
117
125
  })
118
126
  .catch((error) => {
@@ -122,12 +130,10 @@ export default class AddressDemo extends Component {
122
130
  };
123
131
 
124
132
  getRequestparams = () => {
125
- const { input, geocodeInput, selectedLocality, language, countries, showDetails, usecase, geometry } =
126
- this.state;
133
+ const { input, geocodeInput, language, countries, showDetails, usecase, geometry } = this.state;
127
134
  if (showDetails) {
128
135
  const detailsParam = {
129
136
  key: Constants.woosmapKey,
130
- public_id: selectedLocality.public_id,
131
137
  };
132
138
  if (geometry) {
133
139
  detailsParam.fields = 'geometry';
@@ -154,14 +160,37 @@ export default class AddressDemo extends Component {
154
160
 
155
161
  displayOnMap = () => {
156
162
  const { selectedAddress } = this.state;
157
- if (this.viewport) {
158
- this.viewport.setMap(null);
159
- }
160
- if (this.map && selectedAddress) {
161
- if (selectedAddress.viewpoint) {
162
- this.viewport = viewpoint(this.map, selectedAddress.viewpoint);
163
- this.map.fitBounds(selectedAddress.viewpoint.bounds, 10);
163
+
164
+ if (this.map && selectedAddress?.geometry.location) {
165
+ if (this.marker) {
166
+ this.marker.setMap(null);
167
+ this.marker = null;
168
+ }
169
+
170
+ if (this.overlay) {
171
+ this.overlay.setMap(null);
172
+ this.overlay = null;
173
+ }
174
+
175
+ this.marker = new window.woosmap.map.Marker({
176
+ icon: { url: markerIcon, scaledSize: { height: 46, width: 30 } },
177
+ position: selectedAddress.geometry.location,
178
+ map: this.map,
179
+ });
180
+
181
+ if (selectedAddress.geometry.viewport) {
182
+ const { northeast, southwest } = selectedAddress.geometry.viewport;
183
+ const bounds = {
184
+ north: northeast.lat,
185
+ east: northeast.lng,
186
+ south: southwest.lat,
187
+ west: southwest.lng,
188
+ };
189
+ this.overlay = new WoosmapMapBoundingBox(bounds);
190
+ this.overlay.setMap(this.map);
191
+ this.map.fitBounds(bounds, { top: 70, bottom: 70, left: 70, right: 70 });
164
192
  } else {
193
+ this.map.setCenter(selectedAddress.geometry.location);
165
194
  this.map.setZoom(10);
166
195
  }
167
196
  }
@@ -171,7 +200,7 @@ export default class AddressDemo extends Component {
171
200
  this.setState(
172
201
  {
173
202
  error: null,
174
- selectedLocality: address,
203
+ selectedAddress: address,
175
204
  },
176
205
  this.requestAddress
177
206
  );
@@ -194,7 +223,7 @@ export default class AddressDemo extends Component {
194
223
  key="autocomplete"
195
224
  active={usecase === 'autocomplete'}
196
225
  onClick={() => {
197
- this.setState({ usecase: 'autocomplete', selectedLocality: null, showDetails: false });
226
+ this.setState({ usecase: 'autocomplete', selectedAddress: null, showDetails: false });
198
227
  }}
199
228
  label={tr('Autocomplete')}
200
229
  />
@@ -203,7 +232,7 @@ export default class AddressDemo extends Component {
203
232
  key="geocode"
204
233
  active={usecase === 'geocode'}
205
234
  onClick={() => {
206
- this.setState({ usecase: 'geocode', selectedLocality: null, showDetails: false });
235
+ this.setState({ usecase: 'geocode', selectedAddress: null, showDetails: false });
207
236
  }}
208
237
  label={tr('Geocode')}
209
238
  />
@@ -296,14 +325,14 @@ export default class AddressDemo extends Component {
296
325
  };
297
326
 
298
327
  renderAddress = () => {
299
- const { selectedLocality, geometry } = this.state;
328
+ const { selectedAddress, geometry } = this.state;
300
329
  if (geometry) {
301
330
  return null;
302
331
  }
303
332
  let addressComponents = [];
304
- const hasComponents = selectedLocality && selectedLocality.address_components;
333
+ const hasComponents = selectedAddress && selectedAddress.address_components;
305
334
  if (hasComponents) {
306
- addressComponents = selectedLocality.address_components;
335
+ addressComponents = selectedAddress.address_components;
307
336
  }
308
337
  let shippingAddress = '';
309
338
  let shippingAddress2 = '';
@@ -393,29 +422,17 @@ export default class AddressDemo extends Component {
393
422
  );
394
423
  };
395
424
 
396
- renderMap = () => {
397
- const { selectedLocality } = this.state;
425
+ displayMap = () => {
426
+ if (this.timeoutMap) {
427
+ clearTimeout(this.timeoutMap);
428
+ }
398
429
 
399
- const location =
400
- selectedLocality && selectedLocality.geometry
401
- ? selectedLocality.geometry.location
402
- : { lat: 48.863350992156306, lng: 2.3484066674237796 };
403
- const marker =
404
- selectedLocality && selectedLocality.geometry ? <Marker lat={location.lat} lng={location.lng} /> : null;
405
- return (
406
- <GoogleMapReact
407
- defaultZoom={10}
408
- center={[location.lat, location.lng]}
409
- bootstrapURLKeys={{ key: Constants.gmapKey, libraries: ['geometry', 'places'] }}
410
- yesIWantToUseGoogleMapApiInternals
411
- onGoogleApiLoaded={({ map }) => {
412
- this.map = map;
413
- this.displayOnMap();
414
- }}
415
- >
416
- {marker}
417
- </GoogleMapReact>
418
- );
430
+ if (window.woosmap && window.woosmap.map && this.demoRef.current) {
431
+ window.woosmap.map.config.setApiKey(Constants.woosmapKey);
432
+ this.map = createWoosmapMap(this.demoRef.current.getMap());
433
+ } else {
434
+ this.timeoutMap = setTimeout(this.displayMap, 300);
435
+ }
419
436
  };
420
437
 
421
438
  render() {
@@ -429,19 +446,23 @@ export default class AddressDemo extends Component {
429
446
  }
430
447
  }
431
448
  return (
432
- <Demo
433
- noheader
434
- id="address-demo"
435
- className="demo--address"
436
- footerFilters={this.renderFooterFilters()}
437
- headerFilters={this.renderHeaderFilters()}
438
- request={request}
439
- params={this.getRequestparams()}
440
- referer="http://localhost/"
441
- response={error || response}
442
- result={this.renderAddress()}
443
- map={this.renderMap()}
444
- />
449
+ <>
450
+ <Script url="https://sdk.woosmap.com/map/map.js" />
451
+ <Demo
452
+ noheader
453
+ id="address-demo"
454
+ className="demo--address"
455
+ footerFilters={this.renderFooterFilters()}
456
+ headerFilters={this.renderHeaderFilters()}
457
+ request={request}
458
+ params={this.getRequestparams()}
459
+ referer="http://localhost/"
460
+ response={error || response}
461
+ result={this.renderAddress()}
462
+ ref={this.demoRef}
463
+ withMap
464
+ />
465
+ </>
445
466
  );
446
467
  }
447
468
  }
package/src/components/Demo/MerchantDemo.styl CHANGED
@@ -68,18 +68,17 @@
68
68
  .merchant__mobile--details--dirty &
69
69
  opacity 1
70
70
  &__button
71
- &.btn
72
- sq(3)
73
- position absolute
74
- background-color transparent
75
- left -.6rem
76
- padding 0
77
- display flex
78
- align-items center
79
- justify-content center
80
- flex-shrink 0
81
- &:hover
82
- background-color $dark30
71
+ sq(3)
72
+ position absolute
73
+ background-color transparent
74
+ left -.6rem
75
+ padding 0
76
+ display flex
77
+ align-items center
78
+ justify-content center
79
+ flex-shrink 0
80
+ &:hover
81
+ background-color $dark30
83
82
 
84
83
  &__section
85
84
  padding 1.4rem 2rem
package/src/styles/console/MerchantDemo.styl ADDED
@@ -0,0 +1,210 @@
1
+ .merchant
2
+ &__mobilewrapper
3
+ position relative
4
+ height 58.2rem
5
+ overflow hidden
6
+ flex-grow 1
7
+ &__mobilecontainer
8
+ position relative
9
+ height 100%
10
+ width 28rem
11
+ margin auto
12
+ &__title
13
+ text-align center
14
+ color $light
15
+ font-size 1.7rem
16
+ font-weight 600
17
+ margin 1rem 0 2rem 0
18
+ &__mobile
19
+ width 100%
20
+ height 52.9rem
21
+ background-color $light
22
+ br(2)
23
+ overflow hidden
24
+ &--dirty
25
+ &--details--dirty
26
+ .merchant__mobile__header
27
+ background #666767
28
+ &--clean
29
+ &--details
30
+ .merchant__mobile__header
31
+ background #4F70FF
32
+ &--details
33
+ height 52.9rem
34
+ &__header
35
+ padding 1.6rem
36
+ color #fff
37
+ text-transform uppercase
38
+ font-size 1.7rem
39
+ font-weight 600
40
+ &__nav
41
+ &__icons
42
+ flexSpread()
43
+ &__icons
44
+ img
45
+ max-height 1.2rem
46
+ &__nav
47
+ margin-top 2rem
48
+ position relative
49
+ .merchant__mobile--details &
50
+ .merchant__mobile--details--dirty &
51
+ flexAxis()
52
+ &__avatar
53
+ max-width 3.2rem
54
+ &__back
55
+ max-width 1.4rem
56
+ opacity 0
57
+ .merchant__mobile--details &
58
+ .merchant__mobile--details--dirty &
59
+ opacity 1
60
+ &__button
61
+ position absolute
62
+ background-color transparent
63
+ left -1.2rem
64
+ &:hover
65
+ background-color $dark30
66
+
67
+ &__section
68
+ font-size 1.5rem
69
+ padding 1.4rem 2rem
70
+ height 100%
71
+ overflow auto
72
+ .merchant__mobile--details &
73
+ padding 0
74
+ .merchant__mobile--details--dirty &
75
+ border .1rem solid $dark20
76
+ background-color $dark3
77
+ margin 2rem
78
+ br(1)
79
+ height auto
80
+ overflow hidden
81
+ &__map
82
+ overflow hidden
83
+ height 20rem
84
+ &__no-map
85
+ height 6rem
86
+ &__date
87
+ color #C8C8C7
88
+ font-size 1.4rem
89
+ margin-bottom 1.6rem
90
+ .merchant__mobile--details &
91
+ .merchant__mobile--details--dirty &
92
+ text-align center
93
+ margin .4rem 0 0 0
94
+ .merchant__mobile--details--dirty &
95
+ margin 0 0 2rem 0
96
+ &__transaction
97
+ flexSpread()
98
+ br(1)
99
+ trans()
100
+ cursor pointer
101
+ height 6.2rem
102
+ padding .8rem
103
+ box-shadow 0 0 1rem $dark10
104
+ width 100%
105
+ margin-bottom 1.2rem
106
+ &:hover
107
+ background-color #666767
108
+ .merchant__mobile--clean &
109
+ background-color #4F70FF
110
+ .merchant__mobile__section__transaction
111
+ &__link
112
+ color $light
113
+ &__info
114
+ &__name
115
+ color $light
116
+ &__date
117
+ color $light50
118
+ &__price
119
+ color $light
120
+ &__link
121
+ color #999
122
+ margin 0 .6rem 0 1.4rem
123
+ img
124
+ max-width .7rem
125
+ &__info
126
+ width 100%
127
+ min-width 0
128
+ margin-right 1.2rem
129
+ .merchant__mobile--clean &
130
+ flexMiddle()
131
+ .merchant__mobile--details &
132
+ margin 0
133
+ &__address
134
+ padding 1rem 2rem
135
+ color#999
136
+ text-align center
137
+ &__logo
138
+ sq(4.6)
139
+ br(50)
140
+ position relative
141
+ margin-right 1.2rem
142
+ flex-shrink 0
143
+ .merchant__mobile--details &
144
+ width 100%
145
+ height 5rem
146
+ img
147
+ ellipsis()
148
+ br(50)
149
+ sq(4.6)
150
+ background #fff
151
+ border .1rem solid #f1f1f1
152
+ box-shadow 0 0 .6rem $dark10
153
+
154
+ .merchant__mobile--details &
155
+ sq(8)
156
+ position absolute
157
+ left calc(50% - 4rem)
158
+ top -4rem
159
+ box-shadow 0 0 1rem $dark25
160
+ border .3rem solid #fff
161
+ &__name
162
+ ellipsis()
163
+ font-weight 500
164
+ .merchant__mobile--details &
165
+ .merchant__mobile--details--dirty &
166
+ text-align center
167
+ font-size 2rem
168
+ &__date
169
+ color #7E7F7F
170
+ font-size 1.2rem
171
+ &__price
172
+ font-weight 600
173
+ .merchant__mobile--details &
174
+ .merchant__mobile--details--dirty &
175
+ margin-top 1rem
176
+ font-size 5rem
177
+ line-height 1
178
+ text-align center
179
+ font-weight 400
180
+ .merchant__mobile--details--dirty &
181
+ font-size 3.5rem
182
+ @media screen and (max-width 720px)
183
+ .merchant
184
+ &__mobile
185
+ &--dirty
186
+ border 1rem solid #666767
187
+ &--clean
188
+ border 1rem solid $primary
189
+
190
+ @media screen and (max-width 660px)
191
+ .merchant
192
+ &__mobilewrapper
193
+ margin-right 0 !important
194
+ @media screen and (max-width 370px)
195
+ .merchant
196
+ &__mobilewrapper
197
+ width 100%
198
+ &__mobilecontainer
199
+ width 100%
200
+ &__title
201
+ color #454545
202
+ &__mobile__section__transaction
203
+ font-size 85%
204
+ @media screen and (max-width 350px)
205
+ .merchant
206
+ &__mobile__section__transaction__info__logo
207
+ &__mobile__section__transaction__info__logo img
208
+ sq(3.6)
209
+
210
+
package/src/styles/console/fonts.styl CHANGED
@@ -1 +1 @@
1
- @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap')
1
+ @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Roboto+Mono:wght@400;600&display=swap')
package/src/styles/style-website.styl CHANGED
@@ -1,8 +1,8 @@
1
1
  // Common styles - Don't change order
2
+ @import "./website/fonts.styl"
2
3
  @import "./commons/reset.styl"
3
4
 
4
5
  // Specicif style - Do not change order
5
- @import "./website/fonts.styl"
6
6
  @import "./website/mixins.styl"
7
7
  @import "./website/variables.styl"
8
8
  @import "./website/colors.styl"