import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; import { Spring, animated } from 'react-spring'; import { isUndefined } from 'lodash'; import { Link } from 'gatsby'; import config from '../utils/config'; const Result = styled.div` text-align: center; svg { font-size: 3rem; } .info { margin: 3rem 1rem; } `; const OrderId = styled.span` font-weight: 700; color: ${config.primaryColor}; `; const BuyBtn = styled(Link)` width: 100%; margin-top: 3rem; `; class PaymentConfirmed extends React.Component { constructor(props) { super(props); this.state = { isVisible: false }; } componentDidMount() { const isMobile = !isUndefined(global.window) ? global.window.innerWidth < 768 : false; setTimeout(() => { this.setState({ isVisible: true }); // const scroll = new SmoothScroll(); // scroll.animateScroll(isMobile ? 1100 : 450); }, 200); } render() { const { isVisible } = this.state; const { orderData } = this.props; return ( <> <Spring native from={{ opacity: 0 }} to={{ opacity: isVisible ? 1 : 0 }}> {stylesProps => ( <animated.div style={stylesProps}> <Result> <i className="fas fa-check-circle" /> <h3 className="is-size-5 is-uppercase has-text-weight-bold"> Payment complete </h3> <p className="info"> Order code is <OrderId>#{orderData.orderId}</OrderId> <br /> Please check your email <br /> for delivery updates. </p> </Result> <BuyBtn to="/" className="button is-dark is-large is-radiusless is-uppercase"> Continue Shopping </BuyBtn> </animated.div> )} </Spring> </> ); } } PaymentConfirmed.propTypes = { orderData: PropTypes.object.isRequired, }; export default PaymentConfirmed;