Deprecate Sofort

changelog/dev-sofort-deprecation

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Deprecate Sofort for any merchants who have not enabled it. Warn existing merchants about future deprecation.

client/components/payment-methods-list/payment-method.scss

@@ -1,7 +1,20 @@
-.payment-method {
+.payment-method__list-item {
 	display: flex;
+	flex-direction: column;
 	margin: 0;
 	padding: 24px;
+
+	&:not( :last-child ) {
+		box-shadow: inset 0 -1px 0 #e8eaeb;
+	}
+
+	& .sofort__notice {
+		margin-top: 20px;
+	}
+}
+
+.payment-method {
+	display: flex;
 	background: #fff;
 	justify-content: space-between;
 	align-items: center;
@@ -10,10 +23,6 @@
 		flex-wrap: nowrap;
 	}
 
-	&:not( :last-child ) {
-		box-shadow: inset 0 -1px 0 #e8eaeb;
-	}
-
 	&__text {
 		flex: 1 1 100%;
 		order: 1;

client/components/payment-methods-list/payment-method.tsx

@@ -23,6 +23,7 @@ import Chip from '../chip';
 import LoadableCheckboxControl from '../loadable-checkbox';
 import { getDocumentationUrlForDisabledPaymentMethod } from '../payment-method-disabled-tooltip';
 import Pill from '../pill';
+import InlineNotice from '../inline-notice';
 import './payment-method.scss';
 
 interface PaymentMethodProps {
@@ -127,6 +128,8 @@ const PaymentMethod = ( {
 		upeCapabilityStatuses.PENDING_VERIFICATION,
 	].includes( status );
 
+	const shouldDisplayNotice = id === 'sofort';
+
 	const needsOverlay =
 		( isManualCaptureEnabled && ! isAllowingManualCapture ) ||
 		isSetupRequired ||
@@ -209,83 +212,108 @@ const PaymentMethod = ( {
 	return (
 		<li
 			className={ classNames(
-				'payment-method',
+				'payment-method__list-item',
 				{ 'has-icon-border': id !== 'card' },
 				{ overlay: needsOverlay },
 				className
 			) }
 		>
-			<div className="payment-method__checkbox">
-				<LoadableCheckboxControl
-					label={ label }
-					checked={ checked }
-					disabled={ disabled || locked }
-					onChange={ handleChange }
-					delayMsOnCheck={ 1500 }
-					delayMsOnUncheck={ 0 }
-					hideLabel
-					isAllowingManualCapture={ isAllowingManualCapture }
-					isSetupRequired={ isSetupRequired }
-					setupTooltip={ getTooltipContent( id ) as any }
-					needsAttention={ needsAttention }
-				/>
-			</div>
-			<div className="payment-method__text-container">
-				<div className="payment-method__icon">
-					<Icon />
-				</div>
-				<div className="payment-method__label payment-method__label-mobile">
-					<PaymentMethodLabel
+			<div className="payment-method">
+				<div className="payment-method__checkbox">
+					<LoadableCheckboxControl
 						label={ label }
-						required={ required }
-						status={ status }
-						disabled={ disabled }
+						checked={ checked }
+						disabled={ disabled || locked }
+						onChange={ handleChange }
+						delayMsOnCheck={ 1500 }
+						delayMsOnUncheck={ 0 }
+						hideLabel
+						isAllowingManualCapture={ isAllowingManualCapture }
+						isSetupRequired={ isSetupRequired }
+						setupTooltip={ getTooltipContent( id ) as any }
+						needsAttention={ needsAttention }
 					/>
 				</div>
-				<div className="payment-method__text">
-					<div className="payment-method__label-container">
-						<div className="payment-method__label payment-method__label-desktop">
-							<PaymentMethodLabel
-								label={ label }
-								required={ required }
-								status={ status }
-								disabled={ disabled }
-							/>
-						</div>
-						<div className="payment-method__description">
-							{ description }
-						</div>
+				<div className="payment-method__text-container">
+					<div className="payment-method__icon">
+						<Icon />
+					</div>
+					<div className="payment-method__label payment-method__label-mobile">
+						<PaymentMethodLabel
+							label={ label }
+							required={ required }
+							status={ status }
+							disabled={ disabled }
+						/>
 					</div>
-					{ accountFees && accountFees[ id ] && (
-						<div className="payment-method__fees">
-							<HoverTooltip
-								maxWidth={ '300px' }
-								content={ formatMethodFeesTooltip(
-									accountFees[ id ]
-								) }
-							>
-								<Pill
-									aria-label={ sprintf(
-										__(
-											'Base transaction fees: %s',
-											'woocommerce-payments'
-										),
-										formatMethodFeesDescription(
-											accountFees[ id ]
-										)
+					<div className="payment-method__text">
+						<div className="payment-method__label-container">
+							<div className="payment-method__label payment-method__label-desktop">
+								<PaymentMethodLabel
+									label={ label }
+									required={ required }
+									status={ status }
+									disabled={ disabled }
+								/>
+							</div>
+							<div className="payment-method__description">
+								{ description }
+							</div>
+						</div>
+						{ accountFees && accountFees[ id ] && (
+							<div className="payment-method__fees">
+								<HoverTooltip
+									maxWidth={ '300px' }
+									content={ formatMethodFeesTooltip(
+										accountFees[ id ]
 									) }
 								>
-									<span>
-										{ formatMethodFeesDescription(
-											accountFees[ id ]
+									<Pill
+										aria-label={ sprintf(
+											__(
+												'Base transaction fees: %s',
+												'woocommerce-payments'
+											),
+											formatMethodFeesDescription(
+												accountFees[ id ]
+											)
 										) }
-									</span>
-								</Pill>
-							</HoverTooltip>
-						</div>
-					) }
+									>
+										<span>
+											{ formatMethodFeesDescription(
+												accountFees[ id ]
+											) }
+										</span>
+									</Pill>
+								</HoverTooltip>
+							</div>
+						) }
+					</div>
 				</div>
 			</div>
+			{ shouldDisplayNotice && (
+				<InlineNotice
+					status="warning"
+					icon={ true }
+					isDismissible={ false }
+					className="sofort__notice"
+				>
+					<span>
+						{ __(
+							'Support for Sofort is ending soon. ',
+							'woocommerce-payments'
+						) }
+						<a
+							// eslint-disable-next-line max-len
+							href="https://woocommerce.com/document/woopayments/payment-methods/additional-payment-methods/#sofort-deprecation"
+							target="_blank"
+							rel="external noreferrer noopener"
+						>
+							{ __( 'Learn more', 'woocommerce-payments' ) }
+						</a>
+					</span>
+				</InlineNotice>
+			) }
 		</li>
 	);
 };

client/connect-account-page/payment-methods.tsx

@@ -12,7 +12,6 @@ import DinersClub from 'assets/images/cards/diners.svg?asset';
 import GooglePay from 'assets/images/cards/google-pay.svg?asset';
 import JCB from 'assets/images/cards/jcb.svg?asset';
 import MasterCard from 'assets/images/cards/mastercard.svg?asset';
-import Sofort from 'assets/images/payment-methods/sofort.svg?asset';
 import UnionPay from 'assets/images/cards/unionpay.svg?asset';
 import Visa from 'assets/images/cards/visa.svg?asset';
 import WooPay from 'assets/images/payment-methods/woopay.svg?asset';
@@ -37,7 +36,6 @@ const PaymentMethods: React.FC = () => {
 				<img src={ DinersClub } alt="DinersClub" />
 				<img src={ UnionPay } alt="UnionPay" />
 				<img src={ JCB } alt="JCB" />
-				<img src={ Sofort } alt="Sofort" />
 				<img src={ Affirm } alt="Affirm" />
 				<img src={ AfterPay } alt="AfterPay" />
 				<span>& more.</span>

client/connect-account-page/strings.tsx

@@ -18,7 +18,7 @@ export default {
 			firstName ? ` ${ firstName }` : ''
 		),
 	usp1: __(
-		'Offer card payments, Apple Pay, Sofort, iDeal, Affirm, Afterpay, and accept in-person payments with the Woo mobile app.',
+		'Offer card payments, Apple Pay, iDeal, Affirm, Afterpay, and accept in-person payments with the Woo mobile app.',
 		'woocommerce-payments'
 	),
 	usp2: __(

client/connect-account-page/test/__snapshots__/index.test.tsx.snap

@@ -44,7 +44,7 @@ exports[`ConnectAccountPage should render correctly 1`] = `
                 fill-rule="evenodd"
               />
             </svg>
-            Offer card payments, Apple Pay, Sofort, iDeal, Affirm, Afterpay, and accept in-person payments with the Woo mobile app.
+            Offer card payments, Apple Pay, iDeal, Affirm, Afterpay, and accept in-person payments with the Woo mobile app.
             <svg
               class="gridicon gridicons-globe"
               height="24"
@@ -148,10 +148,6 @@ exports[`ConnectAccountPage should render correctly 1`] = `
               alt="JCB"
               src="assets/images/cards/jcb.svg"
             />
-            <img
-              alt="Sofort"
-              src="assets/images/payment-methods/sofort.svg"
-            />
             <img
               alt="Affirm"
               src="assets/images/payment-methods/affirm.svg"
@@ -361,7 +357,7 @@ exports[`ConnectAccountPage should render correctly with WooPay eligible 1`] = `
                 fill-rule="evenodd"
               />
             </svg>
-            Offer card payments, Apple Pay, Sofort, iDeal, Affirm, Afterpay, and accept in-person payments with the Woo mobile app.
+            Offer card payments, Apple Pay, iDeal, Affirm, Afterpay, and accept in-person payments with the Woo mobile app.
             <svg
               class="gridicon gridicons-globe"
               height="24"
@@ -477,10 +473,6 @@ exports[`ConnectAccountPage should render correctly with WooPay eligible 1`] = `
               alt="JCB"
               src="assets/images/cards/jcb.svg"
             />
-            <img
-              alt="Sofort"
-              src="assets/images/payment-methods/sofort.svg"
-            />
             <img
               alt="Affirm"
               src="assets/images/payment-methods/affirm.svg"
@@ -652,7 +644,7 @@ exports[`ConnectAccountPage should render correctly with an incentive 1`] = `
                 fill-rule="evenodd"
               />
             </svg>
-            Offer card payments, Apple Pay, Sofort, iDeal, Affirm, Afterpay, and accept in-person payments with the Woo mobile app.
+            Offer card payments, Apple Pay, iDeal, Affirm, Afterpay, and accept in-person payments with the Woo mobile app.
             <svg
               class="gridicon gridicons-globe"
               height="24"
@@ -756,10 +748,6 @@ exports[`ConnectAccountPage should render correctly with an incentive 1`] = `
               alt="JCB"
               src="assets/images/cards/jcb.svg"
             />
-            <img
-              alt="Sofort"
-              src="assets/images/payment-methods/sofort.svg"
-            />
             <img
               alt="Affirm"
               src="assets/images/payment-methods/affirm.svg"

client/payment-methods/delete-modal.tsx

@@ -12,6 +12,7 @@ import interpolateComponents from '@automattic/interpolate-components';
  */
 import PaymentDeleteIllustration from '../components/payment-delete-illustration';
 import ConfirmationModal from '../components/confirmation-modal';
+import InlineNotice from 'wcpay/components/inline-notice';
 
 const ConfirmPaymentMethodDeleteModal: React.FunctionComponent< {
 	id: string;
@@ -20,6 +21,8 @@ const ConfirmPaymentMethodDeleteModal: React.FunctionComponent< {
 	onConfirm: () => void;
 	onCancel: () => void;
 } > = ( { id, label, icon: Icon, onConfirm, onCancel } ): JSX.Element => {
+	const shouldDisplayNotice = id === 'sofort';
+
 	return (
 		<ConfirmationModal
 			title={ sprintf(
@@ -65,7 +68,7 @@ const ConfirmPaymentMethodDeleteModal: React.FunctionComponent< {
 			<p>
 				{ interpolateComponents( {
 					mixedString: __(
-						'You can add it again at any time in {{wooCommercePaymentsLink /}}',
+						'You can add it again at any time in {{wooCommercePaymentsLink /}}.',
 						'woocommerce-payments'
 					),
 					components: {
@@ -77,6 +80,29 @@ const ConfirmPaymentMethodDeleteModal: React.FunctionComponent< {
 					},
 				} ) }
 			</p>
+			{ shouldDisplayNotice && (
+				<InlineNotice
+					status="warning"
+					icon={ true }
+					isDismissible={ false }
+					className="sofort__notice"
+				>
+					<span>
+						{ __(
+							'As of October 20th 2023, Sofort is no longer supported for merchants who are not already using it. This means that if you disable Sofort, you will not be able to re-enable it later. ',
+							'woocommerce-payments'
+						) }
+						<a
+							// eslint-disable-next-line max-len
+							href="https://woocommerce.com/document/woopayments/payment-methods/additional-payment-methods/#sofort-deprecation"
+							target="_blank"
+							rel="external noreferrer noopener"
+						>
+							{ __( 'Learn more', 'woocommerce-payments' ) }
+						</a>
+					</span>
+				</InlineNotice>
+			) }
 		</ConfirmationModal>
 	);
 };

client/payment-methods/test/__snapshots__/delete-modal.test.js.snap

@@ -117,6 +117,7 @@ exports[`Activation Modal matches the snapshot 1`] = `
           >
             WooPayments
           </a>
+          .
         </p>
         <hr
           class="wcpay-confirmation-modal__separator"

includes/admin/class-wc-rest-payments-settings-controller.php

@@ -434,8 +434,10 @@ public function validate_business_support_address( array $value, WP_REST_Request
 	 * @return WP_REST_Response
 	 */
 	public function get_settings(): WP_REST_Response {
-		$wcpay_form_fields             = $this->wcpay_gateway->get_form_fields();
+		$wcpay_form_fields = $this->wcpay_gateway->get_form_fields();
+
 		$available_upe_payment_methods = $this->wcpay_gateway->get_upe_available_payment_methods();
+
 		/**
 		 * It might be possible that enabled payment methods settings have an invalid state. As an example,
 		 * if an account is switched to a new country and earlier country had PM's that are no longer valid; or if the PM is not available anymore.