feat: add stripe connect account creation

#2

.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

app/components/community-admin-dashboard/community-admin-dashboard.tsx

@@ -0,0 +1,35 @@
+import { useRouter } from 'next/router';
+import React from 'react';
+import { Button, Card, Col, Row, Statistic, Space } from 'antd';
+
+const CommunityAdminDashboard = ({ communityId }) => {
+  const router = useRouter();
+
+  return (
+    <Card>
+      <Row gutter={20} align="middle" justify="space-between">
+        <Col>
+          <Space size={20}>
+            <Statistic title="Total Members" value={2} />
+            <Statistic title="Total Members" value={2} />
+          </Space>
+        </Col>
+        <Col>
+          <Button
+            type="primary"
+            block
+            onClick={() =>
+              router.push(
+                `/api/stripe/connect?action=login&communityProfileId=${communityId}`
+              )
+            }
+          >
+            View payouts
+          </Button>
+        </Col>
+      </Row>
+    </Card>
+  );
+};
+
+export default CommunityAdminDashboard;

app/components/community-admin-dashboard/index.ts

@@ -0,0 +1,3 @@
+import CommunityAdminDashboard from './community-admin-dashboard';
+
+export default CommunityAdminDashboard;

app/components/community-cards/index.tsx

@@ -17,7 +17,6 @@ export const CommunityCard: React.FC<any> = ({
   name,
   imageUrl = DEFAULT_COVER_IMG,
   avatarUrl,
-  language,
 }) => (
   <Link href="/communities/[communityId]" as={`/communities/${id}`}>
     <Card
@@ -31,13 +30,6 @@ export const CommunityCard: React.FC<any> = ({
       <Meta
         title={name}
         avatar={<Avatar src={avatarUrl} shape="square" size={56} />}
-        description={
-          <Space direction="vertical">
-            <div>
-              <Tag>{language}</Tag>
-            </div>
-          </Space>
-        }
       />
     </Card>
   </Link>

app/components/community-hero/community-hero.component.tsx

@@ -0,0 +1,124 @@
+import { Button, PageHeader, Typography } from 'antd';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import React from 'react';
+import useSWR from 'swr';
+
+const { Text } = Typography;
+
+const itemRender = (route, params, routes) => {
+  const last = routes.indexOf(route) === routes.length - 1;
+
+  return last ? (
+    <span>{route.breadcrumbName}</span>
+  ) : (
+    <Link href={route.path}>
+      {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+      <a>{route.breadcrumbName}</a>
+    </Link>
+  );
+};
+
+const useRole = (communityId: any) => {
+  return useSWR<{
+    authenticated: boolean;
+    role: null | string;
+  }>(
+    `/api/communities/${communityId}/role`,
+    (url) => fetch(url).then((r) => r.json()),
+    {
+      initialData: { authenticated: false, role: null },
+      revalidateOnMount: true,
+    }
+  );
+};
+
+const CommunityActionButton = ({ communityId, authenticated, role }) => {
+  const router = useRouter();
+
+  if (!authenticated) {
+    return null;
+  }
+
+  return (
+    authenticated && (
+      <Button
+        type="primary"
+        onClick={() =>
+          router.push(
+            `/communities/${communityId}/${role ? 'membership' : 'join'}`
+          )
+        }
+      >
+        {role ? 'Manage my membership' : 'Become a member'}
+      </Button>
+    )
+  );
+};
+
+const CommunityHero = ({ data, communityId }) => {
+  const { data: roleData } = useRole(communityId);
+
+  if (!data) {
+    return null;
+  }
+
+  const routes = [
+    {
+      path: '/',
+      breadcrumbName: 'Home',
+    },
+    {
+      path: '/communities',
+      breadcrumbName: 'Communities',
+    },
+    {
+      path: `/communities/${communityId}`,
+      breadcrumbName: data.name,
+    },
+  ];
+
+  return (
+    <div
+      style={{
+        backgroundImage: `url('${data.bannerUrl}')`,
+        backgroundPosition: 'center',
+        backgroundSize: 'cover',
+        paddingTop: '8em',
+        position: 'relative',
+      }}
+    >
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%',
+          background:
+            'linear-gradient(180deg, rgba(5,32,39,0.5) 0%, rgba(6,36,43,1) 100%)',
+        }}
+      />
+      <div className="wrapper">
+        <PageHeader
+          title={
+            <div style={{ fontSize: '300%', lineHeight: '1.25' }}>
+              {data.name}
+            </div>
+          }
+          avatar={{ src: data.iconUrl, size: 64, shape: 'square' }}
+          extra={[
+            <CommunityActionButton
+              key="CommunityActionButton"
+              {...roleData}
+              communityId={communityId}
+            />,
+          ]}
+          breadcrumb={{ routes, itemRender }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CommunityHero;

app/components/community-hero/index.ts

@@ -0,0 +1,3 @@
+import CommunityHero from './community-hero.component';
+
+export default CommunityHero;

app/components/community-setup/community-setup.component.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import gql from 'graphql-tag';
+import { useQuery } from '@apollo/react-hooks';
+import { Card, Steps, Typography, Space, Row, Col } from 'antd';
+import StripeAccountCreateForm from './stripe-create-account-form';
+
+const { Step } = Steps;
+const { Text, Title } = Typography;
+
+interface IProps {
+  navigate: (url: string) => void;
+  communityId: string;
+}
+
+const CommunitySetup: React.FC<IProps> = ({ communityId }) => {
+  const { loading, data, error } = useQuery(
+    gql`
+      query CommunitySetup($communityId: ID!) {
+        community: findCommunityProfileByID(id: $communityId) {
+          name
+          communityAccount {
+            ownerAccount {
+              email
+            }
+          }
+        }
+      }
+    `,
+    {
+      variables: { communityId },
+    }
+  );
+
+  if (loading || error || !data) {
+    return null;
+  }
+
+  return (
+    <Space size="large" direction="vertical">
+      <Row align="middle" gutter={100}>
+        <Col>
+          <Title style={{ margin: 0 }}>Setup</Title>
+        </Col>
+        <Col flex={1}>
+          <Steps size="small">
+            <Step status="finish" title="Discord" />
+            <Step status="process" title="Payments" />
+            <Step status="wait" title="Verification" />
+            <Step status="wait" title="Done" />
+          </Steps>
+        </Col>
+      </Row>
+      <Card
+        title="Connect your account to Stripe"
+        loading={loading}
+        style={{ marginBottom: '10%' }}
+      >
+        <Space direction="vertical" size="large">
+          <Text>
+            We use Stripe to get you paid quickly and keep your personal and
+            payment information secure. Thousands of companies around the world
+            trust Stripe to process payments for their users. Set up a Stripe
+            account to get paid with 300.team.
+          </Text>
+          <StripeAccountCreateForm
+            communityId={communityId}
+            submitText="Set up payments"
+            initialValues={{
+              businessType: 'individual',
+              businessName: data.community.name,
+              email: data.community.communityAccount.ownerAccount.email,
+              country: 'GB',
+            }}
+          />
+        </Space>
+      </Card>
+    </Space>
+  );
+};
+
+export default CommunitySetup;

app/components/community-setup/index.ts

@@ -0,0 +1,3 @@
+import Component from './community-setup.component';
+
+export default Component;

app/components/community-setup/stripe-create-account-form/index.ts

@@ -0,0 +1,3 @@
+import StripeAccountCreateForm from './stripe-create-account-form.component';
+
+export default StripeAccountCreateForm;