@woosmap/ui 4.185.6 → 4.187.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@woosmap/ui",
-  "version": "4.185.6",
+  "version": "4.187.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/WebGeoServices/ui.git"

package/src/components/Card/Card.js

@@ -15,7 +15,6 @@ import distanceImg from '../../images/products/product-distance.png';
 import addressImg from '../../images/products/product-address.png';
 import mapImg from '../../images/products/product-map.png';
 import trafficImg from '../../images/products/product-traffic.png';
-import merchantImg from '../../images/products/product-merchant.png';
 import indoorImg from '../../images/products/product-indoor.png';
 import what3wordsImg from '../../images/products/product-what3words.png';
 import transitImg from '../../images/products/product-transit.png';
@@ -30,7 +29,6 @@ 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';
 import what3wordsImgSq from '../../images/products/product-what3words-sq.png';
 import transitImgSq from '../../images/products/product-transit-sq.png';
@@ -47,7 +45,6 @@ const productImg = {
     ADDRESS: addressImg,
     MAP: mapImg,
     TRAFFIC: trafficImg,
-    MERCHANTS: merchantImg,
     INDOOR: indoorImg,
     W3W: what3wordsImg,
     TRANSIT: transitImg,
@@ -64,7 +61,6 @@ const productImgSq = {
     ADDRESS: addressImgSq,
     MAP: mapImgSq,
     TRAFFIC: trafficImgSq,
-    MERCHANTS: merchantImgSq,
     INDOOR: indoorImgSq,
     W3W: what3wordsImgSq,
     TRANSIT: transitImgSq,
@@ -332,7 +328,6 @@ Card.propTypes = {
         'ADDRESS',
         'MAP',
         'TRAFFIC',
-        'MERCHANTS',
         'LOCALITIES',
         'INDOOR',
         'W3W',

package/src/components/Card/Card.stories.js

@@ -88,9 +88,6 @@ function SimpleCardTemplate() {
                 <Tooltip text="Mapping" direction="n" product="STORES">
                     <Label round size="nano" label="Mg" tooltip="Mapping" product="STORES" />
                 </Tooltip>
-                <Tooltip text="Merchant" direction="n" product="MERCHANTS">
-                    <Label round size="nano" label="Me" tooltip="Merchant" product="MERCHANTS" />
-                </Tooltip>
             </SimpleCard>
         </>
     );
@@ -119,9 +116,6 @@ function SimpleCardSelectedTemplate() {
             <Tooltip text="Mapping" direction="n" product="STORES">
                 <Label round size="nano" label="Mg" tooltip="Mapping" product="STORES" />
             </Tooltip>
-            <Tooltip text="Merchant" direction="n" product="MERCHANTS">
-                <Label round size="nano" label="Me" tooltip="Merchant" product="MERCHANTS" />
-            </Tooltip>
         </SimpleCard>
     );
 }

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

@@ -2,7 +2,6 @@ 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';
@@ -32,7 +31,6 @@ 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,
@@ -65,7 +63,6 @@ function Template() {
             <TrackEventContext.Provider value={trackEvent}>
                 <LocalitiesDemo />
                 <SearchDemo />
-                <MerchantDemo />
                 <MapDemo />
                 <DistanceDemo />
                 <GeolocationDemo />
@@ -83,7 +80,6 @@ function TemplateEn() {
             <TrackEventContext.Provider value={trackEvent}>
                 <LocalitiesDemo />
                 <SearchDemo />
-                <MerchantDemo />
                 <MapDemo />
                 <DistanceDemo />
                 <GeolocationDemo />

package/src/components/Demo/skeletondemo.styl

@@ -20,8 +20,7 @@
         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
@@ -369,5 +368,3 @@
             border-right 0
         &__map
             height 32rem
-            .demo--merchant &
-                height auto

package/src/components/Icon/Icon.js

@@ -210,7 +210,6 @@ 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';
@@ -817,7 +816,6 @@ const ProductsIcons = {
     localities: Localities,
     mapping: Mapping,
     maps: Map,
-    merchant: Merchant,
     multisearch: MultiSearch,
     storelocator: StoreLocator,
     stores: Stores,

package/src/components/Icon/WebSiteIcon.js

@@ -209,6 +209,27 @@ import { ReactComponent as StockAvailability } from '../../icons/stock-availabil
 import { ReactComponent as StoreGog } from '../../icons/store-cog.svg';
 import { ReactComponent as StoreInfo } from '../../icons/store-info.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';
+import { ReactComponent as StoreLocator } from '../../icons/storelocator.svg';
+import { ReactComponent as MultiSearch } from '../../icons/multisearch.svg';
+import { ReactComponent as Mapping } from '../../icons/mapping.svg';
+import { ReactComponent as Connectors } from '../../icons/connectors.svg';
+import { ReactComponent as Showcases } from '../../icons/showcases.svg';
+import { ReactComponent as Indoor } from '../../icons/indoor.svg';
+import { ReactComponent as Address } from '../../icons/address.svg';
+import { ReactComponent as Distance } from '../../icons/distance.svg';
+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 SocialFacebook } from '../../icons/social-facebook.svg';
+import { ReactComponent as SocialGithub } from '../../icons/social-github.svg';
+import { ReactComponent as SocialGoogle } from '../../icons/social-google.svg';
+import { ReactComponent as SocialLinkedin } from '../../icons/social-linkedin.svg';
+import { ReactComponent as SocialTwitter } from '../../icons/social-twitter.svg';
+
 const WebsiteIcons = {
     autocomplete: Autocomplete,
     'autocomplete-check': AutocompleteCheck,
@@ -418,13 +439,32 @@ const MapDemo = {
     'map-high-speed-train': MapHighSpeedTrain,
 };
 
-
+const ProductsIcons = {
+    address: Address,
+    connectors: Connectors,
+    distance: Distance,
+    geofencing: Geofencing,
+    geolocation: Geolocation,
+    indoor: Indoor,
+    localities: Localities,
+    mapping: Mapping,
+    maps: Map,
+    multisearch: MultiSearch,
+    storelocator: StoreLocator,
+    stores: Stores,
+    traffic: Traffic,
+    showcases: Showcases,
+};
 
 const Icons = {
     ...WebsiteIcons,
-    ...ConsoleIcons,
     ...ProductsIcons,
     ...MapDemo,
+    'social-facebook': SocialFacebook,
+    'social-github': SocialGithub,
+    'social-google': SocialGoogle,
+    'social-linkedin': SocialLinkedin,
+    'social-twitter': SocialTwitter,
 };
 
 class Icon extends Component {
@@ -464,6 +504,8 @@ Icon.propTypes = {
 };
 
 export default Object.assign(Icon, {
+    Icons,
     WebsiteIcons,
+    ProductsIcons,
     MapDemo,
 });

package/src/components/Label/Label.js

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

package/src/components/Tooltip/Tooltip.js

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

package/src/components/UseCase/UseCase.js

@@ -11,7 +11,6 @@ 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 = {
@@ -24,7 +23,6 @@ const productImg = {
     ADDRESS: addressImgSq,
     MAP: mapImgSq,
     TRAFFIC: trafficImgSq,
-    MERCHANTS: merchantImgSq,
     INDOOR: indoorImgSq,
 };
 

package/src/index.js

@@ -54,7 +54,6 @@ 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,9 +1,7 @@
-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/Icon';
+export { default as Icon } from './components/Icon/WebSiteIcon';
 
 export { default as Input } from './components/Input/Input';
 export { default as PasswordStrengthBar } from './components/PasswordStrengthBar/PasswordStrengthBar';
@@ -16,14 +14,12 @@ 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/Demo/MerchantDemo.js

@@ -1,633 +0,0 @@
-import React, { Component } from 'react';
-import GoogleMapReact from 'google-map-react';
-import PropTypes from 'prop-types';
-import { motion, AnimatePresence } from 'framer-motion';
-import Demo from './SkeletonDemo';
-import Marker from '../Map/Marker';
-import Button from '../Button/Button';
-import { viewport, boundsFromViewport } from '../Map/drawOnMap';
-import Constants from '../../Constants';
-import { tr } from '../utils/locale';
-import IphoneTime from '../../images/iphone-time.png';
-import IphoneIcons from '../../images/iphone-right-icons.png';
-import IphoneBack from '../../images/iphone-back-button.png';
-import IphoneAvatar from '../../images/iphone-avatar.png';
-import McDo from '../../images/mcdo.png';
-import Carrefour from '../../images/carrefour.png';
-import Apple from '../../images/apple.png';
-import Zara from '../../images/zara.png';
-import Apollo from '../../images/apollo.png';
-import PizzaHut from '../../images/pizza-hut.png';
-import Restaurant from '../../images/restaurant_poi_icon.png';
-import TransactionChevron from '../../images/transaction-chevron.png';
-
-const transition = { ease: 'easeInOut', duration: 0.3 };
-const variants = (isPush, isPop) => ({
-    enter() {
-        return {
-            x: 0,
-            transition,
-            transitionEnd: {
-                // after animation has finished, reset the position to static
-                position: 'static',
-            },
-            // keep top "layer" of animation as a fixed position
-            ...(isPush
-                ? {
-                      position: 'absolute',
-                      top: 0,
-                      right: 0,
-                      left: 0,
-                      bottom: 0,
-                  }
-                : {}),
-        };
-    },
-    initial() {
-        return {
-            x: isPush ? '100%' : '-25%',
-            transition,
-            // keep top "layer" of animation as a fixed position
-            position: 'absolute',
-            top: 0,
-            right: 0,
-            left: 0,
-            bottom: 0,
-        };
-    },
-
-    // an updated history.action is provided in AnimatedSwitch via "custom" prop for AnimatePresence
-    exit() {
-        return {
-            x: isPop ? '100%' : '-10%',
-            zIndex: isPop ? 1 : -1,
-            transitionStart: {
-                // after animation has finished, reset the position to static
-                zIndex: -1,
-            },
-            transition,
-
-            // keep top "layer" of animation as a fixed position
-            // this will, however, reset the scroll position of the page being dismissed
-            ...(isPop
-                ? {
-                      position: 'absolute',
-                      top: 0,
-                      right: 0,
-                      left: 0,
-                      bottom: 0,
-                  }
-                : {}),
-        };
-    },
-});
-const request = {
-    merchants: [
-        {
-            dirty_name: 'MCDO UK 2231 EP',
-            country: 'GB',
-            merchant_id: '234482729011',
-        },
-        {
-            dirty_name: 'Zara Fashion Retail, S.A.',
-            country: 'IT',
-            merchant_id: '*44532UY2T33219',
-        },
-        {
-            dirty_name: 'APOLLO PHARMACY BANGALORE IN',
-            country: 'IN',
-        },
-        {
-            dirty_name: 'PIZZA HUT - SHOP 157',
-        },
-        {
-            dirty_name: 'CARREFOUR CITY 3112846',
-            country: 'FR',
-            merchant_id: '9651781125',
-        },
-        {
-            dirty_name: 'ITUNES.COM/BILL',
-            country: 'IE',
-            merchant_id: '2070070200925',
-        },
-        {
-            dirty_name: 'Pepa SL Gracia',
-            country: 'ES',
-            merchant_id: '34J21189',
-        },
-    ],
-};
-const response = {
-    merchants: [
-        {
-            dirty_name: 'MCDO UK 2231 EP',
-            clean_name: "McDonald's",
-            date: '12:42',
-            price: '£10',
-            status: 'OK',
-            logo: '956bcb3591a8976ff94871a59b09eecc',
-            logo_url: 'https://api.woosmap.com/merchants/logos/956bcb3591a8976ff94871a59b09eecc.png',
-            internal_logo: McDo,
-            country: 'GB',
-            merchant_id: '234482729011',
-            place_id: 'ChIJGS7Sga0cdkgR46nd-S661TM',
-        },
-        {
-            dirty_name: 'Zara Fashion Retail, S.A.',
-            clean_name: 'Zara',
-            date: '11:24',
-            price: '98€',
-            status: 'OK',
-            internal_logo: Zara,
-            logo: '72fc39033e0d9e923a0236cb874c9309',
-            logo_url: 'https://api.woosmap.com/merchants/logos/72fc39033e0d9e923a0236cb874c9309.png',
-            country: 'IT',
-            merchant_id: '*44532UY2T33219',
-            place_id: 'ChIJF2vQecLGhkcR83Zbpwpej3I',
-        },
-        {
-            dirty_name: 'APOLLO PHARMACY BANGALORE IN',
-            clean_name: 'Apollo Pharmacy',
-            date: '11:07',
-            price: '₹48',
-            status: 'OK',
-            internal_logo: Apollo,
-            logo: 'c776d3336e0d8c2b9e893e9e92b2caf7',
-            logo_url: 'https://api.woosmap.com/merchants/logos/c776d3336e0d8c2b9e893e9e92b2caf7.png',
-            country: 'IN',
-        },
-        {
-            dirty_name: 'PIZZA HUT - SHOP 157',
-            clean_name: 'Pizza Hut',
-            date: '10:36',
-            price: '$12',
-            status: 'OK',
-            internal_logo: PizzaHut,
-            logo: 'd5463410f32a5f497459ac79552d3ce3',
-            logo_url: 'https://api.woosmap.com/merchants/logos/d5463410f32a5f497459ac79552d3ce3.png',
-            country: '',
-        },
-        {
-            dirty_name: 'CARREFOUR CITY 3112846',
-            clean_name: 'Carrefour City',
-            date: '10:07',
-            price: '77€',
-            status: 'OK',
-            internal_logo: Carrefour,
-            logo: '08ee8a3cecbcd3b7d9103bcf0e04db7e',
-            logo_url: 'https://api.woosmap.com/merchants/logos/08ee8a3cecbcd3b7d9103bcf0e04db7e.png',
-            country: 'FR',
-            merchant_id: '9651781125',
-            place_id: 'ChIJJ7ZEZDUnVQ0Ru5gudUqdvKM',
-        },
-        {
-            dirty_name: 'ITUNES.COM/BILL',
-            clean_name: 'Apple',
-            status: 'OK',
-            date: '09:14',
-            price: '2€99',
-            internal_logo: Apple,
-            logo: '5eb75a5239b76287f44021f8e6e1bd41',
-            logo_url: 'https://api.woosmap.com/merchants/logos/5eb75a5239b76287f44021f8e6e1bd41.png',
-            country: 'IE',
-            merchant_id: '2070070200925',
-            place_id: '',
-        },
-        {
-            status: 'OK',
-            clean_name: '',
-            logo: '',
-            logo_url: '',
-            price: '60€',
-            country: 'ES',
-            internal_logo: Restaurant,
-            dirty_name: 'Pepa SL Gracia',
-            merchant_id: '34J21189',
-            place_id: 'ChIJZ9fQvb2ipBIRyaZy8wUqRGQ',
-        },
-    ],
-};
-
-export default class MerchantDemo extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            transaction: null,
-            place: {},
-        };
-        this.map = null;
-        this.marker = null;
-        this.viewport = null;
-    }
-
-    getRequestUrl = () => {
-        const { transaction } = this.state;
-        if (transaction) {
-            return 'https://api.woosmap.com/merchants/place';
-        }
-        return 'https://api.woosmap.com/merchants/brand';
-    };
-
-    getRequestBody = () => {
-        const { transaction } = this.state;
-        if (!transaction) {
-            return JSON.stringify(
-                {
-                    merchants: request.merchants.map((item) => ({
-                        dirty_name: item.dirty_name,
-                        country: item.country,
-                    })),
-                },
-                null,
-                2,
-            );
-        }
-        return JSON.stringify(
-            {
-                merchants: [request.merchants.find((item) => item.dirty_name === transaction.dirty_name)],
-            },
-            null,
-            2,
-        );
-    };
-
-    selectTransaction = (transaction) => {
-        this.setState({ transaction, place: {} });
-    };
-
-    // eslint-disable-next-line class-methods-use-this
-    getRequestparams = () => ({
-        private_key: '{your private key}',
-    });
-
-    getResponse = () => {
-        const { transaction } = this.state;
-        if (!transaction) {
-            return {
-                merchants: response.merchants.map((merchant) => ({
-                    dirty_name: merchant.dirty_name,
-                    clean_name: merchant.clean_name,
-                    status: 'OK',
-                    logo: merchant.logo,
-                    logo_url: merchant.logo_url,
-                    country: merchant.country,
-                    merchant_id: merchant.merchant_id,
-                })),
-            };
-        }
-        const merchant = {
-            ...response.merchants.find((item) => item.dirty_name === transaction.dirty_name),
-        };
-        delete merchant.internal_logo;
-        delete merchant.date;
-        delete merchant.price;
-        return {
-            merchants: [merchant],
-        };
-    };
-
-    getDetailsOfTransaction = () => {
-        const { transaction } = this.state;
-        if (!google.maps.places) {
-            return;
-        }
-        const placesProvider = new google.maps.places.PlacesService(document.createElement('div'));
-        placesProvider.getDetails(
-            {
-                placeId: transaction.place_id,
-                fields: [
-                    'address_component',
-                    'adr_address',
-                    'formatted_address',
-                    'geometry',
-                    'icon',
-                    'name',
-                    'place_id',
-                    'type',
-                    'url',
-                    'vicinity',
-                ],
-            },
-            (item) => {
-                this.setState({ place: item });
-            },
-        );
-    };
-
-    displayOnMap = () => {
-        const { geolocation } = this.state;
-        if (this.viewport) {
-            this.viewport.setMap(null);
-        }
-        if (this.map && geolocation) {
-            this.map.fitBounds(boundsFromViewport(geolocation.viewport), 20);
-            this.viewport = viewport(this.map, geolocation.viewport);
-        }
-    };
-
-    renderDirtyList = () => (
-        <motion.article
-            className="merchant__mobile merchant__mobile--dirty"
-            key="dirtylist"
-            initial="initial"
-            animate="enter"
-            exit="exit"
-            style={{ zIndex: '-1' }}
-            variants={variants(false, false)}
-        >
-            <header className="merchant__mobile__header">
-                <div className="merchant__mobile__header__icons">
-                    <span>
-                        <img src={IphoneTime} alt="mobile time" />
-                    </span>
-                    <span>
-                        <img src={IphoneIcons} alt="mobile icons" />
-                    </span>
-                </div>
-                <div className="merchant__mobile__header__nav">
-                    <span>
-                        <img src={IphoneBack} className="merchant__mobile__header__nav__back" alt="Back button" />
-                    </span>
-                    <span>My account</span>
-                    <span>
-                        <img src={IphoneAvatar} className="merchant__mobile__header__nav__avatar" alt="User avatar" />
-                    </span>
-                </div>
-            </header>
-            <section className="merchant__mobile__section">
-                <div className="merchant__mobile__section__date">20 April</div>
-                <ul>
-                    {response.merchants.map((item) => (
-                        <li key={item.dirty_name}>
-                            <button
-                                className="merchant__mobile__section__transaction"
-                                type="button"
-                                onClick={() => this.selectTransaction(item)}
-                            >
-                                <div className="merchant__mobile__section__transaction__info">
-                                    <div className="merchant__mobile__section__transaction__info__name">
-                                        {item.dirty_name}
-                                    </div>
-                                    <div className="merchant__mobile__section__transaction__info__date">
-                                        {item.date}
-                                    </div>
-                                </div>
-                                <div className="merchant__mobile__section__transaction__price">{item.price}</div>
-                                <div className="merchant__mobile__section__transaction__link">
-                                    <img src={TransactionChevron} alt="See transaction" />
-                                </div>
-                            </button>
-                        </li>
-                    ))}
-                </ul>
-            </section>
-        </motion.article>
-    );
-
-    renderDirtyTransaction = () => {
-        const { transaction } = this.state;
-        return (
-            <motion.article
-                key="dirtytransaction"
-                className="merchant__mobile merchant__mobile--details--dirty"
-                initial="initial"
-                animate="enter"
-                exit="exit"
-                style={{ zIndex: '1' }}
-                variants={variants(true, true)}
-            >
-                <header className="merchant__mobile__header">
-                    <div className="merchant__mobile__header__icons">
-                        <span>
-                            <img src={IphoneTime} alt="mobile time" />
-                        </span>
-                        <span>
-                            <img src={IphoneIcons} alt="mobile icons" />
-                        </span>
-                    </div>
-                    <div className="merchant__mobile__header__nav">
-                        <Button
-                            className="merchant__mobile__header__nav__button"
-                            onClick={() => this.setState({ transaction: null })}
-                        >
-                            <img src={IphoneBack} className="merchant__mobile__header__nav__back" alt="Back button" />
-                        </Button>
-                        <span className="merchant__mobile__header__nav__title">&nbsp;</span>
-                    </div>
-                </header>
-                <section className="merchant__mobile__section">
-                    <div className="merchant__mobile__section__date">20 April - {transaction.date}</div>
-                    <div className="merchant__mobile__section__transaction__info__name">{transaction.dirty_name}</div>
-                    <div className="merchant__mobile__section__transaction__price">{transaction.price}</div>
-                </section>
-            </motion.article>
-        );
-    };
-
-    renderCleanList = () => (
-        <motion.article
-            className="merchant__mobile merchant__mobile--clean"
-            key="cleanlist"
-            initial="initial"
-            animate="enter"
-            exit="exit"
-            style={{ zIndex: '-1' }}
-            variants={variants(false, false)}
-        >
-            <header className="merchant__mobile__header">
-                <div className="merchant__mobile__header__icons">
-                    <span>
-                        <img src={IphoneTime} alt="mobile time" />
-                    </span>
-                    <span>
-                        <img src={IphoneIcons} alt="mobile icons" />
-                    </span>
-                </div>
-                <div className="merchant__mobile__header__nav">
-                    <span>
-                        <img src={IphoneBack} className="merchant__mobile__header__nav__back" alt="Back button" />
-                    </span>
-                    <span>My account</span>
-                    <span>
-                        <img src={IphoneAvatar} className="merchant__mobile__header__nav__avatar" alt="User avatar" />
-                    </span>
-                </div>
-            </header>
-            <section className="merchant__mobile__section">
-                <div className="merchant__mobile__section__date">20 April</div>
-                <ul>
-                    {response.merchants.map((item) => (
-                        <li key={item.dirty_name}>
-                            <button
-                                className="merchant__mobile__section__transaction"
-                                type="button"
-                                onClick={() => this.selectTransaction(item)}
-                            >
-                                <div className="merchant__mobile__section__transaction__info">
-                                    <div className="merchant__mobile__section__transaction__info__logo">
-                                        <img src={item.internal_logo} alt={item.clean_name || item.dirty_name} />
-                                    </div>
-                                    <div className="fullw">
-                                        <div className="merchant__mobile__section__transaction__info__name">
-                                            {item.clean_name || item.dirty_name}
-                                        </div>
-                                        <div className="merchant__mobile__section__transaction__info__date">
-                                            {item.date}
-                                        </div>
-                                    </div>
-                                </div>
-                                <div className="merchant__mobile__section__transaction__price">{item.price}</div>
-                                <div className="merchant__mobile__section__transaction__link">
-                                    <img src={TransactionChevron} alt="See transaction" />
-                                </div>
-                            </button>
-                        </li>
-                    ))}
-                </ul>
-            </section>
-        </motion.article>
-    );
-
-    renderCleanTransaction = () => {
-        const { transaction, place } = this.state;
-        return (
-            <motion.article
-                key="cleantransaction"
-                className="merchant__mobile merchant__mobile--details"
-                initial="initial"
-                animate="enter"
-                exit="exit"
-                style={{ zIndex: '1' }}
-                variants={variants(true, true)}
-            >
-                <header className="merchant__mobile__header">
-                    <div className="merchant__mobile__header__icons">
-                        <span>
-                            <img src={IphoneTime} alt="mobile time" />
-                        </span>
-                        <span>
-                            <img src={IphoneIcons} alt="mobile icons" />
-                        </span>
-                    </div>
-                    <div className="merchant__mobile__header__nav">
-                        <Button
-                            className="merchant__mobile__header__nav__button"
-                            onClick={() => this.setState({ transaction: null })}
-                        >
-                            <img src={IphoneBack} className="merchant__mobile__header__nav__back" alt="Back button" />
-                        </Button>
-                        <span className="merchant__mobile__header__nav__title">
-                            {transaction.clean_name || transaction.dirty_name}
-                        </span>
-                    </div>
-                </header>
-                <section className="merchant__mobile__section">
-                    {transaction.place_id ? this.renderMap() : <div className="merchant__mobile__section__no-map" />}
-                    <div className="merchant__mobile__section__transaction__info">
-                        <div className="merchant__mobile__section__transaction__info__logo">
-                            <img
-                                src={transaction.internal_logo}
-                                alt={transaction.clean_name || transaction.dirty_name}
-                            />
-                        </div>
-                        <div className="merchant__mobile__section__transaction__info__name">
-                            {transaction.clean_name || transaction.dirty_name}
-                        </div>
-                        <div className="merchant__mobile__section__date">20 April - {transaction.date}</div>
-                        <div className="merchant__mobile__section__transaction__price">{transaction.price}</div>
-                        <div className="merchant__mobile__section__transaction__info__address">
-                            {place.formatted_address}
-                        </div>
-                    </div>
-                </section>
-            </motion.article>
-        );
-    };
-
-    renderMap = () => {
-        const { place } = this.state;
-        const marker = place.geometry ? (
-            <Marker lat={place.geometry.location.lat()} lng={place.geometry.location.lng()} />
-        ) : null;
-        return (
-            <div className="merchant__mobile__section__map">
-                <GoogleMapReact
-                    defaultZoom={10}
-                    options={{ disableDefaultUI: true }}
-                    center={
-                        place.geometry?.location
-                            ? [place.geometry.location.lat(), place.geometry.location.lng()]
-                            : [0, 0]
-                    }
-                    bootstrapURLKeys={{
-                        key: Constants.gmapKey,
-                        libraries: ['geometry', 'places'],
-                    }}
-                    yesIWantToUseGoogleMapApiInternals
-                    onGoogleApiLoaded={({ map }) => {
-                        this.map = map;
-                        this.getDetailsOfTransaction();
-                    }}
-                >
-                    {marker}
-                </GoogleMapReact>
-            </div>
-        );
-    };
-
-    renderResult = () => {
-        const { transaction } = this.state;
-        return (
-            <div className="merchant__wrapper">
-                <div className="merchant__mobilewrapper">
-                    <div className="merchant__mobilecontainer__title">Transactions</div>
-                    <div className="merchant__mobilecontainer" style={{ zIndex: 2 }}>
-                        <AnimatePresence exitBeforeEnter={false} initial={false}>
-                            {transaction ? this.renderDirtyTransaction() : this.renderDirtyList()}
-                        </AnimatePresence>
-                    </div>
-                </div>
-                <div className="merchant__mobilewrapper">
-                    <div className="merchant__mobilecontainer__title">Cleaned transactions</div>
-                    <div className="merchant__mobilecontainer" style={{ zIndex: 2 }}>
-                        <AnimatePresence exitBeforeEnter={false} initial={false}>
-                            {transaction ? this.renderCleanTransaction() : this.renderCleanList()}
-                        </AnimatePresence>
-                    </div>
-                </div>
-            </div>
-        );
-    };
-
-    render() {
-        const { noheader } = this.props;
-        const headerLabels = {
-            title: tr('Merchant API'),
-            desc: tr(
-                'An API that helps your customers better understand their payments and where they took place. Send unclear merchant names to the API to convert them into clean names to improve the UX of your transactions list and add enriched data for Europe, North America and Asia: easy-to-recognize merchant names, brand logos, Google Place id of the location.',
-            ),
-        };
-        return (
-            <Demo
-                noheader={noheader}
-                className="demo--merchant"
-                id="merchant-demo"
-                docLink="https://developers.woosmap.com/products/merchant-api/get-started/"
-                header={headerLabels}
-                request={this.getRequestUrl()}
-                params={this.getRequestparams()}
-                body={this.getRequestBody()}
-                method="POST"
-                response={this.getResponse()}
-                mainContent={this.renderResult()}
-            />
-        );
-    }
-}
-
-MerchantDemo.defaultProps = {
-    noheader: false,
-};
-MerchantDemo.propTypes = {
-    noheader: PropTypes.bool,
-};

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

@@ -1,26 +0,0 @@
-import React from 'react';
-import MerchantDemo from './MerchantDemo';
-import { changeLanguage } from '../utils/locale';
-
-const Story = {
-    title: 'demo/Merchant',
-    component: MerchantDemo,
-};
-
-export default Story;
-
-function Template() {
-    return <MerchantDemo />;
-}
-export const Merchant = Template.bind({});
-
-function TemplateNoHeader() {
-    return <MerchantDemo noheader />;
-}
-export const MerchantNoHeader = TemplateNoHeader.bind({});
-
-function TemplateNoHeaderFr() {
-    changeLanguage('fr');
-    return <MerchantDemo noheader />;
-}
-export const MerchantNoHeaderFr = TemplateNoHeaderFr.bind({});

package/src/components/Demo/MerchantDemo.styl

@@ -1,223 +0,0 @@
-.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
-