App.js

import React from 'react';
import PropTypes from 'prop-types';

// Import the standard Button from the default component library
import { Button } from '@deskpro/apps-components';

class App extends React.Component {
  static propTypes = {
    dpapp: PropTypes.object.isRequired,
  };

  state = {
    person: null,
  };

  componentDidMount() {
    // dpapp is injected into your App automatically.
    // It is the main interface between your app and Deskpro itself.
    const dpapp = this.props.dpapp;

    // Here you see we're accessing context information,
    // in this case we're getting ahold of the ticket context.
    const ticketContext = dpapp.context.get('ticket');

    // And from that, we can interact with the ticket in various
    // ways. In this case we're just loading up some info about the user
    ticketContext.get('person').then(person => this.setState({ person }))
  }

  render() {
    const person = this.state.person;

    if (!person) {
      return (<div>Loading...</div>);
    }

    const primaryEmail = person.emails[0];

    return (
      <div>
        <p>Find {person.name} in our other systems</p>

        <p>
          <Button
            appearance="primary"
            onClick={() => window.open(`https://members.example.com/${primaryEmail}`)}
          >Find in members area</Button>
        </p>

        <p>
          <Button
            appearance="primary"
            onClick={() => window.open(`https://accounts.example.com/${primaryEmail}`)}
          >Find in accounts</Button>
        </p>
      </div>
    );
  }
}

export default App;