Merge branch 'main' into renovate/major-nextjs-monorepo

components/AvatarWithLink.tsx

@@ -8,8 +8,8 @@ import Avatar from './Avatar';
 import LinkCollective from './LinkCollective';
 
 type AvatarWithLinkProps = {
-  account: Account;
-  secondaryAccount: Account | null;
+  account: Pick<Account, 'name' | 'type' | 'isIncognito' | 'slug' | 'imageUrl'>;
+  secondaryAccount: Partial<Account> | null;
   /** The size in pixels */
   size: number;
 };

components/Body.js

@@ -1,10 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
-
-const Main = styled.main`
-  border-top: 1px solid rgb(232, 233, 235);
-`;
 
 export default class Body extends React.Component {
   static propTypes = {
@@ -13,6 +8,6 @@ export default class Body extends React.Component {
 
   render() {
     const { children } = this.props;
-    return <Main>{children}</Main>;
+    return <main>{children}</main>;
   }
 }

components/DateTime.js → components/DateTime.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { defineMessage, FormattedDate, useIntl } from 'react-intl';
 
 import { getDateFromValue } from '../lib/date-utils';
@@ -18,11 +17,17 @@ export const generateDateTitle = (intl, date) => {
   });
 };
 
+type DateTimeProps = {
+  value: string | Date | typeof dayjs;
+  dateStyle?: 'full' | 'long' | 'medium' | 'short';
+  timeStyle?: 'full' | 'long' | 'medium' | 'short' | null | undefined;
+};
+
 /**
  * A wrapper around `FormattedDate` + HTML `<time>` with sensible defaults.
  * Displays the full date and time in the user's locale and in UTC in the title.
  */
-const DateTime = ({ value, dateStyle, timeStyle, ...props }) => {
+const DateTime = ({ value, dateStyle, timeStyle, ...props }: DateTimeProps) => {
   const intl = useIntl();
   const [title, setTitle] = React.useState();
   const date = React.useMemo(() => getDateFromValue(value), [value]);
@@ -33,22 +38,9 @@ const DateTime = ({ value, dateStyle, timeStyle, ...props }) => {
       dateTime={date.toISOString()}
       onMouseEnter={() => setTitle(generateDateTitle(intl, date))}
     >
-      <FormattedDate dateStyle={dateStyle} timeStyle={timeStyle} value={date} />
+      <FormattedDate dateStyle={dateStyle || 'long'} timeStyle={timeStyle} value={date} />
     </time>
   );
 };
 
-DateTime.propTypes = {
-  /** The value as a Date or as a parsable string */
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date), PropTypes.instanceOf(dayjs)]).isRequired,
-  /** Date style, set this to null to hide the date */
-  dateStyle: PropTypes.oneOf(['full', 'long', 'medium', 'short']),
-  /** Time style, set this to display the time along with the date */
-  timeStyle: PropTypes.oneOf(['full', 'long', 'medium', 'short', undefined, null]),
-};
-
-DateTime.defaultProps = {
-  dateStyle: 'long',
-};
-
 export default DateTime;

components/Footer.js

@@ -12,6 +12,7 @@ import styled from 'styled-components';
 
 import languages from '../lib/constants/locales';
 import useLoggedInUser from '../lib/hooks/useLoggedInUser';
+import { PREVIEW_FEATURE_KEYS } from '../lib/preview-features';
 
 import TranslateIcon from './icons/TranslateIcon';
 import Container from './Container';
@@ -233,6 +234,8 @@ const Footer = () => {
     </Span>
   );
 
+  const useDashboard = LoggedInUser?.hasPreviewFeatureEnabled(PREVIEW_FEATURE_KEYS.DASHBOARD);
+
   return (
     <FooterContainer>
       <Container
@@ -260,12 +263,14 @@ const Footer = () => {
             maxWidth="300px"
           >
             <Flex my="12px">
-              <Image
-                src="/static/images/opencollectivelogo-footer-n.svg"
-                alt="Open Collective"
-                height={28}
-                width={167}
-              />
+              <Link href={useDashboard ? '/home' : '/'}>
+                <Image
+                  src="/static/images/opencollectivelogo-footer-n.svg"
+                  alt="Open Collective"
+                  height={28}
+                  width={167}
+                />
+              </Link>
             </Flex>
             <P
               textAlign={['center', 'left']}

components/LinkExpense.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { getCollectiveTypeForUrl } from '../lib/collective.lib';
+
+import Link from './Link';
+
+type LinkExpenseProps = {
+  collective: {
+    slug: string;
+    type: string;
+    parent?: {
+      slug: string;
+    };
+  };
+  expense: {
+    id?: string | number;
+    legacyId?: number;
+  };
+  onClick?: (expenseId: string | number) => void;
+  children?: React.ReactNode;
+
+  title?: string;
+  openInNewTab?: boolean;
+};
+
+const LinkExpense = ({ collective, expense, onClick, ...props }: LinkExpenseProps) => {
+  const parentCollectiveSlugRoute = collective.parent?.slug
+    ? `/${collective.parent.slug}/${getCollectiveTypeForUrl(collective)}`
+    : '';
+  const expenseId = expense.legacyId || expense.id;
+  const href = `${parentCollectiveSlugRoute}/${collective.slug}/expenses/${expenseId}`;
+
+  if (onClick) {
+    props['onClick'] = e => {
+      e.preventDefault();
+      onClick(expenseId);
+    };
+  }
+  return <Link href={href} {...props} />;
+};
+
+export default LinkExpense;