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>
    When an author, editor, or reviewer has a financial/personal interest or
    belief that could affect his/her objectivity, or inappropriately influence
    his/her actions, a potential conflict of interest exists.{' '}
  </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>

    <Row>
      <Item>
        <Label>{orcid}</Label>
      </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;
  }
`
// #endregion