Skip to content

Commit 34fe768

Browse files
gustavlrsngustavlrsn
committed
Update Collective profile prototype
1 parent a3201a3 commit 34fe768

36 files changed

+613
-170
lines changed

‎components/crowdfunding-redesign/AccountFinances.tsx

+425
Large diffs are not rendered by default.

‎components/crowdfunding-redesign/Accounts.tsx renamed to ‎components/crowdfunding-redesign/CollectiveFinances.tsx

+11-18
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,29 @@
11
import React from 'react';
22
import { gql, useQuery } from '@apollo/client';
3+
import clsx from 'clsx';
34
import { useRouter } from 'next/router';
45
import { FormattedMessage } from 'react-intl';
56
import { z } from 'zod';
67

78
import { API_V2_CONTEXT } from '../../lib/graphql/helpers';
9+
import { TimeUnit } from '../../lib/graphql/types/v2/graphql';
810
import useQueryFilter from '../../lib/hooks/useQueryFilter';
9-
import { getDashboardRoute } from '../../lib/url-helpers';
1011

11-
import { DashboardContext } from '../dashboard/DashboardContext';
12-
import DashboardHeader from '../dashboard/DashboardHeader';
12+
import { accountHoverCardFields } from '../AccountHoverCard';
1313
import { childAccountFilter } from '../dashboard/filters/ChildAccountFilter';
1414
import { Filterbar } from '../dashboard/filters/Filterbar';
1515
import { periodCompareFilter } from '../dashboard/filters/PeriodCompareFilter';
16-
import { Accounts } from '../dashboard/sections/overview/Accounts';
17-
import AccountTable from '../dashboard/sections/overview/AccountTable';
16+
import { PeriodFilterCompare, PeriodFilterType } from '../dashboard/filters/PeriodCompareFilter/schema';
17+
import ComparisonChart from '../dashboard/sections/overview/ComparisonChart';
1818
import type { MetricProps } from '../dashboard/sections/overview/Metric';
19-
import { Metric } from '../dashboard/sections/overview/Metric';
20-
import { overviewMetricsQuery } from '../dashboard/sections/overview/queries';
19+
import Link from '../Link';
2120
import MessageBoxGraphqlError from '../MessageBoxGraphqlError';
22-
import { Account, TimeUnit } from '../../lib/graphql/types/v2/graphql';
23-
import { accountHoverCardFields } from '../AccountHoverCard';
24-
import AccountsList from './AccountsList';
25-
import { ProfileMetric } from './ProfileMetric';
26-
import clsx from 'clsx';
27-
import ComparisonChart from '../dashboard/sections/overview/ComparisonChart';
28-
import { PeriodFilterCompare, PeriodFilterType } from '../dashboard/filters/PeriodCompareFilter/schema';
29-
import { ArrowLeft, ChevronRight } from 'lucide-react';
3021
import { Badge } from '../ui/Badge';
3122
import { Button } from '../ui/Button';
23+
24+
import AccountsList from './AccountsList';
25+
import { ProfileMetric } from './ProfileMetric';
3226
import { TransactionGroups } from './TransactionGroups';
33-
import Link from '../Link';
3427

3528
const profileAccountsQuery = gql`
3629
query MetricsPerAccount(
@@ -233,7 +226,7 @@ const profileAccountsQuery = gql`
233226
${accountHoverCardFields}
234227
`;
235228

236-
export const schema = z.object({
229+
const schema = z.object({
237230
period: periodCompareFilter.schema.default({
238231
type: PeriodFilterType.ALL_TIME,
239232
compare: PeriodFilterCompare.NO_COMPARISON,
@@ -244,7 +237,7 @@ export const schema = z.object({
244237
metric: z.coerce.string().nullable().default('balance'),
245238
});
246239

247-
export function ProfileAccounts() {
240+
export function CollectiveFinances() {
248241
const router = useRouter();
249242
const accountSlug = router.query.accountSlug ?? router.query.collectiveSlug;
250243
const queryFilter = useQueryFilter({

‎components/crowdfunding-redesign/CollectiveHeader.tsx

-40
This file was deleted.

‎components/crowdfunding-redesign/ContributionsList.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@ import { triggerPrototypeToast } from './helpers';
1717

1818
export function ContributionsList({ account }) {
1919
const intl = useIntl();
20+
if (!account) {
21+
return <div>Fix this</div>;
22+
}
2023
return (
2124
<div className="relative mx-auto max-w-screen-md space-y-6 px-6 py-12">
2225
<div className="flex flex-col divide-y rounded-lg border bg-background">

‎components/crowdfunding-redesign/FundraiserLayout.tsx

+10-23
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import { ProfileModal } from './ProfileModal';
2323
import { ArrowRight } from 'lucide-react';
2424
import { Progress } from '../ui/Progress';
2525
import FormattedMoneyAmount from '../FormattedMoneyAmount';
26-
import { StackedAvatars } from '../Avatar';
26+
2727
import { Button } from '../ui/Button';
2828
import { FormattedMessage } from 'react-intl';
2929
import { TabsList, TabsTrigger } from './DumbTabs';
@@ -101,14 +101,14 @@ export function FundraiserLayout({ children, activeTab }) {
101101
</div>
102102

103103
<p>
104-
{account.type === 'EVENT' ? 'Event' : 'Fundraiser'} by{' '}
104+
{account.type === 'EVENT' ? 'Event' : 'Project'} by{' '}
105105
<Link
106106
className="font-semibold text-primary hover:underline"
107107
href={`/preview/${mainAccount.slug}`}
108-
onClick={e => {
109-
e.preventDefault();
110-
showModal(ProfileModal, { account: mainAccount });
111-
}}
108+
// onClick={e => {
109+
// e.preventDefault();
110+
// showModal(ProfileModal, { account: mainAccount });
111+
// }}
112112
>
113113
{mainAccount.name} <ArrowRight className="inline align-middle" size={16} />
114114
</Link>
@@ -133,6 +133,9 @@ export function FundraiserLayout({ children, activeTab }) {
133133
<TabsTrigger href={baseRoute} value="fundraiser" activeTab={activeTab}>
134134
Fundraiser
135135
</TabsTrigger>
136+
<TabsTrigger href={`${baseRoute}/finances`} value="finances" activeTab={activeTab}>
137+
Finances
138+
</TabsTrigger>
136139
<TabsTrigger
137140
href={`${baseRoute}/updates`}
138141
value="updates"
@@ -141,26 +144,10 @@ export function FundraiserLayout({ children, activeTab }) {
141144
>
142145
Updates
143146
</TabsTrigger>
144-
<TabsTrigger
145-
href={`${baseRoute}/contributions`}
146-
value="contributions"
147-
activeTab={activeTab}
148-
count={account.contributionTransactions?.totalCount}
149-
>
150-
Contributions
151-
</TabsTrigger>
152-
<TabsTrigger
153-
href={`${baseRoute}/expenses`}
154-
value="expenses"
155-
activeTab={activeTab}
156-
count={account.expenses?.totalCount}
157-
>
158-
Expenses
159-
</TabsTrigger>
160147
</TabsList>
161148
</div>
162149
</div>
163-
{children}
150+
<div className="flex-1">{children}</div>
164151

165152
<ThemeColor color={fundraiser.primaryColor} />
166153
</React.Fragment>

‎components/crowdfunding-redesign/FundraisingPage.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -58,22 +58,22 @@ export function FundraisingPage() {
5858
allowAttributes
5959
transform={node => {
6060
// Allow some iframes
61-
const attrs = [].slice.call(node.attributes);
62-
if (node.tagName === 'iframe') {
61+
if (node.tagName.toLowerCase() === 'iframe') {
6362
const src = node.getAttribute('src');
6463
const parsedUrl = new URL(src);
6564
const hostname = parsedUrl.hostname;
6665
if (['youtube-nocookie.com', 'www.youtube-nocookie.com', 'anchor.fm'].includes(hostname)) {
67-
const attributes = merge({}, ...attrs.map(({ name, value }) => ({ [name]: value })));
6866
return (
6967
<iframe
70-
{...pick(attributes, ['width', 'height', 'frameborder', 'allowfullscreen'])}
71-
title={attributes.title || 'Embed content'}
68+
width={node.getAttribute('width')}
69+
height={node.getAttribute('height')}
70+
allowFullScreen={node.getAttribute('allowfullscreen') as any}
71+
title={node.getAttribute('title') || 'Embed content'}
7272
src={src}
7373
/>
7474
);
7575
}
76-
} else if (node.tagName === 'a') {
76+
} else if (node.tagName.toLowerCase() === 'a') {
7777
// Open links in new tab
7878
node.setAttribute('target', '_blank');
7979
node.setAttribute('rel', 'noopener noreferrer');

‎components/crowdfunding-redesign/Goal.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { aggregateGoalAmounts } from './helpers';
44

55
import { Progress } from '../ui/Progress';
66
import FormattedMoneyAmount from '../FormattedMoneyAmount';
7-
import { StackedAvatars } from '../Avatar';
87

98
// Naive implementation of Goals for prototype
109
export function Goal({ account }) {

‎components/crowdfunding-redesign/Goals.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@ import { aggregateGoalAmounts } from './helpers';
44

55
import { Progress } from '../ui/Progress';
66
import FormattedMoneyAmount from '../FormattedMoneyAmount';
7-
import { StackedAvatars } from '../Avatar';
8-
7+
import StackedAvatars from '../StackedAvatars';
98
// Naive implementation of Goals for prototype
109
export function Goals({ account }) {
1110
if (!account) {

‎components/crowdfunding-redesign/Profile.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import { TabsList, TabsTrigger } from './DumbTabs';
2424

2525
import { ThemeColor } from './ThemeColor';
2626
import { Tiers } from './Tiers';
27-
import { ProfileAccounts } from './Accounts';
27+
import { ProfileAccounts } from './CollectiveFinances';
2828

2929
export default function Profile({ account }) {
3030
const hasSocialLinks = account.socialLinks && account.socialLinks.length > 0;

‎components/crowdfunding-redesign/ProfileLayout.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export default function ProfileLayout({ activeTab = 'home', children, collapsed
3232

3333
return (
3434
<Page withTopBar={false} showFooter={false} title={`[PREVIEW] ${collective?.name} | Open Collective`}>
35-
{/* <Banner account={account || collective} isFundraiser={account?.type === 'EVENT' || account?.type === 'PROJECT'} /> */}
35+
<Banner account={account || collective} isFundraiser={account?.type === 'EVENT' || account?.type === 'PROJECT'} />
3636

3737
<AnimatePresence mode="wait" initial={false}>
3838
<div className="flex min-h-screen flex-col justify-between bg-primary-foreground/75 antialiased">

‎components/crowdfunding-redesign/TransactionGroupCard.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,8 @@ export function TransactionGroupCard({ group, className = undefined, asHero = fa
6363
)}
6464
>
6565
<FormattedMoneyAmount
66-
amount={group?.amountInHostCurrency.valueInCents}
67-
currency={group?.amountInHostCurrency.currency}
66+
amount={group?.totalAmount.valueInCents}
67+
currency={group?.totalAmount.currency}
6868
showCurrencyCode={false}
6969
/>
7070
</div>

‎components/crowdfunding-redesign/TransactionGroupDetails.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,10 @@ import { DataList, DataListItem, DataListItemLabel, DataListItemValue } from '..
1818
import { FormattedMessage, useIntl } from 'react-intl';
1919
import { i18nTransactionKind } from '../../lib/i18n/transaction';
2020
const transactionGroupDetailsQuery = gql`
21-
query TransactionGroupDetails($slug: String, $groupId: String) {
21+
query TransactionGroupDetails($slug: String, $groupId: String!) {
2222
transactionGroup(account: { slug: $slug }, groupId: $groupId) {
2323
id
24-
amountInHostCurrency {
24+
totalAmount {
2525
valueInCents
2626
currency
2727
}
@@ -72,7 +72,7 @@ const transactionGroupDetailsQuery = gql`
7272
order {
7373
id
7474
}
75-
amountInHostCurrency {
75+
amount {
7676
valueInCents
7777
currency
7878
}
@@ -124,8 +124,8 @@ export function TransactionGroupDetails() {
124124
<DataListItemLabel>{i18nTransactionKind(intl, transaction.kind)}</DataListItemLabel>
125125
<DataListItemValue className="flex w-full max-w-full justify-end text-right">
126126
<FormattedMoneyAmount
127-
amount={transaction.amountInHostCurrency.valueInCents}
128-
currency={transaction.amountInHostCurrency.currency}
127+
amount={transaction.amount.valueInCents}
128+
currency={transaction.amount.currency}
129129
showCurrencyCode={false}
130130
/>
131131
</DataListItemValue>

‎components/crowdfunding-redesign/TransactionGroups.tsx

+18-22
Original file line numberDiff line numberDiff line change
@@ -10,32 +10,28 @@ import Avatar from '../Avatar';
1010
import Link from '../Link';
1111
import { TransactionGroupCard } from './TransactionGroupCard';
1212
import { useRouter } from 'next/router';
13+
1314
const transactionGroupsQuery = gql`
1415
query TransactionGroups($slug: String!, $limit: Int) {
15-
account(slug: $slug) {
16-
id
17-
name
18-
type
19-
transactionGroups(limit: $limit) {
20-
totalCount
21-
nodes {
16+
transactionGroups(account: { slug: $slug }, limit: $limit) {
17+
totalCount
18+
nodes {
19+
id
20+
totalAmount {
21+
valueInCents
22+
currency
23+
}
24+
createdAt
25+
primaryTransaction {
2226
id
23-
amountInHostCurrency {
24-
valueInCents
25-
currency
26-
}
27-
createdAt
28-
primaryTransaction {
27+
kind
28+
type
29+
oppositeAccount {
2930
id
30-
kind
31+
name
32+
slug
33+
imageUrl
3134
type
32-
oppositeAccount {
33-
id
34-
name
35-
slug
36-
imageUrl
37-
type
38-
}
3935
}
4036
}
4137
}
@@ -61,7 +57,7 @@ export function TransactionGroups() {
6157
<div>
6258
<h3 className="mb-3 px-2 text-lg font-semibold text-slate-800">Transactions</h3>
6359
<div className="divide-y overflow-hidden rounded-xl border bg-background">
64-
{data?.account?.transactionGroups?.nodes?.map(group => (
60+
{data?.transactionGroups?.nodes?.map(group => (
6561
<div className="hover:bg-muted" key={group.id}>
6662
<Link href={`${transactionGroupRoute}/${group.id}`} className="">
6763
<TransactionGroupCard group={group} />

‎components/crowdfunding-redesign/edit/EditProfile.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,6 @@ export function EditProfile({ account }) {
7979
});
8080
const intl = useIntl();
8181
const initialValues = getDefaultProfileValues(account);
82-
8382
const onSubmit = async values => {
8483
try {
8584
await submitEditSettings({

‎components/crowdfunding-redesign/helpers.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export function getDefaultFundraiserValues(account: Account): Fundraiser {
6666

6767
export function getDefaultProfileValues(account?: Account): Profile {
6868
if (!account) return null;
69-
const profileSettings = account.settings.crowdfundingRedesign?.profile || {};
69+
const profileSettings = account.settings?.crowdfundingRedesign?.profile || {};
7070
const primaryColor =
7171
get(account, 'settings.collectivePage.primaryColor') || get(account, 'parent.settings.collectivePage.primaryColor');
7272

‎components/crowdfunding-redesign/queries.ts

+11
Original file line numberDiff line numberDiff line change
@@ -243,6 +243,17 @@ export const profileWrapperQuery = gql`
243243
id
244244
name
245245
slug
246+
settings
247+
type
248+
description
249+
longDescription
250+
backgroundImageUrl
251+
... on AccountWithParent {
252+
parent {
253+
id
254+
slug
255+
}
256+
}
246257
}
247258
collective: account(slug: $collectiveSlug) {
248259
id

‎pages/preview/[collectiveSlug]/[accountSlug]/transactions/[groupId].tsx

+2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import { useRouter } from 'next/router';
44
import ProfileLayout from '../../../../../components/crowdfunding-redesign/ProfileLayout';
55
import { TransactionGroupDetails } from '../../../../../components/crowdfunding-redesign/TransactionGroupDetails';
66

7+
// next.js export
8+
// ts-unused-exports:disable-next-line
79
export default function TransactionDetails() {
810
const router = useRouter();
911
return (

0 commit comments

Comments
 (0)