LinkOrcID.js

import React from 'react'
import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'

import {
  Row,
  Item,
  Text,
  Label,
  OpenModal,
  ActionLink,
  ShadowedBox,
  IconTooltip,
} from 'pubsweet-component-faraday-ui'

const OrcidTooltip = () => (
  <Text secondary>
    ORCID provides a persistent identifier – an ORCID iD – that distinguishes
    you from other researchers and a mechanism for linking your research outputs
    and activities to your iD. Learn more at{' '}
    <ActionLink target="_blank" to="https://orcid.org/help">
      orcid.org
    </ActionLink>
  </Text>
)

const LinkOrcID = ({ orcid = '', unlinkOrcid, id }) => (
  <ShadowedBox mt={2}>
    <Row alignItems="center">
      <Item alignItems="center">
        <Label>ORCiD Account </Label>
        <IconTooltip content={OrcidTooltip} iconSize={2} interactive primary />
      </Item>
      <Item justify="flex-end">
        {orcid ? (
          <OpenModal
            confirmText="Unlink"
            onConfirm={unlinkOrcid}
            subtitle="Are you sure you want to unlink your ORCID account?"
            title="Unlink ORCID"
          >
            {showModal => <ActionLink onClick={showModal}>Unlink</ActionLink>}
          </OpenModal>
        ) : (
          <Link href={`/api/users/orcid?userId=${id}`}>Link</Link>
        )}
      </Item>
    </Row>

    {orcid && (
      <Row>
        <Item>
          <Text>
            <Img
              alt="orcid_logo"
              src="https://orcid.org/sites/default/files/images/orcid_16x16.png"
            />
            <ActionLink target="_blank" to={`https://orcid.org/${orcid}`}>
              {`https://orcid.org/${orcid}`}
            </ActionLink>
          </Text>
        </Item>
      </Row>
    )}
  </ShadowedBox>
)

export default LinkOrcID

// #region styles
const Link = styled.a`
  color: ${th('action.color')};
  cursor: default;
  text-decoration: none;

  &:hover {
    color: ${th('colorSecondary')};
    text-decoration: none;
  }

  &:active,
  &:focus {
    color: ${th('action.colorActive')};
    text-decoration: none;
  }
`

const Img = styled.img`
  vertical-align: text-bottom;
  padding-right: calc(${th('gridUnit')} / 2);
`
// #endregion