Update Collective profile prototype

opencollective · Oct 10, 2024 · f875650 · f875650
1 parent a3201a3
commit f875650
Show file tree

Hide file tree

Showing 36 changed files with 603 additions and 170 deletions.
diff --git a/components/crowdfunding-redesign/AccountFinances.tsx b/components/crowdfunding-redesign/AccountFinances.tsx
diff --git a/...onents/crowdfunding-redesign/Accounts.tsx → ...wdfunding-redesign/CollectiveFinances.tsx b/...onents/crowdfunding-redesign/Accounts.tsx → ...wdfunding-redesign/CollectiveFinances.tsx
@@ -1,36 +1,29 @@
 import React from 'react';
 import { gql, useQuery } from '@apollo/client';
+import clsx from 'clsx';
 import { useRouter } from 'next/router';
 import { FormattedMessage } from 'react-intl';
 import { z } from 'zod';
 
 import { API_V2_CONTEXT } from '../../lib/graphql/helpers';
+import { TimeUnit } from '../../lib/graphql/types/v2/graphql';
 import useQueryFilter from '../../lib/hooks/useQueryFilter';
-import { getDashboardRoute } from '../../lib/url-helpers';
 
-import { DashboardContext } from '../dashboard/DashboardContext';
-import DashboardHeader from '../dashboard/DashboardHeader';
+import { accountHoverCardFields } from '../AccountHoverCard';
 import { childAccountFilter } from '../dashboard/filters/ChildAccountFilter';
 import { Filterbar } from '../dashboard/filters/Filterbar';
 import { periodCompareFilter } from '../dashboard/filters/PeriodCompareFilter';
-import { Accounts } from '../dashboard/sections/overview/Accounts';
-import AccountTable from '../dashboard/sections/overview/AccountTable';
+import { PeriodFilterCompare, PeriodFilterType } from '../dashboard/filters/PeriodCompareFilter/schema';
+import ComparisonChart from '../dashboard/sections/overview/ComparisonChart';
 import type { MetricProps } from '../dashboard/sections/overview/Metric';
-import { Metric } from '../dashboard/sections/overview/Metric';
-import { overviewMetricsQuery } from '../dashboard/sections/overview/queries';
+import Link from '../Link';
 import MessageBoxGraphqlError from '../MessageBoxGraphqlError';
-import { Account, TimeUnit } from '../../lib/graphql/types/v2/graphql';
-import { accountHoverCardFields } from '../AccountHoverCard';
-import AccountsList from './AccountsList';
-import { ProfileMetric } from './ProfileMetric';
-import clsx from 'clsx';
-import ComparisonChart from '../dashboard/sections/overview/ComparisonChart';
-import { PeriodFilterCompare, PeriodFilterType } from '../dashboard/filters/PeriodCompareFilter/schema';
-import { ArrowLeft, ChevronRight } from 'lucide-react';
 import { Badge } from '../ui/Badge';
 import { Button } from '../ui/Button';
+
+import AccountsList from './AccountsList';
+import { ProfileMetric } from './ProfileMetric';
 import { TransactionGroups } from './TransactionGroups';
-import Link from '../Link';
 
 const profileAccountsQuery = gql`
   query MetricsPerAccount(
@@ -233,7 +226,7 @@ const profileAccountsQuery = gql`
   ${accountHoverCardFields}
 `;
 
-export const schema = z.object({
+const schema = z.object({
   period: periodCompareFilter.schema.default({
     type: PeriodFilterType.ALL_TIME,
     compare: PeriodFilterCompare.NO_COMPARISON,
@@ -244,7 +237,7 @@ export const schema = z.object({
   metric: z.coerce.string().nullable().default('balance'),
 });
 
-export function ProfileAccounts() {
+export function CollectiveFinances() {
   const router = useRouter();
   const accountSlug = router.query.accountSlug ?? router.query.collectiveSlug;
   const queryFilter = useQueryFilter({

diff --git a/components/crowdfunding-redesign/CollectiveHeader.tsx b/components/crowdfunding-redesign/CollectiveHeader.tsx
diff --git a/components/crowdfunding-redesign/ContributionsList.tsx b/components/crowdfunding-redesign/ContributionsList.tsx
@@ -17,6 +17,9 @@ import { triggerPrototypeToast } from './helpers';
 
 export function ContributionsList({ account }) {
   const intl = useIntl();
+  if (!account) {
+    return <div>Fix this</div>;
+  }
   return (
     <div className="relative mx-auto max-w-screen-md space-y-6 px-6 py-12">
       <div className="flex flex-col divide-y rounded-lg border bg-background">

diff --git a/components/crowdfunding-redesign/FundraiserLayout.tsx b/components/crowdfunding-redesign/FundraiserLayout.tsx
@@ -23,7 +23,7 @@ import { ProfileModal } from './ProfileModal';
 import { ArrowRight } from 'lucide-react';
 import { Progress } from '../ui/Progress';
 import FormattedMoneyAmount from '../FormattedMoneyAmount';
-import { StackedAvatars } from '../Avatar';
+
 import { Button } from '../ui/Button';
 import { FormattedMessage } from 'react-intl';
 import { TabsList, TabsTrigger } from './DumbTabs';
@@ -101,14 +101,14 @@ export function FundraiserLayout({ children, activeTab }) {
                     </div>
 
                     <p>
-                      {account.type === 'EVENT' ? 'Event' : 'Fundraiser'} by{' '}
+                      {account.type === 'EVENT' ? 'Event' : 'Project'} by{' '}
                       <Link
                         className="font-semibold text-primary hover:underline"
                         href={`/preview/${mainAccount.slug}`}
-                        onClick={e => {
-                          e.preventDefault();
-                          showModal(ProfileModal, { account: mainAccount });
-                        }}
+                        // onClick={e => {
+                        //   e.preventDefault();
+                        //   showModal(ProfileModal, { account: mainAccount });
+                        // }}
                       >
                         {mainAccount.name} <ArrowRight className="inline align-middle" size={16} />
                       </Link>
@@ -133,6 +133,9 @@ export function FundraiserLayout({ children, activeTab }) {
                   <TabsTrigger href={baseRoute} value="fundraiser" activeTab={activeTab}>
                     Fundraiser
                   </TabsTrigger>
+                  <TabsTrigger href={`${baseRoute}/finances`} value="finances" activeTab={activeTab}>
+                    Finances
+                  </TabsTrigger>
                   <TabsTrigger
                     href={`${baseRoute}/updates`}
                     value="updates"
@@ -141,26 +144,10 @@ export function FundraiserLayout({ children, activeTab }) {
                   >
                     Updates
                   </TabsTrigger>
-                  <TabsTrigger
-                    href={`${baseRoute}/contributions`}
-                    value="contributions"
-                    activeTab={activeTab}
-                    count={account.contributionTransactions?.totalCount}
-                  >
-                    Contributions
-                  </TabsTrigger>
-                  <TabsTrigger
-                    href={`${baseRoute}/expenses`}
-                    value="expenses"
-                    activeTab={activeTab}
-                    count={account.expenses?.totalCount}
-                  >
-                    Expenses
-                  </TabsTrigger>
                 </TabsList>
               </div>
             </div>
-            {children}
+            <div className="flex-1">{children}</div>
 
             <ThemeColor color={fundraiser.primaryColor} />
           </React.Fragment>

diff --git a/components/crowdfunding-redesign/FundraisingPage.tsx b/components/crowdfunding-redesign/FundraisingPage.tsx
@@ -58,22 +58,22 @@ export function FundraisingPage() {
             allowAttributes
             transform={node => {
               // Allow some iframes
-              const attrs = [].slice.call(node.attributes);
-              if (node.tagName === 'iframe') {
+              if (node.tagName.toLowerCase() === 'iframe') {
                 const src = node.getAttribute('src');
                 const parsedUrl = new URL(src);
                 const hostname = parsedUrl.hostname;
                 if (['youtube-nocookie.com', 'www.youtube-nocookie.com', 'anchor.fm'].includes(hostname)) {
-                  const attributes = merge({}, ...attrs.map(({ name, value }) => ({ [name]: value })));
                   return (
                     <iframe
-                      {...pick(attributes, ['width', 'height', 'frameborder', 'allowfullscreen'])}
-                      title={attributes.title || 'Embed content'}
+                      width={node.getAttribute('width')}
+                      height={node.getAttribute('height')}
+                      allowFullScreen={node.getAttribute('allowfullscreen') as any}
+                      title={node.getAttribute('title') || 'Embed content'}
                       src={src}
                     />
                   );
                 }
-              } else if (node.tagName === 'a') {
+              } else if (node.tagName.toLowerCase() === 'a') {
                 // Open links in new tab
                 node.setAttribute('target', '_blank');
                 node.setAttribute('rel', 'noopener noreferrer');

diff --git a/components/crowdfunding-redesign/Goal.tsx b/components/crowdfunding-redesign/Goal.tsx
@@ -4,7 +4,6 @@ import { aggregateGoalAmounts } from './helpers';
 
 import { Progress } from '../ui/Progress';
 import FormattedMoneyAmount from '../FormattedMoneyAmount';
-import { StackedAvatars } from '../Avatar';
 
 // Naive implementation of Goals for prototype
 export function Goal({ account }) {

diff --git a/components/crowdfunding-redesign/Goals.tsx b/components/crowdfunding-redesign/Goals.tsx
@@ -4,8 +4,7 @@ import { aggregateGoalAmounts } from './helpers';
 
 import { Progress } from '../ui/Progress';
 import FormattedMoneyAmount from '../FormattedMoneyAmount';
-import { StackedAvatars } from '../Avatar';
-
+import StackedAvatars from '../StackedAvatars';
 // Naive implementation of Goals for prototype
 export function Goals({ account }) {
   if (!account) {

diff --git a/components/crowdfunding-redesign/Profile.tsx b/components/crowdfunding-redesign/Profile.tsx
@@ -24,7 +24,7 @@ import { TabsList, TabsTrigger } from './DumbTabs';
 
 import { ThemeColor } from './ThemeColor';
 import { Tiers } from './Tiers';
-import { ProfileAccounts } from './Accounts';
+import { ProfileAccounts } from './CollectiveFinances';
 
 export default function Profile({ account }) {
   const hasSocialLinks = account.socialLinks && account.socialLinks.length > 0;

diff --git a/components/crowdfunding-redesign/ProfileLayout.tsx b/components/crowdfunding-redesign/ProfileLayout.tsx
@@ -32,7 +32,7 @@ export default function ProfileLayout({ activeTab = 'home', children, collapsed
 
   return (
     <Page withTopBar={false} showFooter={false} title={`[PREVIEW] ${collective?.name} | Open Collective`}>
-      {/* <Banner account={account || collective} isFundraiser={account?.type === 'EVENT' || account?.type === 'PROJECT'} /> */}
+      <Banner account={account || collective} isFundraiser={account?.type === 'EVENT' || account?.type === 'PROJECT'} />
 
       <AnimatePresence mode="wait" initial={false}>
         <div className="flex min-h-screen flex-col justify-between bg-primary-foreground/75 antialiased">

diff --git a/components/crowdfunding-redesign/TransactionGroupCard.tsx b/components/crowdfunding-redesign/TransactionGroupCard.tsx
@@ -63,8 +63,8 @@ export function TransactionGroupCard({ group, className = undefined, asHero = fa
         )}
       >
         <FormattedMoneyAmount
-          amount={group?.amountInHostCurrency.valueInCents}
-          currency={group?.amountInHostCurrency.currency}
+          amount={group?.totalAmount.valueInCents}
+          currency={group?.totalAmount.currency}
           showCurrencyCode={false}
         />
       </div>

diff --git a/components/crowdfunding-redesign/TransactionGroupDetails.tsx b/components/crowdfunding-redesign/TransactionGroupDetails.tsx
@@ -18,10 +18,10 @@ import { DataList, DataListItem, DataListItemLabel, DataListItemValue } from '..
 import { FormattedMessage, useIntl } from 'react-intl';
 import { i18nTransactionKind } from '../../lib/i18n/transaction';
 const transactionGroupDetailsQuery = gql`
-  query TransactionGroupDetails($slug: String, $groupId: String) {
+  query TransactionGroupDetails($slug: String, $groupId: String!) {
     transactionGroup(account: { slug: $slug }, groupId: $groupId) {
       id
-      amountInHostCurrency {
+      totalAmount {
         valueInCents
         currency
       }
@@ -72,7 +72,7 @@ const transactionGroupDetailsQuery = gql`
         order {
           id
         }
-        amountInHostCurrency {
+        amount {
           valueInCents
           currency
         }
@@ -124,8 +124,8 @@ export function TransactionGroupDetails() {
                   <DataListItemLabel>{i18nTransactionKind(intl, transaction.kind)}</DataListItemLabel>
                   <DataListItemValue className="flex w-full max-w-full justify-end text-right">
                     <FormattedMoneyAmount
-                      amount={transaction.amountInHostCurrency.valueInCents}
-                      currency={transaction.amountInHostCurrency.currency}
+                      amount={transaction.amount.valueInCents}
+                      currency={transaction.amount.currency}
                       showCurrencyCode={false}
                     />
                   </DataListItemValue>

diff --git a/components/crowdfunding-redesign/TransactionGroups.tsx b/components/crowdfunding-redesign/TransactionGroups.tsx
@@ -10,32 +10,28 @@ import Avatar from '../Avatar';
 import Link from '../Link';
 import { TransactionGroupCard } from './TransactionGroupCard';
 import { useRouter } from 'next/router';
+
 const transactionGroupsQuery = gql`
   query TransactionGroups($slug: String!, $limit: Int) {
-    account(slug: $slug) {
-      id
-      name
-      type
-      transactionGroups(limit: $limit) {
-        totalCount
-        nodes {
+    transactionGroups(account: { slug: $slug }, limit: $limit) {
+      totalCount
+      nodes {
+        id
+        totalAmount {
+          valueInCents
+          currency
+        }
+        createdAt
+        primaryTransaction {
           id
-          amountInHostCurrency {
-            valueInCents
-            currency
-          }
-          createdAt
-          primaryTransaction {
+          kind
+          type
+          oppositeAccount {
             id
-            kind
+            name
+            slug
+            imageUrl
             type
-            oppositeAccount {
-              id
-              name
-              slug
-              imageUrl
-              type
-            }
           }
         }
       }
@@ -61,7 +57,7 @@ export function TransactionGroups() {
     <div>
       <h3 className="mb-3 px-2 text-lg font-semibold text-slate-800">Transactions</h3>
       <div className="divide-y overflow-hidden rounded-xl border bg-background">
-        {data?.account?.transactionGroups?.nodes?.map(group => (
+        {data?.transactionGroups?.nodes?.map(group => (
           <div className="hover:bg-muted" key={group.id}>
             <Link href={`${transactionGroupRoute}/${group.id}`} className="">
               <TransactionGroupCard group={group} />

diff --git a/components/crowdfunding-redesign/edit/EditProfile.tsx b/components/crowdfunding-redesign/edit/EditProfile.tsx
@@ -79,7 +79,6 @@ export function EditProfile({ account }) {
   });
   const intl = useIntl();
   const initialValues = getDefaultProfileValues(account);
-
   const onSubmit = async values => {
     try {
       await submitEditSettings({

diff --git a/components/crowdfunding-redesign/helpers.ts b/components/crowdfunding-redesign/helpers.ts
@@ -66,7 +66,7 @@ export function getDefaultFundraiserValues(account: Account): Fundraiser {
 
 export function getDefaultProfileValues(account?: Account): Profile {
   if (!account) return null;
-  const profileSettings = account.settings.crowdfundingRedesign?.profile || {};
+  const profileSettings = account.settings?.crowdfundingRedesign?.profile || {};
   const primaryColor =
     get(account, 'settings.collectivePage.primaryColor') || get(account, 'parent.settings.collectivePage.primaryColor');
 

diff --git a/components/crowdfunding-redesign/queries.ts b/components/crowdfunding-redesign/queries.ts
@@ -243,6 +243,7 @@ export const profileWrapperQuery = gql`
       id
       name
       slug
+      settings
     }
     collective: account(slug: $collectiveSlug) {
       id

diff --git a/pages/preview/[collectiveSlug]/[accountSlug]/transactions/[groupId].tsx b/pages/preview/[collectiveSlug]/[accountSlug]/transactions/[groupId].tsx
@@ -4,6 +4,8 @@ import { useRouter } from 'next/router';
 import ProfileLayout from '../../../../../components/crowdfunding-redesign/ProfileLayout';
 import { TransactionGroupDetails } from '../../../../../components/crowdfunding-redesign/TransactionGroupDetails';
 
+// next.js export
+// ts-unused-exports:disable-next-line
 export default function TransactionDetails() {
   const router = useRouter();
   return (

diff --git a/pages/preview/[collectiveSlug]/about.tsx b/pages/preview/[collectiveSlug]/about.tsx
@@ -1,6 +1,9 @@
 import React from 'react';
+
 import ProfileLayout from '../../../components/crowdfunding-redesign/ProfileLayout';
 
+// next.js export
+// ts-unused-exports:disable-next-line
 export default function About() {
   return (
     <ProfileLayout activeTab="about">
-Original file line number
+Diff line change
@@ Expand Up / @@ -243,6 +243,7 @@ export const profileWrapperQuery = gql` @@
           id
           name
           slug
+          settings
         }
         collective: account(slug: $collectiveSlug) {
           id
@@ Expand Down @@