@woosmap/ui 4.186.0 → 4.187.0

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({});