From 1904d916e8176038c1dd5b85e95360acba0387a0 Mon Sep 17 00:00:00 2001 From: carmenmaymo Date: Thu, 10 Oct 2024 11:45:54 +0200 Subject: [PATCH 01/20] Add apple express button added css for the button added in cart and checkout block --- package.json | 2 +- resources/js/applepayButtonBlock.js | 30 +++ resources/js/applepayButtonBlockComponent.js | 194 ------------------ .../js/blocks/ApplePayButtonComponent.js | 174 ++++++++++++++++ resources/js/mollieBlockIndex.js | 15 ++ resources/scss/mollie-applepaydirect.scss | 2 + src/Assets/AssetsModule.php | 4 +- src/Assets/MollieCheckoutBlocksSupport.php | 3 +- .../DataToAppleButtonScripts.php | 3 + src/Shared/Data.php | 6 + webpack.config.js | 2 +- 11 files changed, 236 insertions(+), 199 deletions(-) create mode 100644 resources/js/applepayButtonBlock.js delete mode 100644 resources/js/applepayButtonBlockComponent.js create mode 100644 resources/js/blocks/ApplePayButtonComponent.js diff --git a/package.json b/package.json index d5429a333..a97339a4a 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,7 @@ "webpack": "^5.89.0" }, "scripts": { - "watch": "webpack --watch", + "watch": "BASE_PATH=. node_modules/.bin/encore dev --watch", "build": "BASE_PATH=. node_modules/.bin/encore dev", "setup": "gulp setup", "e2e-activation": "npx playwright test --project=activation", diff --git a/resources/js/applepayButtonBlock.js b/resources/js/applepayButtonBlock.js new file mode 100644 index 000000000..058da50c7 --- /dev/null +++ b/resources/js/applepayButtonBlock.js @@ -0,0 +1,30 @@ +import {ApplePayButtonComponent} from "./blocks/ApplePayButtonComponent"; + +( + function ({mollieApplePayBlockDataCart}) { + if (mollieApplePayBlockDataCart.length === 0) { + return + } + const {ApplePaySession} = window; + if (!(ApplePaySession && ApplePaySession.canMakePayments())) { + return null; + } + + const {registerExpressPaymentMethod} = wc.wcBlocksRegistry; + + registerExpressPaymentMethod({ + name: 'mollie_wc_gateway_applepay_express', + content: < ApplePayButtonComponent/>, + edit: < ApplePayButtonComponent/>, + ariaLabel: 'Apple Pay', + canMakePayment: () => true, + paymentMethodId: 'mollie_wc_gateway_applepay', + supports: { + features: ['products'], + }, + }); + } +) +( + window +) diff --git a/resources/js/applepayButtonBlockComponent.js b/resources/js/applepayButtonBlockComponent.js deleted file mode 100644 index 7c0215c6e..000000000 --- a/resources/js/applepayButtonBlockComponent.js +++ /dev/null @@ -1,194 +0,0 @@ -import {maybeShowButton} from './maybeShowApplePayButton.js'; -import {request} from "./applePayRequest"; -import {createAppleErrors} from "./applePayError"; - -( - function ({mollieApplePayBlockDataCart}) - { - if (mollieApplePayBlockDataCart.length === 0 ) { - return - } - const {product: {needShipping = true, subtotal}, shop: {countryCode, currencyCode = 'EUR', totalLabel = ''}, buttonMarkup, ajaxUrl} = mollieApplePayBlockDataCart - - const { registerPlugin } = wp.plugins; - const { ExperimentalOrderMeta } = wc.blocksCheckout; - const ApplePayButtonComponent = ( { cart, extensions } ) => { - return
- } - const MollieApplePayButtonCart = () => { - return - - - }; - - registerPlugin( 'mollie-applepay-block-button', { - render: () => { - return ; - }, - scope: 'woocommerce-checkout' - } ); - - setTimeout(function(){ - if(!maybeShowButton()){ - return - } - const nonce = document.getElementById("woocommerce-process-checkout-nonce").value - let updatedContactInfo = [] - let selectedShippingMethod = [] - let redirectionUrl = '' - let applePaySession = () => { - const session = new ApplePaySession(3, request(countryCode, currencyCode, totalLabel, subtotal)) - session.begin() - session.onshippingmethodselected = function (event) { - jQuery.ajax({ - url: ajaxUrl, - method: 'POST', - data: { - action: 'mollie_apple_pay_update_shipping_method', - shippingMethod: event.shippingMethod, - callerPage: 'cart', - simplifiedContact: updatedContactInfo, - 'woocommerce-process-checkout-nonce': nonce, - }, - complete: (jqXHR, textStatus) => { - }, - success: (applePayShippingMethodUpdate, textStatus, jqXHR) => { - let response = applePayShippingMethodUpdate.data - selectedShippingMethod = event.shippingMethod - if (applePayShippingMethodUpdate.success === false) { - response.errors = createAppleErrors(response.errors) - } - this.completeShippingMethodSelection(response) - }, - error: (jqXHR, textStatus, errorThrown) => { - console.warn(textStatus, errorThrown) - session.abort() - }, - }) - } - session.onshippingcontactselected = function (event) { - jQuery.ajax({ - url: ajaxUrl, - method: 'POST', - data: { - action: 'mollie_apple_pay_update_shipping_contact', - simplifiedContact: event.shippingContact, - callerPage: 'cart', - needShipping: needShipping, - 'woocommerce-process-checkout-nonce': nonce, - }, - complete: (jqXHR, textStatus) => { - }, - success: (applePayShippingContactUpdate, textStatus, jqXHR) => { - let response = applePayShippingContactUpdate.data - updatedContactInfo = event.shippingContact - if (applePayShippingContactUpdate.success === false) { - response.errors = createAppleErrors(response.errors) - } - if (response.newShippingMethods) { - selectedShippingMethod = response.newShippingMethods[0] - } - this.completeShippingContactSelection(response) - }, - error: (jqXHR, textStatus, errorThrown) => { - console.warn(textStatus, errorThrown) - session.abort() - }, - }) - } - session.onvalidatemerchant = (applePayValidateMerchantEvent) => { - jQuery.ajax({ - url: ajaxUrl, - method: 'POST', - data: { - action: 'mollie_apple_pay_validation', - validationUrl: applePayValidateMerchantEvent.validationURL, - 'woocommerce-process-checkout-nonce': nonce, - }, - complete: (jqXHR, textStatus) => { - }, - success: (merchantSession, textStatus, jqXHR) => { - if (merchantSession.success === true) { - session.completeMerchantValidation(JSON.parse(merchantSession.data)) - } else { - console.warn(merchantSession.data) - session.abort() - } - }, - error: (jqXHR, textStatus, errorThrown) => { - console.warn(textStatus, errorThrown) - session.abort() - }, - }) - } - session.onpaymentauthorized = (ApplePayPayment) => { - const {billingContact, shippingContact } = ApplePayPayment.payment - - jQuery.ajax({ - url: ajaxUrl, - method: 'POST', - data: { - action: 'mollie_apple_pay_create_order_cart', - shippingContact: ApplePayPayment.payment.shippingContact, - billingContact: ApplePayPayment.payment.billingContact, - token: ApplePayPayment.payment.token, - shippingMethod: selectedShippingMethod, - 'mollie-payments-for-woocommerce_issuer_applepay': 'applepay', - 'woocommerce-process-checkout-nonce': nonce, - 'billing_first_name': billingContact.givenName || '', - 'billing_last_name': billingContact.familyName || '', - 'billing_company': '', - 'billing_country': billingContact.countryCode || '', - 'billing_address_1': billingContact.addressLines[0] || '', - 'billing_address_2': billingContact.addressLines[1] || '', - 'billing_postcode': billingContact.postalCode || '', - 'billing_city': billingContact.locality || '', - 'billing_state': billingContact.administrativeArea || '', - 'billing_phone': billingContact.phoneNumber || '000000000000', - 'billing_email': shippingContact.emailAddress || '', - 'shipping_first_name': shippingContact.givenName || '', - 'shipping_last_name': shippingContact.familyName || '', - 'shipping_company': '', - 'shipping_country': shippingContact.countryCode || '', - 'shipping_address_1': shippingContact.addressLines[0] || '', - 'shipping_address_2': shippingContact.addressLines[1] || '', - 'shipping_postcode': shippingContact.postalCode || '', - 'shipping_city': shippingContact.locality || '', - 'shipping_state': shippingContact.administrativeArea || '', - 'shipping_phone': shippingContact.phoneNumber || '000000000000', - 'shipping_email': shippingContact.emailAddress || '', - 'order_comments' : '', - 'payment_method' : 'mollie_wc_gateway_applepay', - '_wp_http_referer' : '/?wc-ajax=update_order_review' - }, - complete: (jqXHR, textStatus) => { - - }, - success: (authorizationResult, textStatus, jqXHR) => { - let result = authorizationResult.data - if (authorizationResult.success === true) { - redirectionUrl = result['returnUrl']; - session.completePayment(result['responseToApple']) - window.location.href = redirectionUrl - } else { - result.errors = createAppleErrors(result.errors) - session.completePayment(result) - } - }, - error: (jqXHR, textStatus, errorThrown) => { - console.warn(textStatus, errorThrown) - session.abort() - }, - }) - } - } - document.querySelector('#mollie_applepay_button').addEventListener('click', (evt) => { - applePaySession() - }) - },2000); - - } -) -( - window -) diff --git a/resources/js/blocks/ApplePayButtonComponent.js b/resources/js/blocks/ApplePayButtonComponent.js new file mode 100644 index 000000000..47d481fa0 --- /dev/null +++ b/resources/js/blocks/ApplePayButtonComponent.js @@ -0,0 +1,174 @@ +import {request} from "../applePayRequest"; +import {createAppleErrors} from "../applePayError"; + +export const ApplePayButtonComponent = ({cart, extensions}) => { + const mollieApplePayBlockDataCart = window.mollieApplePayBlockDataCart || window.mollieBlockData.mollieApplePayBlockDataCart + const nonce = document.getElementById("woocommerce-process-checkout-nonce").value + let updatedContactInfo = [] + let selectedShippingMethod = [] + let redirectionUrl = '' + const { + product: {needShipping = true, subtotal}, + shop: {countryCode, currencyCode = 'EUR', totalLabel = ''}, + ajaxUrl, + } = mollieApplePayBlockDataCart + + let applePaySession = () => { + const session = new ApplePaySession(3, request(countryCode, currencyCode, totalLabel, subtotal)) + console.log('ApplePaySession', session) + session.onshippingmethodselected = function (event) { + jQuery.ajax({ + url: ajaxUrl, + method: 'POST', + data: { + action: 'mollie_apple_pay_update_shipping_method', + shippingMethod: event.shippingMethod, + callerPage: 'cart', + simplifiedContact: updatedContactInfo, + 'woocommerce-process-checkout-nonce': nonce, + }, + complete: (jqXHR, textStatus) => { + }, + success: (applePayShippingMethodUpdate, textStatus, jqXHR) => { + let response = applePayShippingMethodUpdate.data + selectedShippingMethod = event.shippingMethod + if (applePayShippingMethodUpdate.success === false) { + response.errors = createAppleErrors(response.errors) + } + this.completeShippingMethodSelection(response) + }, + error: (jqXHR, textStatus, errorThrown) => { + console.warn(textStatus, errorThrown) + session.abort() + }, + }) + } + session.onshippingcontactselected = function (event) { + jQuery.ajax({ + url: ajaxUrl, + method: 'POST', + data: { + action: 'mollie_apple_pay_update_shipping_contact', + simplifiedContact: event.shippingContact, + callerPage: 'cart', + needShipping: needShipping, + 'woocommerce-process-checkout-nonce': nonce, + }, + complete: (jqXHR, textStatus) => { + }, + success: (applePayShippingContactUpdate, textStatus, jqXHR) => { + let response = applePayShippingContactUpdate.data + updatedContactInfo = event.shippingContact + if (applePayShippingContactUpdate.success === false) { + response.errors = createAppleErrors(response.errors) + } + if (response.newShippingMethods) { + selectedShippingMethod = response.newShippingMethods[0] + } + this.completeShippingContactSelection(response) + }, + error: (jqXHR, textStatus, errorThrown) => { + console.warn(textStatus, errorThrown) + session.abort() + }, + }) + } + session.onvalidatemerchant = (applePayValidateMerchantEvent) => { + jQuery.ajax({ + url: ajaxUrl, + method: 'POST', + data: { + action: 'mollie_apple_pay_validation', + validationUrl: applePayValidateMerchantEvent.validationURL, + 'woocommerce-process-checkout-nonce': nonce, + }, + complete: (jqXHR, textStatus) => { + }, + success: (merchantSession, textStatus, jqXHR) => { + if (merchantSession.success === true) { + session.completeMerchantValidation(JSON.parse(merchantSession.data)) + } else { + console.warn(merchantSession.data) + session.abort() + } + }, + error: (jqXHR, textStatus, errorThrown) => { + console.warn(textStatus, errorThrown) + session.abort() + }, + }) + } + session.onpaymentauthorized = (ApplePayPayment) => { + const {billingContact, shippingContact} = ApplePayPayment.payment + + jQuery.ajax({ + url: ajaxUrl, + method: 'POST', + data: { + action: 'mollie_apple_pay_create_order_cart', + shippingContact: ApplePayPayment.payment.shippingContact, + billingContact: ApplePayPayment.payment.billingContact, + token: ApplePayPayment.payment.token, + shippingMethod: selectedShippingMethod, + 'mollie-payments-for-woocommerce_issuer_applepay': 'applepay', + 'woocommerce-process-checkout-nonce': nonce, + 'billing_first_name': billingContact.givenName || '', + 'billing_last_name': billingContact.familyName || '', + 'billing_company': '', + 'billing_country': billingContact.countryCode || '', + 'billing_address_1': billingContact.addressLines[0] || '', + 'billing_address_2': billingContact.addressLines[1] || '', + 'billing_postcode': billingContact.postalCode || '', + 'billing_city': billingContact.locality || '', + 'billing_state': billingContact.administrativeArea || '', + 'billing_phone': billingContact.phoneNumber || '000000000000', + 'billing_email': shippingContact.emailAddress || '', + 'shipping_first_name': shippingContact.givenName || '', + 'shipping_last_name': shippingContact.familyName || '', + 'shipping_company': '', + 'shipping_country': shippingContact.countryCode || '', + 'shipping_address_1': shippingContact.addressLines[0] || '', + 'shipping_address_2': shippingContact.addressLines[1] || '', + 'shipping_postcode': shippingContact.postalCode || '', + 'shipping_city': shippingContact.locality || '', + 'shipping_state': shippingContact.administrativeArea || '', + 'shipping_phone': shippingContact.phoneNumber || '000000000000', + 'shipping_email': shippingContact.emailAddress || '', + 'order_comments': '', + 'payment_method': 'mollie_wc_gateway_applepay', + '_wp_http_referer': '/?wc-ajax=update_order_review' + }, + complete: (jqXHR, textStatus) => { + + }, + success: (authorizationResult, textStatus, jqXHR) => { + let result = authorizationResult.data + if (authorizationResult.success === true) { + redirectionUrl = result['returnUrl']; + session.completePayment(result['responseToApple']) + window.location.href = redirectionUrl + } else { + result.errors = createAppleErrors(result.errors) + session.completePayment(result) + } + }, + error: (jqXHR, textStatus, errorThrown) => { + console.warn(textStatus, errorThrown) + session.abort() + }, + }) + } + session.begin() + } + + return ( + + ); +} + +export default ApplePayButtonComponent; diff --git a/resources/js/mollieBlockIndex.js b/resources/js/mollieBlockIndex.js index 04c6d367b..3109b690b 100644 --- a/resources/js/mollieBlockIndex.js +++ b/resources/js/mollieBlockIndex.js @@ -1,10 +1,12 @@ import molliePaymentMethod from './blocks/molliePaymentMethod' +import ApplePayButtonComponent from './blocks/ApplePayButtonComponent' ( function ({ mollieBlockData, wc, _, jQuery}) { if (_.isEmpty(mollieBlockData)) { return; } + window.onload = (event) => { const { registerPaymentMethod } = wc.wcBlocksRegistry; const { checkoutData, defaultFields } = wc.wcSettings.allSettings; @@ -49,6 +51,19 @@ import molliePaymentMethod from './blocks/molliePaymentMethod' if (item.name === 'mollie_wc_gateway_applepay' && !isBlockEditor) { if ((isAppleSession && window.ApplePaySession.canMakePayments())) { register(); + const {registerExpressPaymentMethod} = wc.wcBlocksRegistry; + registerExpressPaymentMethod({ + name: 'mollie_wc_gateway_applepay_express', + content: , + edit: , + ariaLabel: 'Apple Pay', + canMakePayment: () => true, + paymentMethodId: 'mollie_wc_gateway_applepay', + supports: { + features: ['products'], + }, + }) + } return; } diff --git a/resources/scss/mollie-applepaydirect.scss b/resources/scss/mollie-applepaydirect.scss index 0cb757d88..3e76c6900 100644 --- a/resources/scss/mollie-applepaydirect.scss +++ b/resources/scss/mollie-applepaydirect.scss @@ -3,6 +3,8 @@ } .apple-pay-button { display: inline-block; + width: 100%; + height: 41px; -webkit-appearance: -apple-pay-button; -apple-pay-button-type: checkout; /* also: check-out, book, or subscribe */ } diff --git a/src/Assets/AssetsModule.php b/src/Assets/AssetsModule.php index eeb8cd882..7ef945631 100644 --- a/src/Assets/AssetsModule.php +++ b/src/Assets/AssetsModule.php @@ -74,13 +74,13 @@ public function registerButtonsBlockScripts(string $pluginUrl, string $pluginPat 'mollie_applepayButtonBlock', $this->getPluginUrl( $pluginUrl, - '/public/js/applepayButtonBlockComponent.min.js' + '/public/js/applepayButtonBlock.min.js' ), [], (string) filemtime( $this->getPluginPath( $pluginPath, - '/public/js/applepayButtonBlockComponent.min.js' + '/public/js/applepayButtonBlock.min.js' ) ), true diff --git a/src/Assets/MollieCheckoutBlocksSupport.php b/src/Assets/MollieCheckoutBlocksSupport.php index 450f6b76f..33ace20de 100644 --- a/src/Assets/MollieCheckoutBlocksSupport.php +++ b/src/Assets/MollieCheckoutBlocksSupport.php @@ -64,12 +64,13 @@ public function get_payment_method_script_handles(): array public static function localizeWCBlocksData($dataService, $gatewayInstances) { - + wp_enqueue_style('mollie-applepaydirect'); wp_localize_script( self::$scriptHandle, 'mollieBlockData', [ 'gatewayData' => self::gatewayDataForWCBlocks($dataService, $gatewayInstances), + 'mollieApplePayBlockDataCart' => $dataService->mollieApplePayBlockDataCart(), ] ); } diff --git a/src/Buttons/ApplePayButton/DataToAppleButtonScripts.php b/src/Buttons/ApplePayButton/DataToAppleButtonScripts.php index b6e551b25..fd10bf22f 100644 --- a/src/Buttons/ApplePayButton/DataToAppleButtonScripts.php +++ b/src/Buttons/ApplePayButton/DataToAppleButtonScripts.php @@ -14,6 +14,9 @@ class DataToAppleButtonScripts */ public function applePayScriptData(bool $isBlock = false): array { + if(is_admin()) { + return []; + } $base_location = wc_get_base_location(); $shopCountryCode = $base_location['country']; $currencyCode = get_woocommerce_currency(); diff --git a/src/Shared/Data.php b/src/Shared/Data.php index 54230c6db..34daa67a1 100644 --- a/src/Shared/Data.php +++ b/src/Shared/Data.php @@ -7,6 +7,7 @@ use Exception; use InvalidArgumentException; use Mollie\Api\Resources\Method; +use Mollie\WooCommerce\Buttons\ApplePayButton\DataToAppleButtonScripts; use Mollie\WooCommerce\SDK\Api; use Mollie\WooCommerce\Settings\Settings; use Psr\Log\LoggerInterface as Logger; @@ -786,4 +787,9 @@ protected function addRecurringPaymentMethods($apiKey, bool $testMode, bool $use } return $result; } + + public function mollieApplePayBlockDataCart() { + $dataToScripts = new DataToAppleButtonScripts(); + return $dataToScripts->applePayScriptData(true); + } } diff --git a/webpack.config.js b/webpack.config.js index fbd545086..08b7b5714 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -29,7 +29,7 @@ function configJavaScript ({ basePath }) .addEntry('mollie-components-blocks.min', './resources/js/mollie-components-blocks.js') .addEntry('mollieBlockIndex.min', './resources/js/mollieBlockIndex.js') .addEntry('paypalButtonBlockComponent.min', './resources/js/paypalButtonBlockComponent.js') - .addEntry('applepayButtonBlockComponent.min', './resources/js/applepayButtonBlockComponent.js') + .addEntry('applepayButtonBlock.min', './resources/js/applepayButtonBlock.js') .addEntry('rivertyCountryPlaceholder.min', './resources/js/rivertyCountryPlaceholder.js') .enableSourceMaps(!Encore.isProduction()) From 9fae4de5f558b31dcd62f03bdbc6363a27eefc13 Mon Sep 17 00:00:00 2001 From: carmenmaymo Date: Thu, 10 Oct 2024 14:06:09 +0200 Subject: [PATCH 02/20] Show selected method in apple window --- .../js/blocks/ApplePayButtonComponent.js | 13 ++++++-- .../ApplePayButton/AppleAjaxRequests.php | 4 +-- .../ApplePayButton/ResponsesToApple.php | 30 +++++++++++++++++-- .../ApplePayButton/ResponsesToAppleTest.php | 4 +-- 4 files changed, 43 insertions(+), 8 deletions(-) diff --git a/resources/js/blocks/ApplePayButtonComponent.js b/resources/js/blocks/ApplePayButtonComponent.js index 47d481fa0..78bd5529d 100644 --- a/resources/js/blocks/ApplePayButtonComponent.js +++ b/resources/js/blocks/ApplePayButtonComponent.js @@ -5,7 +5,6 @@ export const ApplePayButtonComponent = ({cart, extensions}) => { const mollieApplePayBlockDataCart = window.mollieApplePayBlockDataCart || window.mollieBlockData.mollieApplePayBlockDataCart const nonce = document.getElementById("woocommerce-process-checkout-nonce").value let updatedContactInfo = [] - let selectedShippingMethod = [] let redirectionUrl = '' const { product: {needShipping = true, subtotal}, @@ -13,10 +12,18 @@ export const ApplePayButtonComponent = ({cart, extensions}) => { ajaxUrl, } = mollieApplePayBlockDataCart + const findSelectedShippingMethod = (shippingRates) => { + let shippingRate = shippingRates.find((shippingMethod) => shippingMethod.selected === true) + return shippingRate ? shippingRate.rate_id : '' + } + let applePaySession = () => { const session = new ApplePaySession(3, request(countryCode, currencyCode, totalLabel, subtotal)) - console.log('ApplePaySession', session) + const store = wp.data.select('wc/store/cart') + const shippingRates = store.getShippingRates()[0].shipping_rates + let selectedShippingMethod = findSelectedShippingMethod(shippingRates, selectedShippingMethod) session.onshippingmethodselected = function (event) { + console.log(selectedShippingMethod) jQuery.ajax({ url: ajaxUrl, method: 'POST', @@ -31,6 +38,7 @@ export const ApplePayButtonComponent = ({cart, extensions}) => { }, success: (applePayShippingMethodUpdate, textStatus, jqXHR) => { let response = applePayShippingMethodUpdate.data + console.log(response) selectedShippingMethod = event.shippingMethod if (applePayShippingMethodUpdate.success === false) { response.errors = createAppleErrors(response.errors) @@ -74,6 +82,7 @@ export const ApplePayButtonComponent = ({cart, extensions}) => { }) } session.onvalidatemerchant = (applePayValidateMerchantEvent) => { + console.log(selectedShippingMethod) jQuery.ajax({ url: ajaxUrl, method: 'POST', diff --git a/src/Buttons/ApplePayButton/AppleAjaxRequests.php b/src/Buttons/ApplePayButton/AppleAjaxRequests.php index 59a82fb98..ec1b28b1a 100644 --- a/src/Buttons/ApplePayButton/AppleAjaxRequests.php +++ b/src/Buttons/ApplePayButton/AppleAjaxRequests.php @@ -191,7 +191,7 @@ public function updateShippingContact() } $paymentDetails = $this->whichCalculateTotals($applePayRequestDataObject); - $response = $this->responseTemplates->appleFormattedResponse($paymentDetails); + $response = $this->responseTemplates->appleFormattedResponse($paymentDetails, $applePayRequestDataObject); $this->responseTemplates->responseSuccess($response); } @@ -212,7 +212,7 @@ public function updateShippingMethod() $this->responseTemplates->responseWithDataErrors($applePayRequestDataObject->errors()); } $paymentDetails = $this->whichCalculateTotals($applePayRequestDataObject); - $response = $this->responseTemplates->appleFormattedResponse($paymentDetails); + $response = $this->responseTemplates->appleFormattedResponse($paymentDetails, $applePayRequestDataObject); $this->responseTemplates->responseSuccess($response); } diff --git a/src/Buttons/ApplePayButton/ResponsesToApple.php b/src/Buttons/ApplePayButton/ResponsesToApple.php index b4b580c2b..2f9f34cde 100644 --- a/src/Buttons/ApplePayButton/ResponsesToApple.php +++ b/src/Buttons/ApplePayButton/ResponsesToApple.php @@ -84,11 +84,15 @@ public function responseWithDataErrors($errorList) * * @return array */ - public function appleFormattedResponse(array $paymentDetails) + public function appleFormattedResponse(array $paymentDetails, $applePayRequestDataObject) { $response = []; if ($paymentDetails['shippingMethods']) { - $response['newShippingMethods'] = $paymentDetails['shippingMethods']; + $selectedShippingMethod = $applePayRequestDataObject->shippingMethod(); + $response['newShippingMethods'] = $this->reorderShippingMethods( + $paymentDetails['shippingMethods'], + $selectedShippingMethod + ); } $response['newLineItems'] = $this->appleNewLineItemsResponse( @@ -101,6 +105,28 @@ public function appleFormattedResponse(array $paymentDetails) return $response; } + /** + * Reorders the shipping methods to have the selected shipping method on top so we see it as selected + * @param array $methods + * @param array $selectedShippingMethod + * @return array + */ + private function reorderShippingMethods(array $methods, array $selectedShippingMethod): array + { + $reordered_methods = []; + + foreach ($methods as $key => $method) { + if ($method['identifier'] === $selectedShippingMethod['identifier']) { + $reordered_methods[] = $method; + unset($methods[$key]); + break; + } + } + + return array_merge($reordered_methods, array_values($methods)); + } + + /** * Returns a success response to be handled by the script */ diff --git a/tests/php/Functional/ApplePayButton/ResponsesToAppleTest.php b/tests/php/Functional/ApplePayButton/ResponsesToAppleTest.php index 5f5c793e3..01636dab9 100644 --- a/tests/php/Functional/ApplePayButton/ResponsesToAppleTest.php +++ b/tests/php/Functional/ApplePayButton/ResponsesToAppleTest.php @@ -82,7 +82,7 @@ public function testAppleFormattedResponseWithoutShippingMethod() $logger = $this->helperMocks->loggerMock(); $appleGateway = $this->mollieGateway('applepay', false, true); $responsesTemplate = new ResponsesToApple($logger, $appleGateway); - $response = $responsesTemplate->appleFormattedResponse($paymentDetails); + $response = $responsesTemplate->appleFormattedResponse($paymentDetails, $applePayRequestDataObject); self::assertEquals($response, $expectedResponse); } @@ -143,7 +143,7 @@ public function testAppleFormattedResponseWithShippingMethod() $logger = $this->helperMocks->loggerMock(); $appleGateway = $this->mollieGateway('applepay', false, true); $responsesTemplate = new ResponsesToApple($logger, $appleGateway); - $response = $responsesTemplate->appleFormattedResponse($paymentDetails); + $response = $responsesTemplate->appleFormattedResponse($paymentDetails, $applePayRequestDataObject); self::assertEquals($response, $expectedResponse); } From 2dc86db8d4d6cd89e713918bfc37b3ed4eb9d209 Mon Sep 17 00:00:00 2001 From: carmenmaymo Date: Thu, 10 Oct 2024 19:49:30 +0200 Subject: [PATCH 03/20] Show selected method in apple window on load --- resources/js/blocks/ApplePayButtonComponent.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/resources/js/blocks/ApplePayButtonComponent.js b/resources/js/blocks/ApplePayButtonComponent.js index 78bd5529d..5a7505f32 100644 --- a/resources/js/blocks/ApplePayButtonComponent.js +++ b/resources/js/blocks/ApplePayButtonComponent.js @@ -14,7 +14,14 @@ export const ApplePayButtonComponent = ({cart, extensions}) => { const findSelectedShippingMethod = (shippingRates) => { let shippingRate = shippingRates.find((shippingMethod) => shippingMethod.selected === true) - return shippingRate ? shippingRate.rate_id : '' + const appleFormattedRate = { + amount: '', + detail: '', + label: shippingRate.name, + identifier: shippingRate.rate_id, + selected: shippingRate.selected, + } + return shippingRate ? appleFormattedRate : '' } let applePaySession = () => { @@ -23,7 +30,6 @@ export const ApplePayButtonComponent = ({cart, extensions}) => { const shippingRates = store.getShippingRates()[0].shipping_rates let selectedShippingMethod = findSelectedShippingMethod(shippingRates, selectedShippingMethod) session.onshippingmethodselected = function (event) { - console.log(selectedShippingMethod) jQuery.ajax({ url: ajaxUrl, method: 'POST', @@ -61,6 +67,7 @@ export const ApplePayButtonComponent = ({cart, extensions}) => { callerPage: 'cart', needShipping: needShipping, 'woocommerce-process-checkout-nonce': nonce, + shippingMethod: selectedShippingMethod, }, complete: (jqXHR, textStatus) => { }, From 1f5ff00bc93ab4a2af5b83760309c34abc35098a Mon Sep 17 00:00:00 2001 From: carmenmaymo Date: Fri, 11 Oct 2024 08:48:19 +0200 Subject: [PATCH 04/20] Remove log --- resources/js/blocks/ApplePayButtonComponent.js | 1 - 1 file changed, 1 deletion(-) diff --git a/resources/js/blocks/ApplePayButtonComponent.js b/resources/js/blocks/ApplePayButtonComponent.js index 5a7505f32..1358a5fbf 100644 --- a/resources/js/blocks/ApplePayButtonComponent.js +++ b/resources/js/blocks/ApplePayButtonComponent.js @@ -89,7 +89,6 @@ export const ApplePayButtonComponent = ({cart, extensions}) => { }) } session.onvalidatemerchant = (applePayValidateMerchantEvent) => { - console.log(selectedShippingMethod) jQuery.ajax({ url: ajaxUrl, method: 'POST', From f00a94c6ba9eccd6a0f326e9d514f68503656239 Mon Sep 17 00:00:00 2001 From: carmenmaymo Date: Fri, 11 Oct 2024 09:03:55 +0200 Subject: [PATCH 05/20] Update tests --- .../ApplePayButton/DataToAppleButtonScriptsTest.php | 2 ++ tests/php/Functional/ApplePayButton/ResponsesToAppleTest.php | 5 ++++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/tests/php/Functional/ApplePayButton/DataToAppleButtonScriptsTest.php b/tests/php/Functional/ApplePayButton/DataToAppleButtonScriptsTest.php index 1d4c79cea..40fe4bbda 100644 --- a/tests/php/Functional/ApplePayButton/DataToAppleButtonScriptsTest.php +++ b/tests/php/Functional/ApplePayButton/DataToAppleButtonScriptsTest.php @@ -52,6 +52,7 @@ public function testApplePayScriptDataOnProduct() 'wc_get_product' => $this->wcProduct(), 'admin_url' => 'admin-ajax.php', 'get_option' => false, + 'is_admin' => false, ] ); @@ -97,6 +98,7 @@ public function testApplePayScriptDataOnCart() 'admin_url' => 'admin-ajax.php', 'WC' => $this->wooCommerce($subtotal), 'wp_nonce_field'=> 'testNonce', + 'is_admin' => false, ] ); diff --git a/tests/php/Functional/ApplePayButton/ResponsesToAppleTest.php b/tests/php/Functional/ApplePayButton/ResponsesToAppleTest.php index 01636dab9..59908b6b0 100644 --- a/tests/php/Functional/ApplePayButton/ResponsesToAppleTest.php +++ b/tests/php/Functional/ApplePayButton/ResponsesToAppleTest.php @@ -71,7 +71,8 @@ public function testAppleFormattedResponseWithoutShippingMethod() ] ]; - + //shippingMethods is null this is not going to run + $applePayRequestDataObject = []; expect('get_bloginfo') ->once() ->with('name') @@ -107,6 +108,8 @@ public function testAppleFormattedResponseWithShippingMethod() 'taxes' => $taxes, 'total' => $total ]; + //shippingMethods is null this is not going to run + $applePayRequestDataObject = []; $expectedResponse = [ 'newLineItems'=>[ [ From d0109d5a90e16608c0a95844d78c7880bf0f9517 Mon Sep 17 00:00:00 2001 From: carmenmaymo Date: Fri, 11 Oct 2024 09:08:47 +0200 Subject: [PATCH 06/20] Fix cs --- src/Buttons/ApplePayButton/DataToAppleButtonScripts.php | 2 +- src/Shared/Data.php | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/Buttons/ApplePayButton/DataToAppleButtonScripts.php b/src/Buttons/ApplePayButton/DataToAppleButtonScripts.php index fd10bf22f..d3e37ab1c 100644 --- a/src/Buttons/ApplePayButton/DataToAppleButtonScripts.php +++ b/src/Buttons/ApplePayButton/DataToAppleButtonScripts.php @@ -14,7 +14,7 @@ class DataToAppleButtonScripts */ public function applePayScriptData(bool $isBlock = false): array { - if(is_admin()) { + if (is_admin()) { return []; } $base_location = wc_get_base_location(); diff --git a/src/Shared/Data.php b/src/Shared/Data.php index 34daa67a1..cf38fd51f 100644 --- a/src/Shared/Data.php +++ b/src/Shared/Data.php @@ -788,7 +788,8 @@ protected function addRecurringPaymentMethods($apiKey, bool $testMode, bool $use return $result; } - public function mollieApplePayBlockDataCart() { + public function mollieApplePayBlockDataCart() + { $dataToScripts = new DataToAppleButtonScripts(); return $dataToScripts->applePayScriptData(true); } From a691410644e491e51c80ee75b96615e504e48700 Mon Sep 17 00:00:00 2001 From: carmenmaymo Date: Mon, 14 Oct 2024 14:07:26 +0200 Subject: [PATCH 07/20] Handle null shipping rates to prevent errors when they are unavailable --- resources/js/blocks/ApplePayButtonComponent.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/resources/js/blocks/ApplePayButtonComponent.js b/resources/js/blocks/ApplePayButtonComponent.js index 1358a5fbf..6e0205882 100644 --- a/resources/js/blocks/ApplePayButtonComponent.js +++ b/resources/js/blocks/ApplePayButtonComponent.js @@ -27,9 +27,12 @@ export const ApplePayButtonComponent = ({cart, extensions}) => { let applePaySession = () => { const session = new ApplePaySession(3, request(countryCode, currencyCode, totalLabel, subtotal)) const store = wp.data.select('wc/store/cart') - const shippingRates = store.getShippingRates()[0].shipping_rates - let selectedShippingMethod = findSelectedShippingMethod(shippingRates, selectedShippingMethod) - session.onshippingmethodselected = function (event) { + const shippingRates = store.getShippingRates()?.[0]?.shipping_rates; + let selectedShippingMethod = ''; + if (shippingRates && shippingRates.length > 0) { + selectedShippingMethod = findSelectedShippingMethod(shippingRates, selectedShippingMethod); + } + session.onshippingmethodselected = function (event) { jQuery.ajax({ url: ajaxUrl, method: 'POST', From 71ff3644eb1a727a1aba7ed290ef201309feedf3 Mon Sep 17 00:00:00 2001 From: carmenmaymo Date: Mon, 14 Oct 2024 14:07:47 +0200 Subject: [PATCH 08/20] Remove empty complete and logs --- resources/js/blocks/ApplePayButtonComponent.js | 7 ------- 1 file changed, 7 deletions(-) diff --git a/resources/js/blocks/ApplePayButtonComponent.js b/resources/js/blocks/ApplePayButtonComponent.js index 6e0205882..6d05bea75 100644 --- a/resources/js/blocks/ApplePayButtonComponent.js +++ b/resources/js/blocks/ApplePayButtonComponent.js @@ -43,11 +43,8 @@ export const ApplePayButtonComponent = ({cart, extensions}) => { simplifiedContact: updatedContactInfo, 'woocommerce-process-checkout-nonce': nonce, }, - complete: (jqXHR, textStatus) => { - }, success: (applePayShippingMethodUpdate, textStatus, jqXHR) => { let response = applePayShippingMethodUpdate.data - console.log(response) selectedShippingMethod = event.shippingMethod if (applePayShippingMethodUpdate.success === false) { response.errors = createAppleErrors(response.errors) @@ -72,8 +69,6 @@ export const ApplePayButtonComponent = ({cart, extensions}) => { 'woocommerce-process-checkout-nonce': nonce, shippingMethod: selectedShippingMethod, }, - complete: (jqXHR, textStatus) => { - }, success: (applePayShippingContactUpdate, textStatus, jqXHR) => { let response = applePayShippingContactUpdate.data updatedContactInfo = event.shippingContact @@ -100,8 +95,6 @@ export const ApplePayButtonComponent = ({cart, extensions}) => { validationUrl: applePayValidateMerchantEvent.validationURL, 'woocommerce-process-checkout-nonce': nonce, }, - complete: (jqXHR, textStatus) => { - }, success: (merchantSession, textStatus, jqXHR) => { if (merchantSession.success === true) { session.completeMerchantValidation(JSON.parse(merchantSession.data)) From 970d798005a5c59ca86739445d1bbdd52b884681 Mon Sep 17 00:00:00 2001 From: carmenmaymo Date: Mon, 14 Oct 2024 14:09:02 +0200 Subject: [PATCH 09/20] Remove empty complete --- resources/js/blocks/ApplePayButtonComponent.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/resources/js/blocks/ApplePayButtonComponent.js b/resources/js/blocks/ApplePayButtonComponent.js index 6d05bea75..d7767fe38 100644 --- a/resources/js/blocks/ApplePayButtonComponent.js +++ b/resources/js/blocks/ApplePayButtonComponent.js @@ -148,9 +148,6 @@ export const ApplePayButtonComponent = ({cart, extensions}) => { 'order_comments': '', 'payment_method': 'mollie_wc_gateway_applepay', '_wp_http_referer': '/?wc-ajax=update_order_review' - }, - complete: (jqXHR, textStatus) => { - }, success: (authorizationResult, textStatus, jqXHR) => { let result = authorizationResult.data From 6be2bf26b9e86a9433171f10e042464dafcf4232 Mon Sep 17 00:00:00 2001 From: carmenmaymo Date: Mon, 14 Oct 2024 14:35:17 +0200 Subject: [PATCH 10/20] Add responsive styling for ApplePay button to adapt based on screen size --- resources/scss/mollie-applepaydirect.scss | 25 ++++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/resources/scss/mollie-applepaydirect.scss b/resources/scss/mollie-applepaydirect.scss index 3e76c6900..07e9ae8fd 100644 --- a/resources/scss/mollie-applepaydirect.scss +++ b/resources/scss/mollie-applepaydirect.scss @@ -4,11 +4,34 @@ .apple-pay-button { display: inline-block; width: 100%; - height: 41px; -webkit-appearance: -apple-pay-button; -apple-pay-button-type: checkout; /* also: check-out, book, or subscribe */ } +@media (max-width: 480px) { + .apple-pay-button { + height: 41px; + min-height: 40px; + max-height: 47px; + } +} + +@media (min-width: 481px) and (max-width: 1024px) { + .apple-pay-button { + height: 48px; + min-height: 48px; + max-height: 55px; + } +} + +@media (min-width: 1025px) { + .apple-pay-button { + height: 56px; + min-height: 56px; + max-height: 64px; + } +} + .apple-pay-button-black { -apple-pay-button-style: black; } From 962ea047679b185356e9b84f897c54e7faab8619 Mon Sep 17 00:00:00 2001 From: carmenmaymo Date: Wed, 16 Oct 2024 12:46:21 +0200 Subject: [PATCH 11/20] Prevent default form validation on clicking the button --- resources/js/blocks/ApplePayButtonComponent.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/resources/js/blocks/ApplePayButtonComponent.js b/resources/js/blocks/ApplePayButtonComponent.js index d7767fe38..d712477cf 100644 --- a/resources/js/blocks/ApplePayButtonComponent.js +++ b/resources/js/blocks/ApplePayButtonComponent.js @@ -173,7 +173,10 @@ export const ApplePayButtonComponent = ({cart, extensions}) => { ); From 84e168193305888925d2e0c33dfdcd03ed56999d Mon Sep 17 00:00:00 2001 From: carmenmaymo Date: Wed, 16 Oct 2024 13:04:59 +0200 Subject: [PATCH 12/20] Add new setting for the express button --- inc/settings/mollie_applepay_settings.php | 8 ++++++++ src/PaymentMethods/Applepay.php | 8 ++++++-- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/inc/settings/mollie_applepay_settings.php b/inc/settings/mollie_applepay_settings.php index 2ef1c3fa0..92e0b305a 100644 --- a/inc/settings/mollie_applepay_settings.php +++ b/inc/settings/mollie_applepay_settings.php @@ -115,6 +115,14 @@ 'value' => isset($applePayOption['mollie_apple_pay_button_enabled_product']) ? $applePayOption['mollie_apple_pay_button_enabled_product'] : 'no', ], + [ + 'id' => 'mollie_apple_pay_button_enabled_express_checkout', + 'title' => __('Enable Apple Pay Express Button on Checkout page', 'mollie-payments-for-woocommerce'), + 'desc' => __('Enable the Apple Pay direct buy button on the Express Buttons section of the Checkout page', 'mollie-payments-for-woocommerce'), + 'type' => 'checkbox', + 'default' => 'no', + 'value' => isset($applePayOption['mollie_apple_pay_button_enabled_express_checkout']) ? $applePayOption['mollie_apple_pay_button_enabled_express_checkout'] : 'no', + ], [ 'id' => $pluginName . '_' . 'sectionend', 'type' => 'sectionend', diff --git a/src/PaymentMethods/Applepay.php b/src/PaymentMethods/Applepay.php index 63a32c9ab..7a968dcd3 100644 --- a/src/PaymentMethods/Applepay.php +++ b/src/PaymentMethods/Applepay.php @@ -32,7 +32,6 @@ public function getFormFields($generalFormFields): array $paymentMethodFormFieds = [ 'mollie_apple_pay_button_enabled_cart' => [ 'title' => __('Enable Apple Pay Button on Cart page', 'mollie-payments-for-woocommerce'), - /* translators: Placeholder 1: enabled or disabled */ 'desc' => __( 'Enable the Apple Pay direct buy button on the Cart page', 'mollie-payments-for-woocommerce' @@ -42,7 +41,6 @@ public function getFormFields($generalFormFields): array ], 'mollie_apple_pay_button_enabled_product' => [ 'title' => __('Enable Apple Pay Button on Product page', 'mollie-payments-for-woocommerce'), - /* translators: Placeholder 1: enabled or disabled */ 'desc' => __( 'Enable the Apple Pay direct buy button on the Product page', 'mollie-payments-for-woocommerce' @@ -50,6 +48,12 @@ public function getFormFields($generalFormFields): array 'type' => 'checkbox', 'default' => 'no', ], + 'mollie_apple_pay_button_enabled_express_checkout' => [ + 'title' => __('Enable Apple Pay Express Button on Checkout page', 'mollie-payments-for-woocommerce'), + 'desc' =>__('Enable the Apple Pay direct buy button on the Express Buttons section of the Checkout page', 'mollie-payments-for-woocommerce'), + 'type' => 'checkbox', + 'default' => 'no', + ], ]; return array_merge($generalFormFields, $paymentMethodFormFieds); } From 673d4b9fefdb7206e5e12387228c675ce6327f24 Mon Sep 17 00:00:00 2001 From: carmenmaymo Date: Wed, 16 Oct 2024 13:52:29 +0200 Subject: [PATCH 13/20] Show button only if enabled --- resources/js/mollieBlockIndex.js | 9 ++++-- src/Assets/MollieCheckoutBlocksSupport.php | 35 +++++++++++----------- 2 files changed, 24 insertions(+), 20 deletions(-) diff --git a/resources/js/mollieBlockIndex.js b/resources/js/mollieBlockIndex.js index 3109b690b..d6146439a 100644 --- a/resources/js/mollieBlockIndex.js +++ b/resources/js/mollieBlockIndex.js @@ -49,13 +49,17 @@ import ApplePayButtonComponent from './blocks/ApplePayButtonComponent' gatewayData.forEach(item => { let register = () => registerPaymentMethod(molliePaymentMethod(useEffect, ajaxUrl, filters, gatewayData, availableGateways, item, jQuery, requiredFields, isCompanyFieldVisible, isPhoneFieldVisible)); if (item.name === 'mollie_wc_gateway_applepay' && !isBlockEditor) { + const isExpressEnabled = item.isExpressEnabled; if ((isAppleSession && window.ApplePaySession.canMakePayments())) { register(); + if (isExpressEnabled !== true) { + return; + } const {registerExpressPaymentMethod} = wc.wcBlocksRegistry; registerExpressPaymentMethod({ name: 'mollie_wc_gateway_applepay_express', - content: , - edit: , + content: < ApplePayButtonComponent />, + edit: < ApplePayButtonComponent />, ariaLabel: 'Apple Pay', canMakePayment: () => true, paymentMethodId: 'mollie_wc_gateway_applepay', @@ -63,7 +67,6 @@ import ApplePayButtonComponent from './blocks/ApplePayButtonComponent' features: ['products'], }, }) - } return; } diff --git a/src/Assets/MollieCheckoutBlocksSupport.php b/src/Assets/MollieCheckoutBlocksSupport.php index 33ace20de..16d2d7481 100644 --- a/src/Assets/MollieCheckoutBlocksSupport.php +++ b/src/Assets/MollieCheckoutBlocksSupport.php @@ -113,26 +113,26 @@ public static function gatewayDataForWCBlocks(Data $dataService, array $gatewayI $isSepaEnabled = isset($gatewayInstances['mollie_wc_gateway_directdebit']) && $gatewayInstances['mollie_wc_gateway_directdebit']->enabled === 'yes'; /** @var MolliePaymentGateway $gateway */ foreach ($gatewayInstances as $gatewayKey => $gateway) { - $gatewayId = is_string($gateway->paymentMethod()->getProperty('id')) ? $gateway->paymentMethod( - )->getProperty('id') : ""; + $method = $gateway->paymentMethod(); + $gatewayId = is_string($method->getProperty('id')) ? $method->getProperty('id') : ""; if ($gateway->enabled !== 'yes' || ($gatewayId === 'directdebit' && !is_admin())) { continue; } - $content = $gateway->paymentMethod()->getProcessedDescriptionForBlock(); + $content = $method->getProcessedDescriptionForBlock(); $issuers = false; - if ($gateway->paymentMethod()->getProperty('paymentFields') === true) { - $paymentFieldsService = $gateway->paymentMethod()->paymentFieldsService(); - $paymentFieldsService->setStrategy($gateway->paymentMethod()); - $issuers = $gateway->paymentMethod()->paymentFieldsService()->getStrategyMarkup($gateway); + if ($method->getProperty('paymentFields') === true) { + $paymentFieldsService = $method->paymentFieldsService(); + $paymentFieldsService->setStrategy($method); + $issuers = $method->paymentFieldsService()->getStrategyMarkup($gateway); } if ($gatewayId === 'creditcard') { $content .= $issuers; $issuers = false; } - $title = $gateway->paymentMethod()->title(); + $title = $method->title(); $labelMarkup = "{$title}{$gateway->icon}"; - $hasSurcharge = $gateway->paymentMethod()->hasSurcharge(); + $hasSurcharge = $method->hasSurcharge(); $countryCodes = [ 'BE' => '+32xxxxxxxxx', 'NL' => '+316xxxxxxxx', @@ -155,15 +155,16 @@ public static function gatewayDataForWCBlocks(Data $dataService, array $gatewayI 'edit' => $content, 'paymentMethodId' => $gatewayKey, 'allowedCountries' => is_array( - $gateway->paymentMethod()->getProperty('allowed_countries') - ) ? $gateway->paymentMethod()->getProperty('allowed_countries') : [], - 'ariaLabel' => $gateway->paymentMethod()->getProperty('defaultDescription'), - 'supports' => self::gatewaySupportsFeatures($gateway->paymentMethod(), $isSepaEnabled), - 'errorMessage' => $gateway->paymentMethod()->getProperty('errorMessage'), - 'companyPlaceholder' => $gateway->paymentMethod()->getProperty('companyPlaceholder'), - 'phoneLabel' => $gateway->paymentMethod()->getProperty('phoneLabel'), + $method->getProperty('allowed_countries') + ) ? $method->getProperty('allowed_countries') : [], + 'ariaLabel' => $method->getProperty('defaultDescription'), + 'supports' => self::gatewaySupportsFeatures($method, $isSepaEnabled), + 'errorMessage' => $method->getProperty('errorMessage'), + 'companyPlaceholder' => $method->getProperty('companyPlaceholder'), + 'phoneLabel' => $method->getProperty('phoneLabel'), 'phonePlaceholder' => $phonePlaceholder, - 'birthdatePlaceholder' => $gateway->paymentMethod()->getProperty('birthdatePlaceholder'), + 'birthdatePlaceholder' => $method->getProperty('birthdatePlaceholder'), + 'isExpressEnabled' => $gatewayId === 'applepay' && $method->getProperty('mollie_apple_pay_button_enabled_express_checkout') === 'yes', ]; } $dataToScript['gatewayData'] = $gatewayData; From 35f7b1032b4d58367b33defbd5471961caaa1552 Mon Sep 17 00:00:00 2001 From: carmenmaymo Date: Thu, 17 Oct 2024 07:50:15 +0200 Subject: [PATCH 14/20] Fix CS --- src/PaymentMethods/Applepay.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/PaymentMethods/Applepay.php b/src/PaymentMethods/Applepay.php index 7a968dcd3..0ef6f13a6 100644 --- a/src/PaymentMethods/Applepay.php +++ b/src/PaymentMethods/Applepay.php @@ -50,7 +50,7 @@ public function getFormFields($generalFormFields): array ], 'mollie_apple_pay_button_enabled_express_checkout' => [ 'title' => __('Enable Apple Pay Express Button on Checkout page', 'mollie-payments-for-woocommerce'), - 'desc' =>__('Enable the Apple Pay direct buy button on the Express Buttons section of the Checkout page', 'mollie-payments-for-woocommerce'), + 'desc' => __('Enable the Apple Pay direct buy button on the Express Buttons section of the Checkout page', 'mollie-payments-for-woocommerce'), 'type' => 'checkbox', 'default' => 'no', ], From 45f5d844292f0f9f6611ab6a4aa3077a80e53d43 Mon Sep 17 00:00:00 2001 From: carmenmaymo Date: Fri, 18 Oct 2024 11:23:03 +0200 Subject: [PATCH 15/20] Remove extra space & refactor variable assignment --- resources/js/mollieBlockIndex.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/resources/js/mollieBlockIndex.js b/resources/js/mollieBlockIndex.js index d6146439a..fdfaa0141 100644 --- a/resources/js/mollieBlockIndex.js +++ b/resources/js/mollieBlockIndex.js @@ -49,7 +49,7 @@ import ApplePayButtonComponent from './blocks/ApplePayButtonComponent' gatewayData.forEach(item => { let register = () => registerPaymentMethod(molliePaymentMethod(useEffect, ajaxUrl, filters, gatewayData, availableGateways, item, jQuery, requiredFields, isCompanyFieldVisible, isPhoneFieldVisible)); if (item.name === 'mollie_wc_gateway_applepay' && !isBlockEditor) { - const isExpressEnabled = item.isExpressEnabled; + const {isExpressEnabled} = item; if ((isAppleSession && window.ApplePaySession.canMakePayments())) { register(); if (isExpressEnabled !== true) { @@ -58,8 +58,8 @@ import ApplePayButtonComponent from './blocks/ApplePayButtonComponent' const {registerExpressPaymentMethod} = wc.wcBlocksRegistry; registerExpressPaymentMethod({ name: 'mollie_wc_gateway_applepay_express', - content: < ApplePayButtonComponent />, - edit: < ApplePayButtonComponent />, + content: , + edit: , ariaLabel: 'Apple Pay', canMakePayment: () => true, paymentMethodId: 'mollie_wc_gateway_applepay', From 836e2a9448856fd29c10c960e62c815a8eea347b Mon Sep 17 00:00:00 2001 From: carmenmaymo Date: Tue, 5 Nov 2024 11:49:35 +0100 Subject: [PATCH 16/20] Use styles from buttonAttributes Removed the css styles. Hardcoded defaults. New component for the editor. Use the new component in cart and checkout. --- resources/js/applepayButtonBlock.js | 3 ++- .../js/blocks/ApplePayButtonComponent.js | 8 ++++++- .../blocks/ApplePayButtonEditorComponent.js | 17 +++++++++++++ resources/js/mollieBlockIndex.js | 11 ++++++--- resources/scss/mollie-applepaydirect.scss | 24 ------------------- 5 files changed, 34 insertions(+), 29 deletions(-) create mode 100644 resources/js/blocks/ApplePayButtonEditorComponent.js diff --git a/resources/js/applepayButtonBlock.js b/resources/js/applepayButtonBlock.js index 058da50c7..251dc499a 100644 --- a/resources/js/applepayButtonBlock.js +++ b/resources/js/applepayButtonBlock.js @@ -1,4 +1,5 @@ import {ApplePayButtonComponent} from "./blocks/ApplePayButtonComponent"; +import {ApplePayButtonEditorComponent} from "./blocks/ApplePayButtonEditorComponent"; ( function ({mollieApplePayBlockDataCart}) { @@ -15,7 +16,7 @@ import {ApplePayButtonComponent} from "./blocks/ApplePayButtonComponent"; registerExpressPaymentMethod({ name: 'mollie_wc_gateway_applepay_express', content: < ApplePayButtonComponent/>, - edit: < ApplePayButtonComponent/>, + edit: < ApplePayButtonEditorComponent/>, ariaLabel: 'Apple Pay', canMakePayment: () => true, paymentMethodId: 'mollie_wc_gateway_applepay', diff --git a/resources/js/blocks/ApplePayButtonComponent.js b/resources/js/blocks/ApplePayButtonComponent.js index d712477cf..696ac753b 100644 --- a/resources/js/blocks/ApplePayButtonComponent.js +++ b/resources/js/blocks/ApplePayButtonComponent.js @@ -1,7 +1,7 @@ import {request} from "../applePayRequest"; import {createAppleErrors} from "../applePayError"; -export const ApplePayButtonComponent = ({cart, extensions}) => { +export const ApplePayButtonComponent = ({ buttonAttributes = {} }) => { const mollieApplePayBlockDataCart = window.mollieApplePayBlockDataCart || window.mollieBlockData.mollieApplePayBlockDataCart const nonce = document.getElementById("woocommerce-process-checkout-nonce").value let updatedContactInfo = [] @@ -11,6 +11,11 @@ export const ApplePayButtonComponent = ({cart, extensions}) => { shop: {countryCode, currencyCode = 'EUR', totalLabel = ''}, ajaxUrl, } = mollieApplePayBlockDataCart + const { useMemo } = wp.element; + const style = useMemo(() => ({ + height: `${buttonAttributes.height || 48}px`, + borderRadius: `${buttonAttributes.borderRadius || 4}px` + }), [buttonAttributes.height, buttonAttributes.borderRadius]); const findSelectedShippingMethod = (shippingRates) => { let shippingRate = shippingRates.find((shippingMethod) => shippingMethod.selected === true) @@ -177,6 +182,7 @@ export const ApplePayButtonComponent = ({cart, extensions}) => { event.preventDefault(); applePaySession(); }} + style={style} > ); diff --git a/resources/js/blocks/ApplePayButtonEditorComponent.js b/resources/js/blocks/ApplePayButtonEditorComponent.js new file mode 100644 index 000000000..6953fec83 --- /dev/null +++ b/resources/js/blocks/ApplePayButtonEditorComponent.js @@ -0,0 +1,17 @@ +export const ApplePayButtonEditorComponent = ({ buttonAttributes = {} }) => { + const { useMemo } = wp.element; + const style = useMemo(() => ({ + height: `${buttonAttributes.height || 48}px`, + borderRadius: `${buttonAttributes.borderRadius || 4}px` + }), [buttonAttributes.height, buttonAttributes.borderRadius]); + + return ( + + ); +}; +export default ApplePayButtonEditorComponent; diff --git a/resources/js/mollieBlockIndex.js b/resources/js/mollieBlockIndex.js index fdfaa0141..f6b8fd479 100644 --- a/resources/js/mollieBlockIndex.js +++ b/resources/js/mollieBlockIndex.js @@ -1,5 +1,6 @@ import molliePaymentMethod from './blocks/molliePaymentMethod' import ApplePayButtonComponent from './blocks/ApplePayButtonComponent' +import ApplePayButtonEditorComponent from './blocks/ApplePayButtonEditorComponent' ( function ({ mollieBlockData, wc, _, jQuery}) { @@ -48,8 +49,8 @@ import ApplePayButtonComponent from './blocks/ApplePayButtonComponent' } gatewayData.forEach(item => { let register = () => registerPaymentMethod(molliePaymentMethod(useEffect, ajaxUrl, filters, gatewayData, availableGateways, item, jQuery, requiredFields, isCompanyFieldVisible, isPhoneFieldVisible)); - if (item.name === 'mollie_wc_gateway_applepay' && !isBlockEditor) { - const {isExpressEnabled} = item; + if (item.name === 'mollie_wc_gateway_applepay') { + const {isExpressEnabled} = item; if ((isAppleSession && window.ApplePaySession.canMakePayments())) { register(); if (isExpressEnabled !== true) { @@ -58,13 +59,17 @@ import ApplePayButtonComponent from './blocks/ApplePayButtonComponent' const {registerExpressPaymentMethod} = wc.wcBlocksRegistry; registerExpressPaymentMethod({ name: 'mollie_wc_gateway_applepay_express', + title: 'Apple Pay Express button', + description: 'Apple Pay Express button', content: , - edit: , + edit: , ariaLabel: 'Apple Pay', canMakePayment: () => true, paymentMethodId: 'mollie_wc_gateway_applepay', + gatewayId: 'mollie_wc_gateway_applepay', supports: { features: ['products'], + style: ['height', 'borderRadius'] }, }) } diff --git a/resources/scss/mollie-applepaydirect.scss b/resources/scss/mollie-applepaydirect.scss index 07e9ae8fd..4ede89a78 100644 --- a/resources/scss/mollie-applepaydirect.scss +++ b/resources/scss/mollie-applepaydirect.scss @@ -8,30 +8,6 @@ -apple-pay-button-type: checkout; /* also: check-out, book, or subscribe */ } -@media (max-width: 480px) { - .apple-pay-button { - height: 41px; - min-height: 40px; - max-height: 47px; - } -} - -@media (min-width: 481px) and (max-width: 1024px) { - .apple-pay-button { - height: 48px; - min-height: 48px; - max-height: 55px; - } -} - -@media (min-width: 1025px) { - .apple-pay-button { - height: 56px; - min-height: 56px; - max-height: 64px; - } -} - .apple-pay-button-black { -apple-pay-button-style: black; } From f500cdb54509e2f0d282ab6015f54e06b6427913 Mon Sep 17 00:00:00 2001 From: carmenmaymo Date: Tue, 5 Nov 2024 11:49:53 +0100 Subject: [PATCH 17/20] Add notice for styling --- src/PaymentMethods/Applepay.php | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/PaymentMethods/Applepay.php b/src/PaymentMethods/Applepay.php index 226993aaf..328a83877 100644 --- a/src/PaymentMethods/Applepay.php +++ b/src/PaymentMethods/Applepay.php @@ -30,6 +30,19 @@ protected function getConfig(): array public function getFormFields($generalFormFields): array { + $notice = [ + 'notice' => [ + 'title' => + + __( + '

Important: The Cart & Express Checkout Smart Button Stylings may be controlled in the Editor on the Block Checkout configuration.

', + 'mollie-payments-for-woocommerce' + ), + 'type' => 'title', + 'class' => 'notice notice-warning', + 'css' => 'padding:20px;', + ], + ]; $paymentMethodFormFieds = [ 'mollie_apple_pay_button_enabled_cart' => [ 'title' => __('Enable Apple Pay Button on Cart page', 'mollie-payments-for-woocommerce'), @@ -56,6 +69,6 @@ public function getFormFields($generalFormFields): array 'default' => 'no', ], ]; - return array_merge($generalFormFields, $paymentMethodFormFieds); + return array_merge($notice, $generalFormFields, $paymentMethodFormFieds); } } From edf253fddd8e6950dd6a0eec42cd3833c2c69345 Mon Sep 17 00:00:00 2001 From: carmenmaymo Date: Thu, 7 Nov 2024 09:12:37 +0100 Subject: [PATCH 18/20] Remove useMemo --- resources/js/blocks/ApplePayButtonComponent.js | 5 ++--- resources/js/blocks/ApplePayButtonEditorComponent.js | 5 ++--- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/resources/js/blocks/ApplePayButtonComponent.js b/resources/js/blocks/ApplePayButtonComponent.js index 696ac753b..ea2020658 100644 --- a/resources/js/blocks/ApplePayButtonComponent.js +++ b/resources/js/blocks/ApplePayButtonComponent.js @@ -11,11 +11,10 @@ export const ApplePayButtonComponent = ({ buttonAttributes = {} }) => { shop: {countryCode, currencyCode = 'EUR', totalLabel = ''}, ajaxUrl, } = mollieApplePayBlockDataCart - const { useMemo } = wp.element; - const style = useMemo(() => ({ + const style = { height: `${buttonAttributes.height || 48}px`, borderRadius: `${buttonAttributes.borderRadius || 4}px` - }), [buttonAttributes.height, buttonAttributes.borderRadius]); + } const findSelectedShippingMethod = (shippingRates) => { let shippingRate = shippingRates.find((shippingMethod) => shippingMethod.selected === true) diff --git a/resources/js/blocks/ApplePayButtonEditorComponent.js b/resources/js/blocks/ApplePayButtonEditorComponent.js index 6953fec83..d7c20cc6b 100644 --- a/resources/js/blocks/ApplePayButtonEditorComponent.js +++ b/resources/js/blocks/ApplePayButtonEditorComponent.js @@ -1,9 +1,8 @@ export const ApplePayButtonEditorComponent = ({ buttonAttributes = {} }) => { - const { useMemo } = wp.element; - const style = useMemo(() => ({ + const style = { height: `${buttonAttributes.height || 48}px`, borderRadius: `${buttonAttributes.borderRadius || 4}px` - }), [buttonAttributes.height, buttonAttributes.borderRadius]); + } return (