Add/appearance editor

client/cart/blocks/product-details.js

@@ -16,6 +16,7 @@ import { getUPEConfig } from 'utils/checkout';
 import WCPayAPI from '../../checkout/api';
 import request from '../../checkout/utils/request';
 import { useEffect, useState } from 'react';
+import { initializeUpeAppearanceEditor } from 'wcpay/utils/upe-appearance-editor';
 
 // Create an API object, which will be used throughout the checkout.
 const api = new WCPayAPI(
@@ -59,10 +60,20 @@ const ProductDetail = ( { cart, context } ) => {
 				'bnpl_cart_block'
 			);
 			setAppearance( upeAppearance );
+			initializeUpeAppearanceEditor(
+				upeAppearance,
+				'bnpl_cart_block',
+				api,
+				[ 'pmme' ]
+			);
 		}
 
 		if ( Object.keys( appearance ).length === 0 ) {
 			generateUPEAppearance();
+		} else {
+			initializeUpeAppearanceEditor( appearance, 'bnpl_cart_block', api, [
+				'pmme',
+			] );
 		}
 	}, [ appearance ] );
 

client/checkout/api/index.js

@@ -302,12 +302,18 @@ export default class WCPayAPI {
 	 *
 	 * @param {Object} appearance The UPE appearance object with style values
 	 * @param {string} elementsLocation The location of the elements.
+	 * @param {string} storageType One of 'transient' or 'persistent'.
 	 *
 	 * @return {Promise} The final promise for the request to the server.
 	 */
-	saveUPEAppearance( appearance, elementsLocation ) {
+	saveUPEAppearance(
+		appearance,
+		elementsLocation,
+		storageType = 'transient'
+	) {
 		return this.request( getConfig( 'ajaxUrl' ), {
 			elements_location: elementsLocation,
+			storage_type: storageType,
 			appearance: JSON.stringify( appearance ),
 			action: 'save_upe_appearance',
 			// eslint-disable-next-line camelcase
@@ -326,6 +332,33 @@ export default class WCPayAPI {
 			} );
 	}
 
+	/**
+	 * Resets all custom and computed UPE appearance values.
+	 *
+	 * @param {string} elementsLocation The location of the elements.
+	 *
+	 * @return {Promise} The final promise for the request to the server.
+	 */
+	resetUPEAppearance( elementsLocation ) {
+		return this.request( getConfig( 'ajaxUrl' ), {
+			elements_location: elementsLocation,
+			action: 'reset_upe_appearance',
+			// eslint-disable-next-line camelcase
+			_ajax_nonce: getConfig( 'resetUPEAppearanceNonce' ),
+		} )
+			.then( ( response ) => {
+				return response.data;
+			} )
+			.catch( ( error ) => {
+				if ( error.message ) {
+					throw error;
+				} else {
+					// Covers the case of error on the Ajaxrequest.
+					throw new Error( error.statusText );
+				}
+			} );
+	}
+
 	/**
 	 * Updates cart with selected shipping option.
 	 *

client/checkout/blocks/payment-elements.js

@@ -17,6 +17,7 @@ import { useFingerprint } from './hooks';
 import { LoadableBlock } from 'wcpay/components/loadable';
 import PaymentProcessor from './payment-processor';
 import { getPaymentMethodTypes } from 'wcpay/checkout/utils/upe';
+import { initializeUpeAppearanceEditor } from 'wcpay/utils/upe-appearance-editor';
 
 const PaymentElements = ( { api, ...props } ) => {
 	const stripeForUPE = useStripeForUPE( api, props.paymentMethodId );
@@ -43,11 +44,18 @@ const PaymentElements = ( { api, ...props } ) => {
 				upeAppearance,
 				'blocks_checkout'
 			);
+			initializeUpeAppearanceEditor(
+				upeAppearance,
+				'blocks_checkout',
+				api
+			);
 			setAppearance( upeAppearance );
 		}
 
 		if ( ! appearance ) {
 			generateUPEAppearance();
+		} else {
+			initializeUpeAppearanceEditor( appearance, 'blocks_checkout', api );
 		}
 
 		if ( fingerprintErrorMessage ) {

client/checkout/blocks/payment-method-label.js

@@ -12,6 +12,7 @@ import { __ } from '@wordpress/i18n';
 import './style.scss';
 import { useEffect, useState } from '@wordpress/element';
 import { getAppearance } from 'wcpay/checkout/upe-styles';
+import { initializeUpeAppearanceEditor } from 'wcpay/utils/upe-appearance-editor';
 
 const bnplMethods = [ 'affirm', 'afterpay_clearpay', 'klarna' ];
 const PaymentMethodMessageWrapper = ( {
@@ -80,12 +81,19 @@ export default ( { api, title, countries, iconLight, iconDark, upeName } ) => {
 				upeAppearance,
 				'blocks_checkout'
 			);
+			initializeUpeAppearanceEditor(
+				upeAppearance,
+				'blocks_checkout',
+				api
+			);
 			setAppearance( upeAppearance );
 			setUpeAppearanceTheme( upeAppearance.theme );
 		}
 
 		if ( ! appearance ) {
 			generateUPEAppearance();
+		} else {
+			initializeUpeAppearanceEditor( appearance, 'blocks_checkout', api );
 		}
 	}, [ api, appearance ] );
 

client/checkout/blocks/payment-processor.js

@@ -32,6 +32,7 @@ import {
 	PAYMENT_METHOD_ERROR,
 	PAYMENT_METHOD_NAME_CARD,
 } from 'wcpay/checkout/constants';
+import { registerElementsComponent } from 'wcpay/utils/upe-appearance-editor';
 
 const getBillingDetails = ( billingData ) => {
 	return {
@@ -84,6 +85,10 @@ const PaymentProcessor = ( {
 		setBillingAddress,
 	} = useCustomerData();
 
+	useEffect( () => {
+		registerElementsComponent( elements, 'blocks_checkout' );
+	}, [ elements ] );
+
 	useEffect( () => {
 		if (
 			activePaymentMethod === PAYMENT_METHOD_NAME_CARD &&

client/checkout/classic/payment-processing.js

@@ -32,6 +32,10 @@ import {
 	SHORTCODE_BILLING_ADDRESS_FIELDS,
 	PAYMENT_METHOD_ERROR,
 } from 'wcpay/checkout/constants';
+import {
+	initializeUpeAppearanceEditor,
+	registerElementsComponent,
+} from 'wcpay/utils/upe-appearance-editor';
 
 // It looks like on file import there are some side effects. Should probably be fixed.
 const gatewayUPEComponents = {};
@@ -62,10 +66,15 @@ async function initializeAppearance( api, elementsLocation ) {
 	const upeConfigProperty =
 		upeConfigMap[ elementsLocation ] ?? 'upeAppearance';
 	const appearance = getUPEConfig( upeConfigProperty );
+
 	if ( appearance ) {
+		initializeUpeAppearanceEditor( appearance, elementsLocation, api );
 		return Promise.resolve( appearance );
 	}
 
+	const computedAppearance = getAppearance( elementsLocation );
+	initializeUpeAppearanceEditor( computedAppearance, elementsLocation, api );
+
 	return await api.saveUPEAppearance(
 		getAppearance( elementsLocation ),
 		elementsLocation
@@ -277,6 +286,9 @@ async function createStripePaymentElement(
 	const stripe = await api.getStripeForUPE( paymentMethodType );
 
 	const elements = stripe.elements( options );
+
+	registerElementsComponent( elements, elementsLocation );
+
 	const createdStripePaymentElement = elements.create( 'payment', {
 		...getUpeSettings( paymentMethodType ),
 		wallets: {
@@ -504,12 +516,16 @@ export async function mountStripePaymentMethodMessagingElement(
 
 	try {
 		const stripe = await api.getStripe();
-		const paymentMethodMessagingElement = stripe
-			.elements( {
-				appearance: appearance,
-				fonts: getFontRulesFromPage(),
-			} )
-			.create( 'paymentMethodMessaging', {
+		const elements = stripe.elements( {
+			appearance: appearance,
+			fonts: getFontRulesFromPage(),
+		} );
+
+		registerElementsComponent( elements, location );
+
+		const paymentMethodMessagingElement = elements.create(
+			'paymentMethodMessaging',
+			{
 				currency: cartData.currency,
 				amount: normalizeCurrencyToMinorUnit(
 					cartData.amount,
@@ -518,7 +534,8 @@ export async function mountStripePaymentMethodMessagingElement(
 				countryCode: cartData.country, // Customer's country or base country of the store.
 				paymentMethodTypes: [ paymentMethodType ],
 				displayType: 'promotional_text',
-			} );
+			}
+		);
 
 		return paymentMethodMessagingElement.mount( domElement );
 	} finally {

client/product-details/bnpl-site-messaging/index.js

@@ -7,6 +7,7 @@ import WCPayAPI from 'wcpay/checkout/api';
 import { getAppearance, getFontRulesFromPage } from 'wcpay/checkout/upe-styles';
 import { getUPEConfig } from 'wcpay/utils/checkout';
 import apiRequest from 'wcpay/checkout/utils/request';
+// import { initializeUpeAppearanceEditor } from 'wcpay/utils/upe-appearance-editor';
 
 const elementsLocations = {
 	bnplProductPage: {
@@ -32,15 +33,22 @@ const elementsLocations = {
 async function initializeAppearance( api, location ) {
 	const { configKey, appearanceKey } = elementsLocations[ location ];
 
+	// TODO: this does not work as expected, config is always null in Product page and Cart so it always re-computes.
 	const appearance = getUPEConfig( configKey );
 	if ( appearance ) {
+		// initializeUpeAppearanceEditor( appearance, appearanceKey, api, [
+		// 	'pmme',
+		// ] );
 		return Promise.resolve( appearance );
 	}
 
-	return await api.saveUPEAppearance(
-		getAppearance( appearanceKey ),
-		appearanceKey
-	);
+	const computedAppearance = getAppearance( appearanceKey );
+
+	// initializeUpeAppearanceEditor( computedAppearance, appearanceKey, api, [
+	// 	'pmme',
+	// ] );
+
+	return await api.saveUPEAppearance( computedAppearance, appearanceKey );
 }
 
 export const initializeBnplSiteMessaging = async () => {