@woosmap/ui 4.184.1005 → 4.185.1

package/src/components/Demo/MerchantDemo.styl

@@ -0,0 +1,223 @@
+.merchant
+	&__wrapper
+		trans()
+		display flex
+		justify-content center
+		align-items center
+		height 100%
+		width 100%
+		zoom .9
+		padding 2rem
+		background #31436C
+		background radial-gradient(circle, #31436C 0%, #262D3E 100%)
+	&__mobilewrapper
+		trans()
+		position relative
+		margin 3rem
+	&__mobilecontainer
+		position relative
+		height 51.9rem
+		width 28rem
+		margin auto
+		box-shadow 0 0 .4rem .1rem rgba($secondary, .1)
+		br(1)
+		&__title
+			text-align center
+			font-size 1.2rem
+			font-weight 700
+			margin 0 0 1rem 0
+			color $light
+	&__mobile
+		br(1)
+		font-size 1.3rem
+		width 100%
+		background-color $light
+		overflow hidden
+		&--dirty
+		&--details--dirty
+			.merchant__mobile__header
+				background #666767
+		&--clean
+		&--details
+			.merchant__mobile__header
+				background #4F70FF
+		&--details
+			position relative
+		&__header
+			padding 1.1rem
+			color #fff
+			text-transform uppercase
+			font-weight 600
+			&__nav
+			&__icons
+				flexSpread()
+			&__icons
+				img
+					max-height .8rem
+			&__nav
+				font-weight 700
+				margin-top 1.4rem
+				position relative
+				.merchant__mobile--details &
+				.merchant__mobile--details--dirty &
+					flexAxis()
+				&__avatar
+					max-width 2.4rem
+				&__back
+					max-width 1rem
+					opacity 0
+					.merchant__mobile--details &
+					.merchant__mobile--details--dirty &
+						opacity 1
+				&__button
+					position absolute
+					background-color transparent !important
+					left -.6rem
+					padding 0
+					display flex
+					align-items center
+					justify-content center
+					flex-shrink 0
+					&:hover
+						background-color $dark30 !important
+
+		&__section
+			padding 1.4rem 2rem
+			background-color #f5f5f5
+			border-radius 0 0 1rem 1rem
+			height 45rem
+			.merchant__mobile--clean  &
+				background-color #f3f7ff
+			.merchant__mobile--details &
+				background-color $light
+				padding 0
+			.merchant__mobile--details--dirty &
+				background-color $light
+				padding 2rem
+			&__map
+				overflow hidden
+				height 20rem
+			&__no-map
+				height 6rem
+			&__date
+				color #b7b7b7
+				margin-bottom .6rem
+				.merchant__mobile--clean &
+					color #8697b1
+				.merchant__mobile--details &
+				.merchant__mobile--details--dirty &
+					text-align center
+					margin .4rem 0 0 0
+				.merchant__mobile--details--dirty &
+					margin 0 0 2rem 0
+			&__transaction
+				flexSpread()
+				br(.6)
+				trans()
+				background-color $light
+				font-size 1.3rem
+				cursor pointer
+				height 4.8rem
+				padding 0 .8rem
+				box-shadow 0 0 .3rem .1rem $dark10
+				width 100%
+				margin-bottom .8rem
+				&:hover
+					background-color #666767
+					transform translateX(.5rem)
+					.merchant__mobile--clean &
+						background-color #4F70FF
+					.merchant__mobile__section__transaction
+						&__link
+							color $light
+						&__info
+							&__name
+								color $light
+							&__date
+								color $light50
+						&__price
+							color $light
+				&__link
+					color #999
+					margin 0 .6rem 0 1.4rem
+					img
+						max-width .7rem
+				&__info
+					width 100%
+					min-width 0
+					margin-right 1.2rem
+					.merchant__mobile--clean &
+						flexMiddle()
+					.merchant__mobile--details &
+						margin 0
+					&__address
+						padding 1rem 2rem
+						color#999
+						text-align center
+					&__logo
+						sq(3)
+						br(50)
+						position relative
+						margin-right 1.2rem
+						flex-shrink 0
+						.merchant__mobile--details &
+							width 100%
+							height 5rem
+						img
+							ellipsis()
+							br(50)
+							sq(3)
+							background #fff
+							border .1rem solid #f1f1f1
+							box-shadow 0 0 .6rem $dark10
+							
+							.merchant__mobile--details &
+								sq(8)
+								position absolute
+								left calc(50% - 4rem)
+								top -4rem
+								box-shadow 0 0 1rem $dark25
+								border .3rem solid #fff
+					&__name
+						ellipsis()
+						font-weight 500
+						line-height 1.6rem
+						margin-bottom .3rem
+						.merchant__mobile--details &
+						.merchant__mobile--details--dirty &
+							text-align center
+							font-size 2rem
+					&__date
+						color #a1a1a1
+						font-size 1.2rem
+						line-height 1.4rem
+				&__price
+					font-weight 700
+					font-size 1.5rem
+					.merchant__mobile--details &
+					.merchant__mobile--details--dirty &
+						margin-top 1rem
+						font-size 5rem
+						line-height 1
+						text-align center
+						font-weight 400
+					.merchant__mobile--details--dirty &
+						font-size 3.5rem
+
+@media screen and (max-width 760px)
+	.merchant
+		&__mobilewrapper
+			margin 0 1rem
+@media screen and (max-width 660px)
+	.merchant
+		&__wrapper
+			zoom .7
+@media screen and (max-width 469px)
+	.merchant
+		&__wrapper
+			zoom .6
+@media screen and (max-width 400px)
+	.merchant
+		&__wrapper
+			zoom .45
+

package/src/components/Demo/Showcase.stories.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import DistanceDemo from './DistanceDemo';
 import GeolocationDemo from './GeolocationDemo';
 import LocalitiesDemo from './LocalitiesAllDemo';
+import MerchantDemo from './MerchantDemo';
 import MapDemo from './MapDemo';
 import SearchDemo from './SearchDemo';
 import { changeLanguage } from '../utils/locale';
@@ -31,6 +32,7 @@ class IframeCommunication extends Component {
                         name: 'showcase',
                         height: document.getElementById('root').offsetHeight + 20,
                         'localities-demo': document.getElementById('localities-demo').offsetTop,
+                        'merchant-demo': document.getElementById('merchant-demo').offsetTop,
                         'geolocation-demo': document.getElementById('geolocation-demo').offsetTop,
                         'search-demo': document.getElementById('search-demo').offsetTop,
                         'distance-demo': document.getElementById('distance-demo').offsetTop,
@@ -63,6 +65,7 @@ function Template() {
             <TrackEventContext.Provider value={trackEvent}>
                 <LocalitiesDemo />
                 <SearchDemo />
+                <MerchantDemo />
                 <MapDemo />
                 <DistanceDemo />
                 <GeolocationDemo />
@@ -80,6 +83,7 @@ function TemplateEn() {
             <TrackEventContext.Provider value={trackEvent}>
                 <LocalitiesDemo />
                 <SearchDemo />
+                <MerchantDemo />
                 <MapDemo />
                 <DistanceDemo />
                 <GeolocationDemo />

package/src/components/Demo/skeletondemo.styl

@@ -20,7 +20,8 @@
         position relative
         // box-shadow 0 0 3rem rgba($logo2, .15)
         box-shadow 0 .3rem 1rem rgba($secondary, .15)
-
+        .demo--merchant &
+            border .1rem solid $light
     &__showcase
     &__data
         display flex
@@ -368,3 +369,5 @@
             border-right 0
         &__map
             height 32rem
+            .demo--merchant &
+                height auto

package/src/components/Icon/Icon.js

@@ -210,6 +210,7 @@ import { ReactComponent as Geolocation } from '../../icons/geolocation.svg';
 import { ReactComponent as Localities } from '../../icons/localities.svg';
 import { ReactComponent as Map } from '../../icons/map.svg';
 
+import { ReactComponent as Merchant } from '../../icons/merchant.svg';
 import { ReactComponent as Stores } from '../../icons/stores.svg';
 import { ReactComponent as Traffic } from '../../icons/traffic.svg';
 import { ReactComponent as Geofencing } from '../../icons/geofencing.svg';
@@ -816,6 +817,7 @@ const ProductsIcons = {
     localities: Localities,
     mapping: Mapping,
     maps: Map,
+    merchant: Merchant,
     multisearch: MultiSearch,
     storelocator: StoreLocator,
     stores: Stores,

package/src/components/Label/Label.js

@@ -101,6 +101,7 @@ Label.propTypes = {
         'address',
         'map',
         'mapping',
+        'merchants',
         'traffic',
         'indoor',
         'w3w',

package/src/components/Tooltip/Tooltip.js

@@ -42,6 +42,7 @@ Tooltip.propTypes = {
     noDelay: PropTypes.bool,
     product: PropTypes.oneOf([
         'localities',
+        'merchants',
         'address',
         'map',
         'stores',

package/src/components/UseCase/UseCase.js

@@ -11,6 +11,7 @@ import distanceImgSq from '../../images/products/product-distance-sq.png';
 import addressImgSq from '../../images/products/product-address-sq.png';
 import mapImgSq from '../../images/products/product-map-sq.png';
 import trafficImgSq from '../../images/products/product-traffic-sq.png';
+import merchantImgSq from '../../images/products/product-merchant-sq.png';
 import indoorImgSq from '../../images/products/product-indoor-sq.png';
 
 const productImg = {
@@ -23,6 +24,7 @@ const productImg = {
     ADDRESS: addressImgSq,
     MAP: mapImgSq,
     TRAFFIC: trafficImgSq,
+    MERCHANTS: merchantImgSq,
     INDOOR: indoorImgSq,
 };
 

package/src/index.js

@@ -54,6 +54,7 @@ export { default as LocalitiesCheckoutUKDemo } from './components/Demo/Localitie
 export { default as LocalitiesCheckoutFRDemo } from './components/Demo/LocalitiesFRAddressDemo';
 export { default as LocalitiesAddressDemo } from './components/Demo/LocalitiesAddressDemo';
 export { default as LocalitiesAllDemo } from './components/Demo/LocalitiesAllDemo';
+export { default as MerchantDemo } from './components/Demo/MerchantDemo';
 export { default as GeolocationDemo } from './components/Demo/GeolocationDemo';
 export { default as DistanceDemo } from './components/Demo/DistanceDemo';
 export { default as SearchDemo } from './components/Demo/SearchDemo';

package/src/website.js

@@ -1,7 +1,9 @@
+export { changeLanguage } from './components/utils/locale';
+
 export { default as Button } from './components/Button/Button';
 export { default as Dropdown } from './components/Dropdown/Dropdown';
 export { default as Flash } from './components/Flash/Flash';
-export { default as Icon } from './components/Icon/WebSiteIcon';
+export { default as Icon } from './components/Icon/Icon';
 
 export { default as Input } from './components/Input/Input';
 export { default as PasswordStrengthBar } from './components/PasswordStrengthBar/PasswordStrengthBar';
@@ -14,12 +16,14 @@ export { default as LocalitiesCheckoutUKDemo } from './components/Demo/Localitie
 export { default as LocalitiesCheckoutFRDemo } from './components/Demo/LocalitiesFRAddressDemo';
 export { default as LocalitiesAddressDemo } from './components/Demo/LocalitiesAddressDemo';
 export { default as LocalitiesAllDemo } from './components/Demo/LocalitiesAllDemo';
+export { default as MerchantDemo } from './components/Demo/MerchantDemo';
 export { default as GeolocationDemo } from './components/Demo/GeolocationDemo';
 export { default as DistanceDemo } from './components/Demo/DistanceDemo';
 export { default as SearchDemo } from './components/Demo/SearchDemo';
 export { default as AddressDemo } from './components/Demo/AddressDemo';
 export { default as MapDemo } from './components/Demo/MapDemo';
 export { default as AddressAutocomplete } from './components/Woosmap/AddressAutocomplete';
+export { default as OfflineChatBot } from './components/OfflineChatBot/OfflineChatBot';
 export { default as CountrySelect } from './components/Select/CountrySelect';
-export { default as PricingSimulator } from './components/PricingSlider/PricingSimulator';
+export { default as PricingSimulator} from './components/PricingSlider/PricingSimulator';
 export { default as CodeSnippet } from './components/CodeSnippet/CodeSnippet';

package/src/components/Icon/Icons.js

@@ -1,7 +0,0 @@
-import dynamic from 'next/dynamic';
-
-const getIcon = async (icon) => {
-    return dynamic(() => import(`../../icons/${icon}.svg`));
-};
-
-export default getIcon;