Merge branch 'develop' into fix/refund-on-cancel

Author: elazzabi

changelog/fix-woopay-blocks-field

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+WooPay component spacing issues on blocks and classic checkout.

changelog/update-remove-payout-status-icon

@@ -0,0 +1,5 @@
+Significance: patch
+Type: update
+Comment: New Account Details: Remove the payout icon status to be consistent with account status (without icon)
+
+

client/checkout/blocks/style.scss

@@ -16,10 +16,6 @@
 	padding: 0;
 }
 
-#contact-fields {
-	padding-bottom: 1.5em;
-}
-
 .wc-block-components-text-input button.wcpay-stripelink-modal-trigger {
 	top: 50%;
 	transform: translateY( -50% );
@@ -96,13 +92,8 @@ button.wcpay-stripelink-modal-trigger:hover {
 	}
 }
 
-#remember-me {
-	h2 {
-		font-size: 18px;
-		font-weight: 600;
-		line-height: 21.6px;
-		letter-spacing: -0.01em;
-	}
+#remember-me:empty {
+	margin-bottom: 0;
 }
 
 #payment-method {

client/components/account-details/__tests__/index.test.tsx

@@ -47,7 +47,6 @@ describe( 'AccountDetails', () => {
 			payout_status: {
 				text: 'Available',
 				background_color: 'green',
-				icon: 'published',
 			},
 			banner: null,
 		};
@@ -70,7 +69,6 @@ describe( 'AccountDetails', () => {
 			payout_status: {
 				text: 'Disabled',
 				background_color: 'red',
-				icon: 'error',
 			},
 			banner: {
 				text: 'Your account has been restricted by Stripe.',
@@ -98,7 +96,6 @@ describe( 'AccountDetails', () => {
 			payout_status: {
 				text: 'Disabled',
 				background_color: 'red',
-				icon: 'error',
 			},
 			banner: {
 				text: 'Your account has been rejected.',
@@ -127,7 +124,6 @@ describe( 'AccountDetails', () => {
 			payout_status: {
 				text: 'Available in 2 days',
 				background_color: 'yellow',
-				icon: 'caution',
 				popover: {
 					text: 'Payouts are processed within 2 business days.',
 					cta_text: 'Learn more',
@@ -154,7 +150,6 @@ describe( 'AccountDetails', () => {
 			payout_status: {
 				text: 'Available',
 				background_color: 'green',
-				icon: 'published',
 			},
 			banner: null,
 		};
@@ -180,7 +175,6 @@ describe( 'AccountDetails', () => {
 			payout_status: {
 				text: 'Available',
 				background_color: 'green',
-				icon: 'published',
 			},
 			banner: null,
 		};
@@ -206,7 +200,6 @@ describe( 'AccountDetails', () => {
 			payout_status: {
 				text: 'Available',
 				background_color: 'green',
-				icon: 'published',
 			},
 			banner: null,
 		};

client/components/account-details/index.tsx

@@ -6,7 +6,7 @@
 import React from 'react';
 import { __ } from '@wordpress/i18n';
 import { addQueryArgs } from '@wordpress/url';
-import { Card, CardBody, CardHeader, Flex } from '@wordpress/components';
+import { Card, CardBody, CardHeader } from '@wordpress/components';
 
 /**
  * Internal dependencies

client/components/account-details/payout-status-wrapper.tsx

@@ -14,7 +14,7 @@ import HelpOutlineIcon from 'gridicons/dist/help-outline';
 import Chip from 'wcpay/components/chip';
 import { ClickTooltip } from 'wcpay/components/tooltip';
 import { AccountDetailsData } from 'wcpay/types/account/account-details';
-import { getChipTypeFromColor, getIconByName } from './utils';
+import { getChipTypeFromColor } from './utils';
 
 const PayoutStatus: React.FC< {
 	payoutStatus: AccountDetailsData[ 'payout_status' ];
@@ -23,11 +23,7 @@ const PayoutStatus: React.FC< {
 
 	return (
 		<Flex align="center" gap={ 0 } justify="flex-start">
-			<Chip
-				type={ chipType }
-				message={ payoutStatus.text }
-				icon={ getIconByName( payoutStatus.icon ) }
-			/>
+			<Chip type={ chipType } message={ payoutStatus.text } />
 			{ payoutStatus.popover && (
 				<ClickTooltip
 					className={ 'payout-click-tooltip' }

client/components/woopay/save-user/checkout-page-save-user.js

@@ -385,24 +385,25 @@ const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => {
 								} }
 								isBlocksCheckout={ isBlocksCheckout }
 							/>
+
+							{ isBlocksCheckout && (
+								<ValidationInputError
+									elementId={ errorId }
+									propertyName={ errorId }
+								/>
+							) }
+							{ ! isBlocksCheckout && ! isPhoneValid && (
+								<p
+									id="validate-error-invalid-woopay-phone-number"
+									hidden={ isPhoneValid !== false }
+								>
+									{ __(
+										'Please enter a valid mobile phone number.',
+										'woocommerce-payments'
+									) }
+								</p>
+							) }
 						</div>
-						{ isBlocksCheckout && (
-							<ValidationInputError
-								elementId={ errorId }
-								propertyName={ errorId }
-							/>
-						) }
-						{ ! isBlocksCheckout && ! isPhoneValid && (
-							<p
-								id="validate-error-invalid-woopay-phone-number"
-								hidden={ isPhoneValid !== false }
-							>
-								{ __(
-									'Please enter a valid mobile phone number.',
-									'woocommerce-payments'
-								) }
-							</p>
-						) }
 						<AdditionalInformation />
 						<Agreement />
 					</div>

client/components/woopay/save-user/container.js

@@ -8,7 +8,13 @@ const Container = ( { children, isBlocksCheckout } ) => {
 	return (
 		<>
 			<div className="woopay-save-new-user-container">
-				<h2>{ __( 'Save my info' ) }</h2>
+				<div className="wc-block-components-checkout-step__heading-container">
+					<div className="wc-block-components-checkout-step__heading">
+						<h2 className="wc-block-components-title wc-block-components-checkout-step__title">
+							{ __( 'Save my info' ) }
+						</h2>
+					</div>
+				</div>
 				{ children }
 			</div>
 		</>

client/components/woopay/save-user/style.scss

@@ -1,9 +1,3 @@
-.woocommerce-checkout-payment {
-	.woopay-save-new-user-container {
-		padding: 1.41575em;
-	}
-}
-
 .woopay-save-new-user-container {
 	.save-details {
 		.wc-block-components-text-input input:-webkit-autofill {
@@ -37,7 +31,6 @@
 			flex: 1;
 
 			label {
-				gap: unset;
 				display: flex !important;
 				align-items: flex-start;
 				padding: 0;

client/settings/phone-input/style.scss

@@ -1,10 +1,6 @@
 @import '/node_modules/intl-tel-input/build/css/intlTelInput.css';
 
 .woopay-save-new-user-container {
-	display: flex;
-	flex-direction: column;
-	gap: $gap;
-
 	&:not( :empty ) {
 		#payment .wc_payment_methods.payment_methods.methods + & {
 			margin-top: $gap-large;
@@ -63,20 +59,19 @@
 		}
 
 		.additional-information {
-			font-size: 14px;
-			font-weight: 400;
+			font-size: var( --wp--preset--font-size--small, 14px );
 			line-height: 21px;
 			text-align: left;
 		}
 
 		.tos {
-			font-size: 12px;
+			font-size: 13px;
 		}
 
 		#validate-error-invalid-woopay-phone-number {
 			// Using rems to base this on the theme styles.
-			font-size: 0.875rem;
-			line-height: 1.5rem;
+			font-size: 13px;
+			line-height: 1;
 			margin-bottom: 0;
 			color: $alert-red;
 		}
@@ -91,7 +86,6 @@
 			box-shadow: none;
 			border: 1px solid $gray-300;
 			border-radius: 5px;
-			margin-left: 0.1rem;
 			width: calc( 100% - 0.25rem );
 
 			&::placeholder {