Add Billing Details updating when a new card gets selected

modules/ppcp-axo-block/resources/js/components/AddressCard.js

@@ -0,0 +1,68 @@
+import { __ } from '@wordpress/i18n';
+
+const AddressCard = ( { address, onEdit, isExpanded } ) => {
+	const formatAddress = ( addressData ) => {
+		const {
+			first_name,
+			last_name,
+			company,
+			address_1,
+			address_2,
+			city,
+			state,
+			postcode,
+			country,
+		} = addressData;
+		const formattedAddress = [
+			`${ first_name } ${ last_name }`,
+			company,
+			address_1,
+			address_2,
+			city,
+			state,
+			postcode,
+			country,
+		].filter( Boolean );
+
+		return formattedAddress;
+	};
+
+	const formattedAddress = formatAddress( address );
+
+	return (
+		<div className="wc-block-components-axo-address-card">
+			<address>
+				{ formattedAddress.map( ( line, index ) => (
+					<span
+						key={ index }
+						className="wc-block-components-axo-address-card__address-section"
+					>
+						{ line }
+					</span>
+				) ) }
+				{ address.phone && (
+					<div className="wc-block-components-axo-address-card__address-section">
+						{ address.phone }
+					</div>
+				) }
+			</address>
+			{ onEdit && (
+				<button
+					className="wc-block-components-axo-address-card__edit"
+					aria-controls="shipping"
+					aria-expanded={ isExpanded }
+					aria-label={ __( 'Edit shipping address', 'woocommerce' ) }
+					onClick={ ( e ) => {
+						e.preventDefault();
+						onEdit();
+					} }
+					type="button"
+				>
+					{ __( 'Edit', 'woocommerce' ) }
+				</button>
+			) }
+		</div>
+	);
+};
+
+export default AddressCard;

modules/ppcp-axo-block/resources/js/components/CreditCard.js

@@ -11,14 +11,8 @@ const cardIcons = {
 	UNIONPAY: 'unionpay-light.svg',
 };
 
-export const CreditCard = ( {
-	card,
-	shippingAddress,
-	fastlaneSdk,
-	showWatermark = true,
-} ) => {
-	const { brand, lastDigits, expiry } = card?.paymentSource?.card ?? {};
-	const { fullName } = shippingAddress?.name ?? {};
+export const CreditCard = ( { card, fastlaneSdk, showWatermark = true } ) => {
+	const { brand, lastDigits, expiry, name } = card?.paymentSource?.card ?? {};
 
 	const cardLogo = useMemo( () => {
 		return cardIcons[ brand ] ? (
@@ -48,7 +42,7 @@ export const CreditCard = ( {
 						{ cardLogo }
 					</div>
 					<div className="wc-block-checkout-axo-block-card__meta">
-						<span>{ fullName }</span>
+						<span>{ name }</span>
 						<span>{ formattedExpiry }</span>{ ' ' }
 					</div>
 				</div>

modules/ppcp-axo-block/resources/js/components/Payment.js

@@ -6,7 +6,6 @@ import { STORE_NAME } from '../stores/axoStore';
 export const Payment = ( {
 	fastlaneSdk,
 	card,
-	shippingAddress,
 	onPaymentLoad,
 } ) => {
 	const isGuest = useSelect( ( select ) =>
@@ -32,9 +31,7 @@ export const Payment = ( {
 		<div id="fastlane-card" key="fastlane-card" />
 	) : (
 		<CreditCard
-			key="custom-card"
 			card={ card }
-			shippingAddress={ shippingAddress }
 			fastlaneSdk={ fastlaneSdk }
 			showWatermark={ ! isGuest }
 		/>