const {

  Button,

  Col,

  Container,

  Grid,

  Jumbotron,

  Nav,

  Navbar,

  Row,

  Spinner

} = window.ReactBootstrap;

​

const CanopyConnectBtn = ({ publicAlias, consentToken, metaData }) => {

  const [handler, setHandler] = React.useState(null);

  React.useEffect(() => {

    if (!publicAlias) {

      return; // Don't do anything - will keep showing the loading spinner until a publicAlias is set

    }

    const canopyHandler = window.CanopyConnect.create({

      publicAlias,

      consentToken,

      pullMetaData: metaData

    });

    setHandler(canopyHandler);

    return () => {

      setHandler(null);

      canopyHandler.destroy();

    };

  }, [publicAlias, consentToken, metaData]); // Reload SDK when props change

​

  if (!handler) {

    // Loading

    return (

      <Button disabled size="lg" as="a">

        <Spinner

          as="span"

          animation="border"

          size="sm"

          role="status"

          aria-hidden="true"

        />

      </Button>

    );

  }

​

  return (

    <Button as="a" size="lg" onClick={() => handler.open()}>

      Import My Insurance

    </Button>

  );

};

​

const DemoPage = () => {

  return (

    <div>

      <Navbar bg="dark" variant="dark">

        <Nav className="mr-auto">

          <Nav.Link href="#home" active>

            Home

          </Nav.Link>

        </Nav>

      </Navbar>

      <Jumbotron className="text-center p-3 p-md-5">

        <Container fluid>

          <Row>

            <Col md="7" className="mx-auto my-5">

              <h1 className="h2 font-weight-normal mb-3">

                Import My Insurance

              </h1>

              <p className="lead font-weight-normal mb-4">

                Easily use the Canopy Connect SDK to collect insurance

                information.

              </p>

              {/* Canopy Connect Button */}

              <CanopyConnectBtn publicAlias={"demo"} />

              {/* End Canopy Connect Button */}

            </Col>

          </Row>

        </Container>

      </Jumbotron>

      <Container fluid>

        <Row className="my-md-3 pl-md-3">

          <Col

            md="6"

            xs="12"

            className="mx-auto text-center bg-dark text-white p-3 px-md-5"

          >

            <div className="my-3 py-3">

              <h2 className="h2">Another headline</h2>

              <p className="lead">Another subheading.</p>

            </div>

          </Col>

          <Col

            md="6"

            xs="12"

            className="mx-auto text-center bg-light p-3 px-md-5"

          >

            <div className="my-3 py-3">

              <h2 className="h2">Another headline</h2>

              <p className="lead">Another subheading.</p>

            </div>

          </Col>

        </Row>

      </Container>

    </div>

  );

};

​

const el = document.querySelector("#root");

ReactDOM.render(<DemoPage />, el);

​