All files / nav-sidebar/components AccountManagement.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
1x
 
 
 
 
 
1x
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
1x
 
 
 
 
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { curiousBlue, shuttleGray } from '@bufferapp/components/style/color';
import { Link, ClockIcon, SettingsIcon, Text } from '@bufferapp/components';
import PeopleIcon from '@bufferapp/ui/Icon/Icons/People';
 
const Wrapper = styled.span`
  display: flex;
  align-items: center;
  padding: 0.5rem 0.5rem;
  margin: 0 0.5rem;
  border-radius: 4px;
`;
 
const TextWrapper = styled.span`
  margin-left: .5rem;
  margin-right: auto;
  display: inline-flex;
`;
 
const IconWrapper = styled.span`
  color: ${shuttleGray};
  width: 16px;
  height: 16px;
`;
 
const AccountManagementLink = ({ isGlobalUser, isOwner, organizationId, children }) => {
  if (isGlobalUser) {
    return <Link unstyled href={`https://account.buffer.com/analyze`}>{ children }</Link>;
  }
  if (isOwner) {
    return <Link unstyled href={`https://buffer.com/manage/${organizationId}/analyze`}>{ children }</Link>;
  }
  return (<span>
    { children }
  </span>);
};
 
AccountManagementLink.propTypes = {
  isOwner: PropTypes.bool,
  organizationId: PropTypes.string,
  children: PropTypes.node.isRequired,
};
 
AccountManagementLink.defaultProps = {
  isOwner: false,
  organizationId: null,
};
 
const AccountManagement = ({ onTrial, daysRemaining, organizationId, isOwner, isGlobalUser }) => (<div>
  {onTrial && <Wrapper>
    <IconWrapper><ClockIcon size={{ width: '13px', height: '13px' }} color={curiousBlue} /></IconWrapper>
    <TextWrapper>
      <AccountManagementLink isOwner={isOwner} isGlobalUser={isGlobalUser} organizationId={organizationId}>
        <Text size="small" color="curiousBlue">Trial ends {daysRemaining}</Text>
      </AccountManagementLink>
    </TextWrapper>
  </Wrapper>}
  {isGlobalUser && <Wrapper>
      <IconWrapper><PeopleIcon/></IconWrapper>
      <TextWrapper>
        <Link unstyled href="https://account.buffer.com/analyze">
          <Text size="small">Manage Accounts</Text>
        </Link>
      </TextWrapper>
    </Wrapper>}
  {isOwner && <Wrapper>
    <IconWrapper><SettingsIcon size={{ width: '13px', height: '13px' }} /></IconWrapper>
    <TextWrapper>
      <AccountManagementLink isOwner={isOwner} organizationId={organizationId}>
        <Text size="small">Settings</Text>
      </AccountManagementLink>
    </TextWrapper>
  </Wrapper>}
</div>);
 
AccountManagement.propTypes = {
  daysRemaining: PropTypes.number,
  onTrial: PropTypes.bool,
  isOwner: PropTypes.bool,
  organizationId: PropTypes.string,
};
 
AccountManagement.defaultProps = {
  daysRemaining: 0,
  onTrial: false,
  isOwner: false,
  organizationId: null,
};
 
export default AccountManagement;