diff --git a/client/blocks/payment-request/payment-request-express.js b/client/blocks/payment-request/payment-request-express.js index 14f0d321f..39252558a 100644 --- a/client/blocks/payment-request/payment-request-express.js +++ b/client/blocks/payment-request/payment-request-express.js @@ -44,6 +44,7 @@ const PaymentRequestExpressComponent = ( { onClick, onClose, setExpressPaymentError, + buttonAttributes, } ) => { const stripe = useStripe(); const { needsShipping } = shippingData; @@ -71,12 +72,17 @@ const PaymentRequestExpressComponent = ( { // locale is not a valid value for the paymentRequestButton style. // Make sure `theme` defaults to 'dark' if it's not found in the server provided configuration. - const { + let { type = 'default', theme = 'dark', height = '48', } = getBlocksConfiguration()?.button; + // If we are on the checkout block, we receive button attributes which overwrite the extension specific settings + if ( typeof buttonAttributes !== 'undefined' ) { + height = buttonAttributes.height || height; + } + const paymentRequestButtonStyle = { paymentRequestButton: { type, @@ -84,7 +90,6 @@ const PaymentRequestExpressComponent = ( { height: `${ height }px`, }, }; - const isBranded = getBlocksConfiguration()?.button?.is_branded; const brandedType = getBlocksConfiguration()?.button?.branded_type; const isCustom = getBlocksConfiguration()?.button?.is_custom; diff --git a/client/entrypoints/payment-request-settings/payment-request-settings-section.js b/client/entrypoints/payment-request-settings/payment-request-settings-section.js index 7541364c5..6a11100d9 100644 --- a/client/entrypoints/payment-request-settings/payment-request-settings-section.js +++ b/client/entrypoints/payment-request-settings/payment-request-settings-section.js @@ -1,6 +1,12 @@ +import { ADMIN_URL, getSetting } from '@woocommerce/settings'; import { __ } from '@wordpress/i18n'; import React, { useMemo } from 'react'; -import { Card, RadioControl, CheckboxControl } from '@wordpress/components'; +import { + Card, + RadioControl, + CheckboxControl, + Notice, +} from '@wordpress/components'; import interpolateComponents from 'interpolate-components'; import { Elements } from '@stripe/react-stripe-js'; import { loadStripe } from '@stripe/stripe-js'; @@ -155,9 +161,21 @@ const PaymentRequestsSettingsSection = () => { } }; + const checkoutPageUrl = `${ ADMIN_URL }post.php?post=${ + getSetting( 'storePages' )?.checkout?.id + }&action=edit`; + return ( + + { __( + 'Some appearance settings may be overridden by the express payment section of the' + ) }{ ' ' } + + { __( 'Cart & Checkout blocks.' ) } + +

{ __( 'Show express checkouts on', diff --git a/package-lock.json b/package-lock.json index 0e6a37e1e..d8061ef35 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@stripe/react-stripe-js": "1.4.1", "@stripe/stripe-js": "^1.36.0", "@testing-library/react-hooks": "^7.0.2", + "@woocommerce/settings": "^1.0.0", "framer-motion": "^7.6.1", "gridicons": "^3.4.0", "interpolate-components": "^1.1.1" @@ -1928,6 +1929,22 @@ "node": ">=6.9.0" } }, + "node_modules/@babel/runtime-corejs2": { + "version": "7.5.5", + "resolved": "https://registry.npmjs.org/@babel/runtime-corejs2/-/runtime-corejs2-7.5.5.tgz", + "integrity": "sha512-FYATQVR00NSNi7mUfpPDp7E8RYMXDuO8gaix7u/w3GekfUinKgX1AcTxs7SoiEmoEW9mbpjrwqWSW6zCmw5h8A==", + "dependencies": { + "core-js": "^2.6.5", + "regenerator-runtime": "^0.13.2" + } + }, + "node_modules/@babel/runtime-corejs2/node_modules/core-js": { + "version": "2.6.12", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz", + "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==", + "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.", + "hasInstallScript": true + }, "node_modules/@babel/runtime-corejs3": { "version": "7.16.8", "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.16.8.tgz", @@ -7271,6 +7288,14 @@ "locutus": "2.0.15" } }, + "node_modules/@woocommerce/settings": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@woocommerce/settings/-/settings-1.0.0.tgz", + "integrity": "sha512-BjrT56Cz8XTRHw2JNPmANRkYh2rzdF33wOa56lah1qb/MjHUKuVJ0PTSZ19S5Trb92IkxfcIVB26CSdxXnf5Og==", + "dependencies": { + "@babel/runtime-corejs2": "7.5.5" + } + }, "node_modules/@woocommerce/woocommerce-rest-api": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@woocommerce/woocommerce-rest-api/-/woocommerce-rest-api-1.0.1.tgz", @@ -36940,6 +36965,22 @@ "regenerator-runtime": "^0.13.4" } }, + "@babel/runtime-corejs2": { + "version": "7.5.5", + "resolved": "https://registry.npmjs.org/@babel/runtime-corejs2/-/runtime-corejs2-7.5.5.tgz", + "integrity": "sha512-FYATQVR00NSNi7mUfpPDp7E8RYMXDuO8gaix7u/w3GekfUinKgX1AcTxs7SoiEmoEW9mbpjrwqWSW6zCmw5h8A==", + "requires": { + "core-js": "^2.6.5", + "regenerator-runtime": "^0.13.2" + }, + "dependencies": { + "core-js": { + "version": "2.6.12", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz", + "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==" + } + } + }, "@babel/runtime-corejs3": { "version": "7.16.8", "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.16.8.tgz", @@ -41130,6 +41171,14 @@ "locutus": "2.0.15" } }, + "@woocommerce/settings": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@woocommerce/settings/-/settings-1.0.0.tgz", + "integrity": "sha512-BjrT56Cz8XTRHw2JNPmANRkYh2rzdF33wOa56lah1qb/MjHUKuVJ0PTSZ19S5Trb92IkxfcIVB26CSdxXnf5Og==", + "requires": { + "@babel/runtime-corejs2": "7.5.5" + } + }, "@woocommerce/woocommerce-rest-api": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@woocommerce/woocommerce-rest-api/-/woocommerce-rest-api-1.0.1.tgz", diff --git a/package.json b/package.json index 964ca1a85..270ca44a5 100644 --- a/package.json +++ b/package.json @@ -94,6 +94,7 @@ "@stripe/react-stripe-js": "1.4.1", "@stripe/stripe-js": "^1.36.0", "@testing-library/react-hooks": "^7.0.2", + "@woocommerce/settings": "^1.0.0", "framer-motion": "^7.6.1", "gridicons": "^3.4.0", "interpolate-components": "^1.1.1"