From c19c5bad445dc63f54e68b825d45a7aa8b8db055 Mon Sep 17 00:00:00 2001 From: Alex Florisca Date: Wed, 15 May 2024 15:19:17 +0100 Subject: [PATCH 01/13] Render express button with attributes coming from the express checkout --- .../payment-request/payment-request-express.js | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/client/blocks/payment-request/payment-request-express.js b/client/blocks/payment-request/payment-request-express.js index 14f0d321f..19795ee21 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,17 +72,12 @@ 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 { - type = 'default', - theme = 'dark', - height = '48', - } = getBlocksConfiguration()?.button; const paymentRequestButtonStyle = { paymentRequestButton: { - type, - theme, - height: `${ height }px`, + type: buttonAttributes.label, + theme: buttonAttributes?.darkMode ? 'light' : 'dark', + height: buttonAttributes?.height ?? buttonAttributes.defaultHeight, }, }; From 2a6cf7833bd8a63cec9bf9fec581568a12a19f54 Mon Sep 17 00:00:00 2001 From: Alex Florisca Date: Mon, 20 May 2024 17:42:14 +0100 Subject: [PATCH 02/13] Remove default height --- client/blocks/payment-request/payment-request-express.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/blocks/payment-request/payment-request-express.js b/client/blocks/payment-request/payment-request-express.js index 19795ee21..88c96ac53 100644 --- a/client/blocks/payment-request/payment-request-express.js +++ b/client/blocks/payment-request/payment-request-express.js @@ -77,7 +77,7 @@ const PaymentRequestExpressComponent = ( { paymentRequestButton: { type: buttonAttributes.label, theme: buttonAttributes?.darkMode ? 'light' : 'dark', - height: buttonAttributes?.height ?? buttonAttributes.defaultHeight, + height: buttonAttributes?.height, }, }; From 8ade6c77f129b1f41fd6ea29fc501b5053d01217 Mon Sep 17 00:00:00 2001 From: Alex Florisca Date: Tue, 28 May 2024 17:05:34 +0100 Subject: [PATCH 03/13] Get label from stripe settings --- client/blocks/payment-request/payment-request-express.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/blocks/payment-request/payment-request-express.js b/client/blocks/payment-request/payment-request-express.js index 88c96ac53..6387fc3e3 100644 --- a/client/blocks/payment-request/payment-request-express.js +++ b/client/blocks/payment-request/payment-request-express.js @@ -72,15 +72,15 @@ 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 { type = 'default' } = getBlocksConfiguration()?.button; const paymentRequestButtonStyle = { paymentRequestButton: { - type: buttonAttributes.label, + type, theme: buttonAttributes?.darkMode ? 'light' : 'dark', height: buttonAttributes?.height, }, }; - const isBranded = getBlocksConfiguration()?.button?.is_branded; const brandedType = getBlocksConfiguration()?.button?.branded_type; const isCustom = getBlocksConfiguration()?.button?.is_custom; From 002394f681b2a6253135d72874b2817ab67f98c3 Mon Sep 17 00:00:00 2001 From: Alex Florisca Date: Wed, 29 May 2024 10:54:21 +0100 Subject: [PATCH 04/13] Only respect button attributes when available --- .../payment-request/payment-request-express.js | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/client/blocks/payment-request/payment-request-express.js b/client/blocks/payment-request/payment-request-express.js index 6387fc3e3..da2b568f1 100644 --- a/client/blocks/payment-request/payment-request-express.js +++ b/client/blocks/payment-request/payment-request-express.js @@ -72,13 +72,24 @@ 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 { type = 'default' } = getBlocksConfiguration()?.button; + let { + type = 'default', + height = '48px', + theme = 'dark', + } = getBlocksConfiguration()?.button; + + // If we are on the checkout block, we receive button attributes which overwrite the extension specific settings + // If we are on the checkout block, we receive button attributes which overwrite the extension specific settings + if ( buttonAttributes !== undefined ) { + height = buttonAttributes.height || height; + theme = buttonAttributes?.darkMode ? 'light' : 'dark'; + } const paymentRequestButtonStyle = { paymentRequestButton: { type, - theme: buttonAttributes?.darkMode ? 'light' : 'dark', - height: buttonAttributes?.height, + theme, + height, }, }; const isBranded = getBlocksConfiguration()?.button?.is_branded; From d4f075e39278f90df47e0e364a090346d6104ed0 Mon Sep 17 00:00:00 2001 From: Alex Florisca Date: Wed, 29 May 2024 11:16:49 +0100 Subject: [PATCH 05/13] Remove px from height --- client/blocks/payment-request/payment-request-express.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/blocks/payment-request/payment-request-express.js b/client/blocks/payment-request/payment-request-express.js index da2b568f1..048fb8d2e 100644 --- a/client/blocks/payment-request/payment-request-express.js +++ b/client/blocks/payment-request/payment-request-express.js @@ -74,8 +74,8 @@ const PaymentRequestExpressComponent = ( { // Make sure `theme` defaults to 'dark' if it's not found in the server provided configuration. let { type = 'default', - height = '48px', theme = 'dark', + height = '48', } = getBlocksConfiguration()?.button; // If we are on the checkout block, we receive button attributes which overwrite the extension specific settings @@ -89,7 +89,7 @@ const PaymentRequestExpressComponent = ( { paymentRequestButton: { type, theme, - height, + height: `${ height }px`, }, }; const isBranded = getBlocksConfiguration()?.button?.is_branded; From 2923a7fe6e84df5833b13c1b5a879bf496659ffa Mon Sep 17 00:00:00 2001 From: Alex Florisca Date: Mon, 3 Jun 2024 10:33:57 +0100 Subject: [PATCH 06/13] safer type checking --- client/blocks/payment-request/payment-request-express.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/blocks/payment-request/payment-request-express.js b/client/blocks/payment-request/payment-request-express.js index 048fb8d2e..7528d0a74 100644 --- a/client/blocks/payment-request/payment-request-express.js +++ b/client/blocks/payment-request/payment-request-express.js @@ -80,7 +80,7 @@ const PaymentRequestExpressComponent = ( { // If we are on the checkout block, we receive button attributes which overwrite the extension specific settings // If we are on the checkout block, we receive button attributes which overwrite the extension specific settings - if ( buttonAttributes !== undefined ) { + if ( typeof buttonAttributes !== 'undefined' ) { height = buttonAttributes.height || height; theme = buttonAttributes?.darkMode ? 'light' : 'dark'; } From 56e66c2a7728b64f5eda46606900d303b321c39e Mon Sep 17 00:00:00 2001 From: Alex Florisca Date: Mon, 3 Jun 2024 10:35:37 +0100 Subject: [PATCH 07/13] Remove duplicate comment --- client/blocks/payment-request/payment-request-express.js | 1 - 1 file changed, 1 deletion(-) diff --git a/client/blocks/payment-request/payment-request-express.js b/client/blocks/payment-request/payment-request-express.js index 7528d0a74..f0a1286fd 100644 --- a/client/blocks/payment-request/payment-request-express.js +++ b/client/blocks/payment-request/payment-request-express.js @@ -78,7 +78,6 @@ const PaymentRequestExpressComponent = ( { height = '48', } = getBlocksConfiguration()?.button; - // If we are on the checkout block, we receive button attributes which overwrite the extension specific settings // 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; From 60ce5b73e4bdf6018e357c8da2a6e3a79fb38852 Mon Sep 17 00:00:00 2001 From: Alex Florisca Date: Mon, 12 Aug 2024 17:31:45 +0100 Subject: [PATCH 08/13] Add an admin notice --- .../payment-request-settings-section.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) 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..447e868be 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'; @@ -157,6 +163,17 @@ const PaymentRequestsSettingsSection = () => { return ( + + Note: These settings may be overriden by the{ ' ' } + + Checkout Block + { ' ' } + to ensure consistency across express payment buttons. +

{ __( From aed4234be2bf68e1af2a03930222d80a1ced8628 Mon Sep 17 00:00:00 2001 From: Alex Florisca Date: Mon, 12 Aug 2024 17:40:44 +0100 Subject: [PATCH 09/13] Add an admin notice --- .../payment-request-settings-section.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) 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 447e868be..ef59324bd 100644 --- a/client/entrypoints/payment-request-settings/payment-request-settings-section.js +++ b/client/entrypoints/payment-request-settings/payment-request-settings-section.js @@ -164,15 +164,23 @@ const PaymentRequestsSettingsSection = () => { return ( - Note: These settings may be overriden by the{ ' ' } + Note: These settings may be overriden in the{ ' ' } + + Cart Block + { ' ' } + and the{ ' ' } Checkout Block - { ' ' } - to ensure consistency across express payment buttons. + + . You may customize these in the respective block settings

From 3a85417ef32b78737d42e53f224122e692bf2237 Mon Sep 17 00:00:00 2001 From: Alex Florisca Date: Mon, 12 Aug 2024 19:36:30 +0100 Subject: [PATCH 10/13] Add admin notice --- .../payment-request-settings-section.js | 32 ++++++------ package-lock.json | 51 ++++++++++++++++++- package.json | 1 + 3 files changed, 66 insertions(+), 18 deletions(-) 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 ef59324bd..0d554f24f 100644 --- a/client/entrypoints/payment-request-settings/payment-request-settings-section.js +++ b/client/entrypoints/payment-request-settings/payment-request-settings-section.js @@ -161,26 +161,24 @@ const PaymentRequestsSettingsSection = () => { } }; + const cartPageUrl = `${ ADMIN_URL }post.php?post=${ + getSetting( 'storePages' )?.cart?.id + }&action=edit`; + + const checkoutPageUrl = `${ ADMIN_URL }post.php?post=${ + getSetting( 'storePages' )?.checkout?.id + }&action=edit`; + return ( - Note: These settings may be overriden in the{ ' ' } - - Cart Block - { ' ' } - and the{ ' ' } - - Checkout Block - - . You may customize these in the respective block settings + { __( 'These settings may be overriden in the' ) }{ ' ' } + { __( 'Cart Block' ) }{ ' ' } + { __( 'and the' ) }{ ' ' } + { __( 'Checkout Block' ) }.{ ' ' } + { __( + 'You may customize these in the respective block settings' + ) }

diff --git a/package-lock.json b/package-lock.json index cbaf1f228..8b6b9a1a7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6,13 +6,14 @@ "packages": { "": { "name": "woocommerce-gateway-stripe", - "version": "8.2.0", + "version": "8.3.0", "hasInstallScript": true, "license": "GPL-3.0", "dependencies": { "@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" @@ -1927,6 +1928,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", @@ -7270,6 +7287,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", @@ -36939,6 +36964,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", @@ -41129,6 +41170,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 ef47898c8..fe8bb92b3 100644 --- a/package.json +++ b/package.json @@ -93,6 +93,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" From 630a6d19db866045ab14f6d899fa37ec6334ee26 Mon Sep 17 00:00:00 2001 From: Alex Florisca Date: Tue, 13 Aug 2024 13:42:29 +0100 Subject: [PATCH 11/13] Update admin notice --- .../payment-request-settings-section.js | 21 +++++++------------ 1 file changed, 8 insertions(+), 13 deletions(-) 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 0d554f24f..f2bd44f17 100644 --- a/client/entrypoints/payment-request-settings/payment-request-settings-section.js +++ b/client/entrypoints/payment-request-settings/payment-request-settings-section.js @@ -161,26 +161,21 @@ const PaymentRequestsSettingsSection = () => { } }; - const cartPageUrl = `${ ADMIN_URL }post.php?post=${ - getSetting( 'storePages' )?.cart?.id - }&action=edit`; - const checkoutPageUrl = `${ ADMIN_URL }post.php?post=${ getSetting( 'storePages' )?.checkout?.id }&action=edit`; return ( - - { __( 'These settings may be overriden in the' ) }{ ' ' } - { __( 'Cart Block' ) }{ ' ' } - { __( 'and the' ) }{ ' ' } - { __( 'Checkout Block' ) }.{ ' ' } - { __( - 'You may customize these in the respective block settings' - ) } - + + { __( + 'Some appearance settings may be overridden by the express payment section of the' + ) }{ ' ' } + + { __( 'Cart & Checkout blocks' ) } + +

{ __( 'Show express checkouts on', From 8ff98c0229967056830ff9d11c00163281682b14 Mon Sep 17 00:00:00 2001 From: Alex Florisca Date: Tue, 13 Aug 2024 13:43:40 +0100 Subject: [PATCH 12/13] Update admin notice --- .../payment-request-settings-section.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 f2bd44f17..6a11100d9 100644 --- a/client/entrypoints/payment-request-settings/payment-request-settings-section.js +++ b/client/entrypoints/payment-request-settings/payment-request-settings-section.js @@ -173,7 +173,7 @@ const PaymentRequestsSettingsSection = () => { 'Some appearance settings may be overridden by the express payment section of the' ) }{ ' ' } - { __( 'Cart & Checkout blocks' ) } + { __( 'Cart & Checkout blocks.' ) }

From 34b5607a1ec04726fe5471686417c7102189ef4d Mon Sep 17 00:00:00 2001 From: Alex Florisca Date: Tue, 3 Sep 2024 15:52:55 +0100 Subject: [PATCH 13/13] Remove darkMode --- client/blocks/payment-request/payment-request-express.js | 1 - 1 file changed, 1 deletion(-) diff --git a/client/blocks/payment-request/payment-request-express.js b/client/blocks/payment-request/payment-request-express.js index f0a1286fd..39252558a 100644 --- a/client/blocks/payment-request/payment-request-express.js +++ b/client/blocks/payment-request/payment-request-express.js @@ -81,7 +81,6 @@ const PaymentRequestExpressComponent = ( { // 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; - theme = buttonAttributes?.darkMode ? 'light' : 'dark'; } const paymentRequestButtonStyle = {