chore(deps): update nextjs monorepo to v13 (major)

.npmrc

@@ -1,2 +1,2 @@
 engine-strict=true
-
+legacy-peer-deps=true

.storybook/preview.js

@@ -3,7 +3,7 @@ import { RouterContext } from 'next/dist/shared/lib/router-context';
 import { IntlProvider } from 'react-intl';
 import theme from '../lib/theme';
 import { ApolloProvider } from '@apollo/client';
-import * as nextImage from 'next/image';
+import * as nextImage from 'next/legacy/image';
 
 import UserProvider from '../components/UserProvider';
 import { initClient } from '../lib/apollo-client';

components/Image.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import NextImage from 'next/image';
+import NextImage from 'next/legacy/image';
 
 // Default to no custom loader, will use Squoosh in dev
 let loader;

components/Link.js

@@ -59,7 +59,7 @@ class Link extends React.Component {
       );
     } else {
       return (
-        <NextLink {...pick(this.props, ['href', 'scroll'])}>
+        <NextLink legacyBehavior {...pick(this.props, ['href', 'scroll'])}>
           {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}
           <a
             className={className}

components/StyledDropzone.tsx

@@ -227,7 +227,7 @@ type StyledDropzoneProps = {
   /** Name for the input */
   name: string;
   /** Content to show inside the dropzone. Defaults to message "Drag and drop one or..." */
-  children?: React.ReactChildren;
+  children?: React.ReactNode;
   /** Force loading state to be displayed */
   isLoading?: boolean;
   /** Use this to override the loading progress indicator */

components/StyledSelect.tsx

@@ -313,7 +313,7 @@ export type StyledSelectProps = LayoutProps &
     isClearable?: boolean;
     options?: any;
     value?: any;
-    components?: Record<string, React.ReactNode>;
+    components?: Record<string, React.ReactNode | React.Component | React.FunctionComponent>;
     closeMenuOnSelect?: boolean;
     hideSelectedOptions?: boolean;
     isMulti?: boolean;

components/contribution-flow/ContributionFlowButtons.js

@@ -21,6 +21,7 @@ class ContributionFlowButtons extends React.Component {
     paypalButtonProps: PropTypes.object,
     currency: PropTypes.string,
     isCrypto: PropTypes.bool,
+    disabled: PropTypes.bool,
     tier: PropTypes.shape({ type: PropTypes.string }),
     stepDetails: PropTypes.object,
     stepSummary: PropTypes.object,
@@ -50,7 +51,8 @@ class ContributionFlowButtons extends React.Component {
   }
 
   render() {
-    const { goBack, isValidating, nextStep, paypalButtonProps, currency, tier, isCrypto, stepDetails } = this.props;
+    const { goBack, isValidating, nextStep, paypalButtonProps, currency, tier, isCrypto, stepDetails, disabled } =
+      this.props;
     const totalAmount = getTotalAmount(stepDetails, this.props.stepSummary, isCrypto);
     return (
       <Flex flexWrap="wrap" justifyContent="center">
@@ -61,7 +63,7 @@ class ContributionFlowButtons extends React.Component {
               minWidth={!nextStep ? 185 : 145}
               onClick={goBack}
               color="black.600"
-              disabled={isValidating}
+              disabled={disabled || isValidating}
               data-cy="cf-prev-step"
               type="button"
               mt={2}
@@ -79,7 +81,7 @@ class ContributionFlowButtons extends React.Component {
               minWidth={!nextStep ? 185 : 145}
               buttonStyle="primary"
               onClick={this.goNext}
-              disabled={isCrypto && totalAmount <= 0}
+              disabled={disabled || (isCrypto && totalAmount <= 0)}
               loading={isValidating || this.state.isLoadingNext}
               data-cy="cf-next-step"
               type="submit"

components/contribution-flow/constants.js

@@ -10,7 +10,7 @@ export const STEPS = {
   PAYMENT: 'payment',
   SUMMARY: 'summary',
   SUCCESS: 'success',
-  CHECKOUT: 'checkout',
+  FINALIZE: 'finalize',
 };
 
 export const PAYMENT_FLOW = {

components/contribution-flow/index.js

@@ -159,6 +159,8 @@ class ContributionFlow extends React.Component {
       stripeElements: null,
       isSubmitted: false,
       isSubmitting: false,
+      isInitializing: true,
+      isNavigating: false,
       showSignIn: false,
       createdOrder: null,
       forceSummaryStep: this.getCurrentStepName() !== STEPS.DETAILS, // If not starting the flow with the details step, we force the summary step to make sure contributors have an easy way to review their contribution
@@ -182,7 +184,14 @@ class ContributionFlow extends React.Component {
     };
   }
 
-  componentDidUpdate(oldProps) {
+  async componentDidMount() {
+    if (!this.props.loadingLoggedInUser && this.state.isInitializing) {
+      await this.updateRouteFromState();
+      this.setState({ isInitializing: false });
+    }
+  }
+
+  async componentDidUpdate(oldProps) {
     if (oldProps.LoggedInUser && !this.props.LoggedInUser) {
       // User has logged out, reset the state
       this.setState({ stepProfile: null, stepSummary: null, stepPayment: null });
@@ -204,32 +213,43 @@ class ContributionFlow extends React.Component {
     } else if (oldProps.loadingLoggedInUser && !this.props.loadingLoggedInUser) {
       // Login failed, reset the state to make sure we fallback on guest mode
       this.setState({ stepProfile: this.getDefaultStepProfile() });
-    } else if (!this.props.loadingLoggedInUser) {
-      // Reflect state changes in the URL
-      const currentStepName = this.getCurrentStepName();
-      if (currentStepName !== STEPS.SUCCESS) {
-        const { stepDetails, stepProfile, stepPayment } = this.state;
-        const currentUrlState = this.getQueryParams();
-        const expectedUrlState = stepsDataToUrlParamsData(
-          currentUrlState,
-          stepDetails,
-          stepProfile,
-          stepPayment,
-          this.props.paymentFlow === PAYMENT_FLOW.CRYPTO,
-          this.props.isEmbed,
-        );
-        if (!isEqual(currentUrlState, omitBy(expectedUrlState, isNil))) {
-          const route = this.getRoute(currentStepName);
-          const queryHelper = this.getQueryHelper();
-          this.props.router.replace(
+    } else if (!this.props.loadingLoggedInUser && this.state.isInitializing) {
+      await this.updateRouteFromState();
+      this.setState({ isInitializing: false });
+    }
+  }
+
+  updateRouteFromState = async () => {
+    if (this.state.isNavigating) {
+      return;
+    }
+
+    const currentStepName = this.getCurrentStepName();
+    if (currentStepName !== STEPS.SUCCESS) {
+      const { stepDetails, stepProfile, stepPayment } = this.state;
+      const currentUrlState = this.getQueryParams();
+      const expectedUrlState = stepsDataToUrlParamsData(
+        currentUrlState,
+        stepDetails,
+        stepProfile,
+        stepPayment,
+        this.props.paymentFlow === PAYMENT_FLOW.CRYPTO,
+        this.props.isEmbed,
+      );
+      if (!isEqual(currentUrlState, omitBy(expectedUrlState, isNil))) {
+        const route = this.getRoute(currentStepName);
+        const queryHelper = this.getQueryHelper();
+        this.setState({ isNavigating: true }, async () => {
+          await this.props.router.replace(
             { pathname: route, query: omitBy(queryHelper.encode(expectedUrlState), isNil) },
             null,
             { scroll: false, shallow: true },
           );
-        }
+          this.setState({ isNavigating: false });
+        });
       }
     }
-  }
+  };
 
   _getQueryParams = memoizeOne(query => {
     return this.getQueryHelper().decode(query);
@@ -615,8 +635,8 @@ class ContributionFlow extends React.Component {
       });
     }
 
-    // This checkout step is where the QR code is displayed for crypto
-    if (step.name === 'checkout') {
+    // This finalize step is where the QR code is displayed for crypto
+    if (step.name === 'finalize') {
       await this.submitOrder();
     }
 
@@ -628,9 +648,7 @@ class ContributionFlow extends React.Component {
   /** Navigate to another step, ensuring all route params are preserved */
   pushStepRoute = async (stepName, { query: newQueryParams, replace = false } = {}) => {
     // Reset errors if any
-    if (this.state.error) {
-      this.setState({ error: null });
-    }
+    this.setState({ error: null, isNavigating: true });
 
     // Navigate to the new route
     const { router } = this.props;
@@ -640,6 +658,7 @@ class ContributionFlow extends React.Component {
     const route = this.getRoute(stepName === 'details' ? '' : stepName);
     const navigateFn = replace ? router.replace : router.push;
     await navigateFn({ pathname: route, query: omitBy(encodedQueryParams, value => !value) }, null, { shallow: true });
+    this.setState({ isNavigating: false });
     this.scrollToTop();
 
     // Reinitialize form on success
@@ -795,7 +814,7 @@ class ContributionFlow extends React.Component {
     }
 
     // Hide step payment if using a free tier with fixed price
-    // Also hide payment screen if using crypto payment method, we handle crypto flow in the `checkout` step below
+    // Also hide payment screen if using crypto payment method, we handle crypto flow in the `finalize` step below
     if (!noPaymentRequired && !isCrypto) {
       steps.push({
         name: 'payment',
@@ -830,7 +849,7 @@ class ContributionFlow extends React.Component {
 
     if (isCrypto) {
       steps.push({
-        name: 'checkout',
+        name: 'finalize',
         label: intl.formatMessage(STEP_LABELS.payment),
         isCompleted: !stepProfile?.contributorRejectedCategories,
       });
@@ -996,7 +1015,7 @@ class ContributionFlow extends React.Component {
                     collective={collective}
                     tier={tier}
                     mainState={this.state}
-                    onChange={data => this.setState(data)}
+                    onChange={data => this.setState(data, this.updateRouteFromState)}
                     step={currentStep}
                     isCrypto={isCrypto}
                     showPlatformTip={this.canHavePlatformTips()}
@@ -1021,10 +1040,10 @@ class ContributionFlow extends React.Component {
                   <Box mt={40}>
                     <ContributionFlowButtons
                       goNext={goNext}
-                      // for crypto flow the user should not be able to go back after the order is created at checkout step
+                      // for crypto flow the user should not be able to go back after the order is created at finalize step
                       // we also don't want to show the back button when linking directly to the payment step with `hideSteps=true`
                       goBack={
-                        (isCrypto && currentStep.name === STEPS.CHECKOUT) ||
+                        (isCrypto && currentStep.name === STEPS.FINALIZE) ||
                         (queryParams.hideSteps && currentStep.name === STEPS.PAYMENT)
                           ? null
                           : goBack
@@ -1039,6 +1058,7 @@ class ContributionFlow extends React.Component {
                       tier={tier}
                       stepDetails={stepDetails}
                       stepSummary={stepSummary}
+                      disabled={this.state.isInitializing || this.state.isNavigating}
                     />
                   </Box>
                   {!isEmbed && (

components/edit-collective/SocialLinksFormField.tsx

@@ -71,7 +71,7 @@ export default function SocialLinksFormField({ value = [], touched, onChange }:
 
   return (
     <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
-      <Flex width="100%" flexDirection="column">
+      <Flex width="100%" flexDirection="column" data-cy="social-link-inputs">
         <SortableContext items={items.map(item => item.sortId)} strategy={verticalListSortingStrategy}>
           {items.map(socialLink => {
             return (

components/host-dashboard/reports-section/PlatformTipsCollected.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Image from 'next/image';
 import { FormattedMessage } from 'react-intl';
 
 import Container from '../../Container';
 import FormattedMoneyAmount, { DEFAULT_AMOUNT_STYLES } from '../../FormattedMoneyAmount';
 import { Box, Flex } from '../../Grid';
+import Image from '../../Image';
 import LoadingPlaceholder from '../../LoadingPlaceholder';
 import { P, Span } from '../../Text';