Skip to content

Commit

Permalink
upgrade to paid plan async-labs#17
Browse files Browse the repository at this point in the history
  • Loading branch information
@tima101
tima101 committed Apr 29, 2019
1 parent 110ed37 commit 865fd8f
Show file tree
Hide file tree
Showing 6 changed files with 103 additions and 123 deletions.
12 changes: 6 additions & 6 deletions app/components/layout/menus.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,18 +15,18 @@ const menuOnTheRight = ({
href: '/your-settings',
simple: true,
},
{
text: 'Your Billing',
href: `/your-billing?teamSlug=${currentTeam.slug}`,
as: `/team/${currentTeam.slug}/your-billing`,
simple: true,
},
{
text: 'Team Settings',
href: `/team-settings?teamSlug=${currentTeam.slug}`,
as: `/team/${currentTeam.slug}/team-settings`,
simple: true,
},
{
text: 'Billing',
href: `/billing?teamSlug=${currentTeam.slug}`,
as: `/team/${currentTeam.slug}/billing`,
simple: true,
},
{
separator: true,
},
Expand Down
14 changes: 14 additions & 0 deletions app/lib/store/team.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -342,6 +342,20 @@ class Team {
throw error;
}
}

public async checkIfTeamLeaderMustBeCustomer() {
let ifTeamLeaderMustBeCustomerOnClient: boolean;

if (this && this.memberIds.length < 2) {
ifTeamLeaderMustBeCustomerOnClient = false;
} else if (this && this.memberIds.length >= 2 && this.isSubscriptionActive) {
ifTeamLeaderMustBeCustomerOnClient = false;
} else if (this && this.memberIds.length >= 2 && !this.isSubscriptionActive) {
ifTeamLeaderMustBeCustomerOnClient = true;
}

return ifTeamLeaderMustBeCustomerOnClient;
}
}

decorate(Team, {
Expand Down
6 changes: 5 additions & 1 deletion app/pages/your-billing.tsx → app/pages/billing.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@ class YourBilling extends React.Component<Props, State> {
panelLabel="Add card"
description={'This is your default payment method.'}
>
<p>No card is added.</p>
<Button variant="contained" color="primary">
Add card
</Button>
Expand Down Expand Up @@ -184,6 +185,7 @@ class YourBilling extends React.Component<Props, State> {
panelLabel="Confirm ($50/month)"
description={`Subscription for ${currentTeam.name}`}
>
<p>You are not a paying customer.</p>
<Button variant="contained" color="primary">
Buy subscription
</Button>
Expand All @@ -205,8 +207,10 @@ class YourBilling extends React.Component<Props, State> {
) {
return (
<React.Fragment>
<p>You are not a paying customer.</p>
<p>Buy subscription using your current card, see below section for current card information.</p>
<Button variant="contained" color="primary" onClick={this.createSubscriptionOnClick}>
Buy subscription (use current card)
Buy subscription
</Button>
</React.Fragment>
);
Expand Down
1 change: 0 additions & 1 deletion app/pages/discussion.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import Avatar from '@material-ui/core/Avatar';
// import Button from '@material-ui/core/Button';
import Tooltip from '@material-ui/core/Tooltip';
import Head from 'next/head';
import Router from 'next/router';
Expand Down
189 changes: 76 additions & 113 deletions app/pages/team-settings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,9 @@ import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';

import MenuWithMenuItems from '../components/common/MenuWithMenuItems';
import Layout from '../components/layout';
import InviteMember from '../components/teams/InviteMember';
import {
getSignedRequestForUpload,
uploadFileUsingSignedPutRequest,
} from '../lib/api/team-member';
import { getSignedRequestForUpload, uploadFileUsingSignedPutRequest } from '../lib/api/team-member';
import confirm from '../lib/confirm';
import notify from '../lib/notifier';
import { Store } from '../lib/store';
Expand All @@ -32,32 +28,14 @@ const styleGrid = {
height: '100%',
};

// const styleGridItem = {
// padding: '0px 20px',
// borderRight: '0.5px #aaa solid',
// };

const styleTableCell = {
padding: '15px 56px 15px 15px',
type MyProps = { teamSlug: string; store: Store; isTL: boolean; isMobile: boolean };
type MyState = {
inviteMemberOpen: boolean;
newName: string;
newAvatarUrl: string;
disabled: boolean;
};

const getMenuOptions = member => ({
dataId: member._id,
id: `post-menu-${member._id}`,
tooltipTitle: 'Manage member',
});

const getMenuItemOptions = (member, component) => [
{
text: 'Remove member',
dataId: member._id,
onClick: component.removeMember,
},
];

type MyProps = { teamSlug: string; store: Store; isTL: boolean; isMobile: boolean; };
type MyState = { inviteMemberOpen: boolean; newName: string; newAvatarUrl: string; disabled: boolean };

class TeamSettings extends React.Component<MyProps, MyState> {
constructor(props) {
super(props);
Expand Down Expand Up @@ -150,13 +128,24 @@ class TeamSettings extends React.Component<MyProps, MyState> {
this.setState({ inviteMemberOpen: false });
};

public inviteMember = () => {
public inviteMember = async () => {
const { currentTeam } = this.props.store;
if (!currentTeam) {
notify('You have not selected a Team.');
return;
}

const ifTeamLeaderMustBeCustomer = await currentTeam.checkIfTeamLeaderMustBeCustomer();
if (ifTeamLeaderMustBeCustomer) {
notify(
'To add a third team member, you have to become a paid customer.' +
'<p />' +
' To become a paid customer,' +
' navigate to Billing page.',
);
return;
}

this.setState({ inviteMemberOpen: true });
};

Expand Down Expand Up @@ -188,17 +177,6 @@ class TeamSettings extends React.Component<MyProps, MyState> {
});
};

public renderMenu(member) {
return (
<div>
<MenuWithMenuItems
menuOptions={getMenuOptions(member)}
itemOptions={getMenuItemOptions(member, this)}
/>
</div>
);
}

// TODO: MobX for when new user is invited
// TODO: MobX when member gets removed

Expand Down Expand Up @@ -310,94 +288,79 @@ class TeamSettings extends React.Component<MyProps, MyState> {
onClick={this.inviteMember}
variant="outlined"
color="primary"
style={{ verticalAlign: 'middle', float: 'right' }}
style={{ float: 'right', marginTop: '-20px' }}
>
Invite member
</Button>
<p />
<br />
<Paper>
<Table>
<TableHead>
<TableRow>
<TableCell style={styleTableCell}>Person</TableCell>
<TableCell style={styleTableCell}>Role</TableCell>
<Table>
<TableHead>
<TableRow>
<TableCell>Person</TableCell>
<TableCell>Role</TableCell>
</TableRow>
</TableHead>

<TableBody>
{Array.from(currentTeam.members.values()).map(m => (
<TableRow key={m._id}>
<TableCell style={{ width: '300px' }}>
<Hidden smDown>
<Avatar
role="presentation"
src={m.avatarUrl}
alt={m.avatarUrl}
key={m._id}
style={{
margin: '0px 5px',
display: 'inline-flex',
width: '30px',
height: '30px',
verticalAlign: 'middle',
}}
/>
</Hidden>
{m.displayName}
</TableCell>
<TableCell>
{isTL && m._id !== currentUser._id ? 'Team Member' : 'Team Leader'}
</TableCell>
</TableRow>
</TableHead>

<TableBody>
{Array.from(currentTeam.members.values()).map(m => (
<TableRow key={m._id}>
<TableCell style={styleTableCell} component="th" scope="row">
<Hidden smDown>
<Avatar
role="presentation"
src={m.avatarUrl}
alt={m.avatarUrl}
key={m._id}
style={{
margin: '0px 5px',
display: 'inline-flex',
width: '30px',
height: '30px',
verticalAlign: 'middle',
}}
/>{' '}
</Hidden>
{m.displayName}
</TableCell>
<TableCell style={styleTableCell}>
{isTL && m._id !== currentUser._id ? (
<div style={{ display: 'inline-flex' }}>
<div style={{ paddingRight: 10 }}>Team Member</div>{' '}
{this.renderMenu(m)}
</div>
) : (
<div style={{ display: 'inline-flex' }}>
<div style={{ paddingRight: 10 }}>Team Leader</div>
</div>
)}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Paper>
))}
</TableBody>
</Table>

<p />
<br />

{Array.from(currentTeam.invitedUsers.values()).length > 0 ? (
<div>
<React.Fragment>
<h4>
Invited users ( {Array.from(currentTeam.invitedUsers.values()).length} /{' '}
{20 - Array.from(currentTeam.members.values()).length} )
</h4>
<Paper>
<Table>
<TableHead>
<TableRow>
<TableCell style={styleTableCell}>Email</TableCell>
<TableCell style={styleTableCell}>Status</TableCell>
<p />
<Table>
<TableHead>
<TableRow>
<TableCell>Email</TableCell>
<TableCell>Status</TableCell>
</TableRow>
</TableHead>

<TableBody>
{Array.from(currentTeam.invitedUsers.values()).map(i => (
<TableRow key={i._id}>
<TableCell style={{ width: '300px' }}>{i.email}</TableCell>
<TableCell>Sent</TableCell>
</TableRow>
</TableHead>

<TableBody>
{Array.from(currentTeam.invitedUsers.values()).map(i => (
<TableRow key={i._id}>
<TableCell style={styleTableCell} component="th" scope="row">
{i.email}{' '}
</TableCell>
<TableCell style={styleTableCell}>Sent</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Paper>
</div>
))}
</TableBody>
</Table>
</React.Fragment>
) : null}
<br />
<br />
<p />
<br />
</Grid>

<InviteMember
Expand Down
4 changes: 2 additions & 2 deletions app/server/routesWithSlug.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@ export default function routesWithSlug({ server, app }) {
app.render(req, res, '/team-settings', { teamSlug });
});

server.get('/team/:teamSlug/your-billing', (req, res) => {
server.get('/team/:teamSlug/billing', (req, res) => {
const { teamSlug } = req.params;
app.render(req, res, '/your-billing', { teamSlug });
app.render(req, res, '/billing', { teamSlug });
});

server.get('/invitation/:teamSlug', (req, res) => {
Expand Down

0 comments on commit 865fd8f

Please sign in to comment.