Merge branch 'trunk' of github.com:woocommerce/woocommerce-paypal-payments into PCP-4487-fastlane-uk-3ds-redirect

modules/ppcp-api-client/src/Endpoint/BillingAgreementsEndpoint.php

@@ -135,12 +135,12 @@ class BillingAgreementsEndpoint {
 				);
 			} finally {
 				$this->is_request_logging_enabled = true;
-				set_transient( 'ppcp_reference_transaction_enabled', true, MONTH_IN_SECONDS );
 			}
 
+			set_transient( 'ppcp_reference_transaction_enabled', true, MONTH_IN_SECONDS );
 			return true;
 		} catch ( Exception $exception ) {
-			delete_transient( 'ppcp_reference_transaction_enabled' );
+			set_transient( 'ppcp_reference_transaction_enabled', false, HOUR_IN_SECONDS );
 			return false;
 		}
 	}

modules/ppcp-settings/resources/css/components/reusable-components/_elements.scss

@@ -69,3 +69,23 @@
 		margin-top: var(--block-action-gap, 16px);
 	}
 }
+
+.ppcp--notice {
+	display: block;
+	padding: 10px;
+	margin: 10px 0;
+	line-height: 1.5714285714;
+	font-size: 0.8125rem;
+	background: var(--notice-background);
+	color: var(--notice-text);
+
+	&.type--info {
+		--notice-background: var(--color-success-background);
+		--notice-text: var(--color-success-text);
+	}
+
+	&.type--error {
+		--notice-background: var(--color-failure-background);
+		--notice-text: var(--color-failure-text);
+	}
+}

modules/ppcp-settings/resources/css/components/screens/_onboarding.scss

@@ -12,6 +12,10 @@
 
 	.ppcp-r-inner-container {
 		max-width: var(--max-width-onboarding-content);
+
+		&.ppcp--wide {
+			--max-width-onboarding-content: none;
+		}
 	}
 
 	.ppcp-r-payment-method--separator {

modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Notice.js

@@ -0,0 +1,17 @@
+import classNames from 'classnames';
+
+const Notice = ( { children, type = 'info', className = '' } ) => {
+	if ( ! children ) {
+		return null;
+	}
+
+	const elementClasses = classNames(
+		'ppcp--notice',
+		`type--${ type }`,
+		className
+	);
+
+	return <span className={ elementClasses }>{ children }</span>;
+};
+
+export default Notice;

modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/index.js

@@ -9,6 +9,7 @@ export { default as ContentWrapper } from './ContentWrapper';
 export { default as Description } from './Description';
 export { default as Header } from './Header';
 export { default as LearnMore } from './LearnMore';
+export { default as Notice } from './Notice';
 export { default as Separator } from './Separator';
 export { default as Title } from './Title';
 export { default as TitleExtra } from './TitleExtra';

modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/ConnectionButton.js

@@ -1,9 +1,18 @@
 import { Button } from '@wordpress/components';
 import { useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 import classNames from 'classnames';
 import { OpenSignup } from '../../../ReusableComponents/Icons';
 import { useHandleOnboardingButton } from '../../../../hooks/useHandleConnections';
 import BusyStateWrapper from '../../../ReusableComponents/BusyStateWrapper';
+import { Notice } from '../../../ReusableComponents/Elements';
+
+const useIsFirefox = () => {
+	if ( typeof window === 'undefined' ) {
+		return false;
+	}
+	return window.navigator.userAgent.toLowerCase().indexOf( 'firefox' ) > -1;
+};
 
 /**
  * Button component that outputs a placeholder button when no onboardingUrl is present yet - the
@@ -24,6 +33,8 @@ const ButtonOrPlaceholder = ( {
 	href,
 	children,
 } ) => {
+	const isFirefox = useIsFirefox();
+
 	const buttonProps = {
 		className,
 		variant,
@@ -36,6 +47,20 @@ const ButtonOrPlaceholder = ( {
 		buttonProps[ 'data-paypal-onboard-button' ] = 'true';
 	}
 
+	if ( isFirefox ) {
+		return (
+			<>
+				<Button { ...buttonProps }>{ children }</Button>
+				<Notice type={ 'error' }>
+					{ __(
+						'This button may not work in Firefox. Please use another browser, like Chrome, to complete this step.',
+						'woocommerce-paypal-payments'
+					) }
+				</Notice>
+			</>
+		);
+	}
+
 	return <Button { ...buttonProps }>{ children }</Button>;
 };
 

modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepCompleteSetup.js

@@ -16,7 +16,7 @@ const StepCompleteSetup = () => {
 					'woocommerce-paypal-payments'
 				) }
 			/>
-			<div className="ppcp-r-inner-container">
+			<div className="ppcp-r-inner-container ppcp--wide">
 				<div className="ppcp-r-onboarding-header__description">
 					<ConnectionButton
 						title={ __(