Merge branch 'develop' into dev/5101-add-e2e-test-non-admin-users-can…

…-login-to-wp-admin

assets/css/admin.css

@@ -143,6 +143,10 @@
 	background-image: url( '../images/payment-methods/grabpay.svg' );
 }
 
+.payment-method__brand--wechat_pay {
+	background-image: url( '../images/payment-methods/wechat-pay.svg' );
+}
+
 .wc_gateways tr[data-gateway_id='woocommerce_payments'] .payment-method__icon {
 	border: 1px solid #ddd;
 	border-radius: 2px;

changelog/add-wechat-checkout-support

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add WeChat Pay support to checkout.

client/checkout/blocks/index.js

@@ -42,6 +42,7 @@ import {
 	PAYMENT_METHOD_NAME_AFTERPAY,
 	PAYMENT_METHOD_NAME_KLARNA,
 	PAYMENT_METHOD_NAME_GRABPAY,
+	PAYMENT_METHOD_NAME_WECHAT_PAY,
 } from '../constants.js';
 import { getDeferredIntentCreationUPEFields } from './payment-elements';
 import { handleWooPayEmailInput } from '../woopay/email-input-iframe';
@@ -65,6 +66,7 @@ const upeMethods = {
 	afterpay_clearpay: PAYMENT_METHOD_NAME_AFTERPAY,
 	klarna: PAYMENT_METHOD_NAME_KLARNA,
 	grabpay: PAYMENT_METHOD_NAME_GRABPAY,
+	wechat_pay: PAYMENT_METHOD_NAME_WECHAT_PAY,
 };
 
 const enabledPaymentMethodsConfig = getUPEConfig( 'paymentMethodsConfig' );

client/checkout/constants.js

@@ -13,6 +13,7 @@ export const PAYMENT_METHOD_NAME_AFTERPAY =
 	'woocommerce_payments_afterpay_clearpay';
 export const PAYMENT_METHOD_NAME_KLARNA = 'woocommerce_payments_klarna';
 export const PAYMENT_METHOD_NAME_GRABPAY = 'woocommerce_payments_grabpay';
+export const PAYMENT_METHOD_NAME_WECHAT_PAY = 'woocommerce_payments_wechat_pay';
 export const PAYMENT_METHOD_NAME_EXPRESS_CHECKOUT_ELEMENT =
 	'woocommerce_payments_express_checkout';
 export const PAYMENT_METHOD_NAME_WOOPAY_EXPRESS_CHECKOUT =
@@ -36,6 +37,7 @@ export function getPaymentMethodsConstants() {
 		PAYMENT_METHOD_NAME_CARD,
 		PAYMENT_METHOD_NAME_KLARNA,
 		PAYMENT_METHOD_NAME_GRABPAY,
+		PAYMENT_METHOD_NAME_WECHAT_PAY,
 	];
 }
 

client/components/payment-method-details/index.js

@@ -47,6 +47,7 @@ const formatDetails = ( payment ) => {
 		case 'affirm':
 		case 'afterpay_clearpay':
 		case 'klarna':
+		case 'wechat_pay':
 		default:
 			return <Fragment />;
 	}

client/components/payment-method-logos/index.tsx

@@ -28,7 +28,7 @@ import Bancontact from 'assets/images/payment-methods/bancontact.svg?asset';
 import Eps from 'assets/images/payment-methods/eps.svg?asset';
 import Becs from 'assets/images/payment-methods/becs.svg?asset';
 import Przelewy24 from 'assets/images/payment-methods/przelewy24.svg?asset';
-import WeChatPay from 'assets/images/payment-method-icons/wechat_pay.svg?asset';
+import WeChatPay from 'assets/images/payment-method-icons/wechat-pay.svg?asset';
 import './style.scss';
 
 const PaymentMethods = [

client/constants/payment-method.ts

@@ -59,7 +59,6 @@ export const PAYMENT_METHOD_TITLES = {
 	stripe_account: __( 'Stripe Account', 'woocommerce-payments' ),
 	unionpay: __( 'Union Pay', 'woocommerce-payments' ),
 	visa: __( 'Visa', 'woocommerce-payments' ),
-	wechat: __( 'WeChat', 'woocommerce-payments' ),
 	wechat_pay: __( 'WeChat Pay', 'woocommerce-payments' ),
 };
 

client/payment-details/payment-method/index.js

@@ -24,6 +24,7 @@ import KlarnaDetails from './klarna';
 import P24Details from './p24';
 import SepaDetails from './sepa';
 import SofortDetails from './sofort';
+import WeChatPayDetails from './wechat-pay';
 
 const detailsComponentMap = {
 	affirm: AffirmDetails,
@@ -40,6 +41,7 @@ const detailsComponentMap = {
 	p24: P24Details,
 	sepa_debit: SepaDetails,
 	sofort: SofortDetails,
+	wechat_pay: WeChatPayDetails,
 };
 
 const PaymentDetailsPaymentMethod = ( { charge = {}, isLoading } ) => {

client/payment-details/payment-method/wechat-pay/index.tsx

@@ -0,0 +1,98 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import React from 'react';
+
+/**
+ * Internal dependencies.
+ */
+import Detail from '../detail';
+import { PaymentMethodDetails } from 'wcpay/payment-details/types';
+import { Charge } from 'wcpay/types/charges';
+
+/**
+ * Extracts and formats payment method details from a charge.
+ *
+ * @param {Charge} charge The charge object.
+ * @return {PaymentMethodDetails} A flat hash of all necessary values.
+ */
+const formatPaymentMethodDetails = ( charge: Charge ): PaymentMethodDetails => {
+	const { billing_details: billingDetails, payment_method: id } = charge;
+	const { name, email, formatted_address: formattedAddress } = billingDetails;
+
+	return {
+		id,
+		name,
+		email,
+		formattedAddress,
+	};
+};
+
+/**
+ * Placeholders to display while loading.
+ */
+const paymentMethodPlaceholders: PaymentMethodDetails = {
+	id: 'id placeholder',
+	name: 'name placeholder',
+	email: 'email placeholder',
+	formattedAddress: 'address placeholder',
+};
+
+interface WeChatPayDetailsProps {
+	charge?: Charge;
+	isLoading: boolean;
+}
+
+const WeChatPayDetails: React.FC< WeChatPayDetailsProps > = ( {
+	charge,
+	isLoading,
+} ) => {
+	const { id, name, email, formattedAddress } =
+		charge && charge.payment_method_details
+			? formatPaymentMethodDetails( charge )
+			: paymentMethodPlaceholders;
+
+	return (
+		<div className="payment-method-details">
+			<div className="payment-method-details__column">
+				<Detail
+					isLoading={ isLoading }
+					label={ __( 'ID', 'woocommerce-payments' ) }
+				>
+					{ !! id ? id : '–' }
+				</Detail>
+			</div>
+
+			<div className="payment-method-details__column">
+				<Detail
+					isLoading={ isLoading }
+					label={ __( 'Owner', 'woocommerce-payments' ) }
+				>
+					{ name || '–' }
+				</Detail>
+
+				<Detail
+					isLoading={ isLoading }
+					label={ __( 'Owner email', 'woocommerce-payments' ) }
+				>
+					{ email || '–' }
+				</Detail>
+
+				<Detail
+					isLoading={ isLoading }
+					label={ __( 'Address', 'woocommerce-payments' ) }
+				>
+					<span
+						// eslint-disable-next-line react/no-danger
+						dangerouslySetInnerHTML={ {
+							__html: formattedAddress || '–',
+						} }
+					/>
+				</Detail>
+			</div>
+		</div>
+	);
+};
+
+export default WeChatPayDetails;

client/payment-methods-icons.tsx

@@ -36,7 +36,7 @@ import CBAsset from 'assets/images/cards/cb.svg?asset';
 import UnionPayAsset from 'assets/images/cards/unionpay.svg?asset';
 import LinkAsset from 'assets/images/payment-methods/link.svg?asset';
 import CreditCardAsset from 'assets/images/payment-methods/cc.svg?asset';
-import WeChatPayAsset from 'assets/images/payment-methods/wechat_pay.svg?asset';
+import WeChatPayAsset from 'assets/images/payment-methods/wechat-pay.svg?asset';
 import './style.scss';
 
 const iconComponent = (

includes/payment-methods/class-wechatpay-payment-method.php

@@ -28,10 +28,48 @@ public function __construct( $token_service ) {
 		$this->stripe_id                    = self::PAYMENT_METHOD_STRIPE_ID;
 		$this->is_reusable                  = false;
 		$this->is_bnpl                      = false;
-		$this->icon_url                     = plugins_url( 'assets/images/payment-methods/wechat_pay.svg', WCPAY_PLUGIN_FILE );
-		$this->currencies                   = [ Currency_Code::UNITED_STATES_DOLLAR, Currency_Code::CHINESE_YUAN, Currency_Code::AUSTRALIAN_DOLLAR, Currency_Code::CANADIAN_DOLLAR, Currency_Code::EURO, Currency_Code::POUND_STERLING, Currency_Code::HONG_KONG_DOLLAR, Currency_Code::JAPANESE_YEN, Currency_Code::SINGAPORE_DOLLAR, Currency_Code::DANISH_KRONE, Currency_Code::NORWEGIAN_KRONE, Currency_Code::SWEDISH_KRONA, Currency_Code::SWISS_FRANC ];
+		$this->icon_url                     = plugins_url( 'assets/images/payment-methods/wechat-pay.svg', WCPAY_PLUGIN_FILE );
+		$this->currencies                   = [
+			Currency_Code::UNITED_STATES_DOLLAR,
+			Currency_Code::CHINESE_YUAN,
+			Currency_Code::AUSTRALIAN_DOLLAR,
+			Currency_Code::CANADIAN_DOLLAR,
+			Currency_Code::EURO,
+			Currency_Code::POUND_STERLING,
+			Currency_Code::HONG_KONG_DOLLAR,
+			Currency_Code::JAPANESE_YEN,
+			Currency_Code::SINGAPORE_DOLLAR,
+			Currency_Code::DANISH_KRONE,
+			Currency_Code::NORWEGIAN_KRONE,
+			Currency_Code::SWEDISH_KRONA,
+			Currency_Code::SWISS_FRANC,
+		];
 		$this->accept_only_domestic_payment = false;
-		$this->countries                    = [ Country_Code::UNITED_STATES, Country_Code::CHINA, Country_Code::AUSTRALIA, Country_Code::CANADA, Country_Code::AUSTRIA, Country_Code::BELGIUM, Country_Code::DENMARK, Country_Code::FINLAND, Country_Code::FRANCE, Country_Code::GERMANY, Country_Code::IRELAND, Country_Code::ITALY, Country_Code::LUXEMBOURG, Country_Code::NETHERLANDS, Country_Code::NORWAY, Country_Code::PORTUGAL, Country_Code::SPAIN, Country_Code::SWEDEN, Country_Code::SWITZERLAND, Country_Code::UNITED_KINGDOM, Country_Code::HONG_KONG, Country_Code::JAPAN, Country_Code::SINGAPORE ];
+		$this->countries                    = [
+			Country_Code::UNITED_STATES,
+			Country_Code::CHINA,
+			Country_Code::AUSTRALIA,
+			Country_Code::CANADA,
+			Country_Code::AUSTRIA,
+			Country_Code::BELGIUM,
+			Country_Code::DENMARK,
+			Country_Code::FINLAND,
+			Country_Code::FRANCE,
+			Country_Code::GERMANY,
+			Country_Code::IRELAND,
+			Country_Code::ITALY,
+			Country_Code::LUXEMBOURG,
+			Country_Code::NETHERLANDS,
+			Country_Code::NORWAY,
+			Country_Code::PORTUGAL,
+			Country_Code::SPAIN,
+			Country_Code::SWEDEN,
+			Country_Code::SWITZERLAND,
+			Country_Code::UNITED_KINGDOM,
+			Country_Code::HONG_KONG,
+			Country_Code::JAPAN,
+			Country_Code::SINGAPORE,
+		];
 	}
 
 	/**
@@ -55,4 +93,66 @@ public function get_title( ?string $account_country = null, $payment_details = f
 	public function get_testing_instructions( string $account_country ) {
 		return '';
 	}
+
+	/**
+	 * Returns payment method supported currencies for the merchant's account.
+	 *
+	 * @return array
+	 */
+	public function get_currencies() {
+		$account         = \WC_Payments::get_account_service()->get_cached_account_data();
+		$account_country = isset( $account['country'] ) ? strtoupper( $account['country'] ) : '';
+
+		// Map countries to their primary currencies.
+		switch ( $account_country ) {
+			case Country_Code::AUSTRALIA:
+				return [ Currency_Code::AUSTRALIAN_DOLLAR, Currency_Code::CHINESE_YUAN ];
+			case Country_Code::CANADA:
+				return [ Currency_Code::CANADIAN_DOLLAR, Currency_Code::CHINESE_YUAN ];
+			case Country_Code::CHINA:
+				return [ Currency_Code::CHINESE_YUAN ];
+			case Country_Code::DENMARK:
+				return [ Currency_Code::DANISH_KRONE, Currency_Code::EURO, Currency_Code::CHINESE_YUAN ];
+			case Country_Code::HONG_KONG:
+				return [ Currency_Code::HONG_KONG_DOLLAR, Currency_Code::CHINESE_YUAN ];
+			case Country_Code::JAPAN:
+				return [ Currency_Code::JAPANESE_YEN, Currency_Code::CHINESE_YUAN ];
+			case Country_Code::NORWAY:
+				return [ Currency_Code::NORWEGIAN_KRONE, Currency_Code::EURO, Currency_Code::CHINESE_YUAN ];
+			case Country_Code::SINGAPORE:
+				return [ Currency_Code::SINGAPORE_DOLLAR, Currency_Code::CHINESE_YUAN ];
+			case Country_Code::SWEDEN:
+				return [ Currency_Code::SWEDISH_KRONA, Currency_Code::EURO, Currency_Code::CHINESE_YUAN ];
+			case Country_Code::SWITZERLAND:
+				return [ Currency_Code::SWISS_FRANC, Currency_Code::EURO, Currency_Code::CHINESE_YUAN ];
+			case Country_Code::UNITED_KINGDOM:
+				return [ Currency_Code::POUND_STERLING, Currency_Code::CHINESE_YUAN ];
+			case Country_Code::UNITED_STATES:
+				return [ Currency_Code::UNITED_STATES_DOLLAR, Currency_Code::CHINESE_YUAN ];
+			default:
+				// For all European countries in the supported list, return EUR and CNY.
+				if ( in_array(
+					$account_country,
+					[
+						Country_Code::AUSTRIA,
+						Country_Code::BELGIUM,
+						Country_Code::FINLAND,
+						Country_Code::FRANCE,
+						Country_Code::GERMANY,
+						Country_Code::IRELAND,
+						Country_Code::ITALY,
+						Country_Code::LUXEMBOURG,
+						Country_Code::NETHERLANDS,
+						Country_Code::PORTUGAL,
+						Country_Code::SPAIN,
+					],
+					true
+				) ) {
+					return [ Currency_Code::EURO, Currency_Code::CHINESE_YUAN ];
+				}
+
+				// Default to Chinese Yuan.
+				return [ Currency_Code::CHINESE_YUAN ];
+		}
+	}
 }