From 41d95452d0c945afc89cba286cfa801f429a5441 Mon Sep 17 00:00:00 2001 From: Max Parker Date: Tue, 20 May 2025 15:31:06 +0100 Subject: [PATCH 1/6] Introduce placeholder express methods Previously there was a large CSL score because all of the Adyen Express methods were being lazy loaded and only showing after the network request had finished. The BlueFinch Checkout has had an update allowing for placeholder express methods to be rendered and remain visible until the lazy loading of the full Express methods. This update introduces these placeholders and then switches them out after we have fully rendered the express methods. --- Plugin/CustomerData/Cart.php | 58 +++++++++++++++++++ etc/di.xml | 6 ++ view/frontend/templates/adyen.phtml | 21 ++++++- .../components/ApplePay/ApplePayStyles.scss | 7 ++- .../src/components/GooglePay/GooglePay.vue | 20 ++++--- .../components/GooglePay/GooglePayStyles.scss | 5 +- 6 files changed, 100 insertions(+), 17 deletions(-) create mode 100644 Plugin/CustomerData/Cart.php create mode 100644 etc/di.xml diff --git a/Plugin/CustomerData/Cart.php b/Plugin/CustomerData/Cart.php new file mode 100644 index 0000000..5aed327 --- /dev/null +++ b/Plugin/CustomerData/Cart.php @@ -0,0 +1,58 @@ +adyenPaymentMethodManagement = $adyenPaymentMethodManagement; + $this->checkoutSession = $checkoutSession; + } + + /** + * Intercept getSectionData and add is_minicart identifier + * + * @param Subject $subject + * @param array $result + * @return array + */ + public function afterGetSectionData( + Subject $subject, + array $result + ): array { + $quoteId = $this->checkoutSession->getQuoteId(); + $paymentMethods = $quoteId ? + json_decode( + $this->adyenPaymentMethodManagement->getPaymentMethods($quoteId), + true + ) : []; + $result[self::PAYMENT_METHODS_KEY] = $paymentMethods; + return $result; + } +} diff --git a/etc/di.xml b/etc/di.xml new file mode 100644 index 0000000..9423a4a --- /dev/null +++ b/etc/di.xml @@ -0,0 +1,6 @@ + + + + + + diff --git a/view/frontend/templates/adyen.phtml b/view/frontend/templates/adyen.phtml index 6a1f842..477d4e7 100644 --- a/view/frontend/templates/adyen.phtml +++ b/view/frontend/templates/adyen.phtml @@ -2,10 +2,11 @@ /** * @var \Magento\Framework\View\Element\Template $block * @var \Magento\Framework\Escaper $escaper - * @var \BlueFinch\CheckoutAdyen\ViewModel\Assets $assetViewModel + * @var \BlueFinch\Checkout\ViewModel\Assets $assetViewModel * @var \Magento\Framework\View\Helper\SecureHtmlRenderer $secureRenderer */ + $assetViewModel = $block->getAssetViewModel(); $applePay = $assetViewModel->getDistViewFileUrl('BlueFinch_CheckoutAdyen::js/checkout/dist/components/ApplePay/ApplePay.min.js'); @@ -31,8 +32,22 @@ $styles = $assetViewModel->getDistViewFileUrl('BlueFinch_CheckoutAdyen::js/check window.bluefinchCheckout.callbacks.onCreate = window.bluefinchCheckout.callbacks.onCreate || {}; window.bluefinchCheckout.callbacks.onLogin = window.bluefinchCheckout.callbacks.onLogin || {}; - window.bluefinchCheckout.expressPaymentMethods.AdyenApplePay = "{$escaper->escapeJs($applePay)}"; - window.bluefinchCheckout.expressPaymentMethods.AdyenGooglePay = "{$escaper->escapeJs($googlePay)}"; + window.bluefinchCheckout.placeholderExpressMethods = window.bluefinchCheckout.placeholderExpressMethods || []; + + const cart = JSON.parse(localStorage.getItem('mage-cache-storage'))?.cart; + const googlePayEnabled = cart?.bluefinch_adyen_payment_methods?.paymentMethodsResponse?.paymentMethods?.find(({ type }) => type === 'googlepay'); + const applePayEnabled = cart?.bluefinch_adyen_payment_methods?.paymentMethodsResponse?.paymentMethods?.find(({ type }) => type === 'applepay'); + + if (googlePayEnabled) { + window.bluefinchCheckout.placeholderExpressMethods.push('adyenGooglePay'); + window.bluefinchCheckout.expressPaymentMethods.AdyenGooglePay = "{$escaper->escapeJs($googlePay)}"; + } + + if (applePayEnabled && window.ApplePaySession && window.ApplePaySession.canMakePayments) { + window.bluefinchCheckout.placeholderExpressMethods.push('adyenApplePay'); + window.bluefinchCheckout.expressPaymentMethods.AdyenApplePay = "{$escaper->escapeJs($applePay)}"; + } + window.bluefinchCheckout.additionalVaultedMethods.AdyenVaultedMethods = "{$escaper->escapeJs($vaulted)}"; window.bluefinchCheckout.paymentMethods.Adyen = "{$escaper->escapeJs($dropIn)}"; window.bluefinchCheckout.footerPaymentIcons.AdyenFooterIcons = "{$escaper->escapeJs($icons)}"; diff --git a/view/frontend/web/js/checkout/src/components/ApplePay/ApplePayStyles.scss b/view/frontend/web/js/checkout/src/components/ApplePay/ApplePayStyles.scss index 33735c7..21eed2a 100644 --- a/view/frontend/web/js/checkout/src/components/ApplePay/ApplePayStyles.scss +++ b/view/frontend/web/js/checkout/src/components/ApplePay/ApplePayStyles.scss @@ -1,14 +1,15 @@ #adyen-apple-pay { - line-height: var(--button__line-height); + height: var(--adyen-express-button-height, 55px); + line-height: var(--button__line-height); &.text-loading { border-radius: var(--button__text-placeholder-bg-radius); - height: var(--braintree-express-button-height, 48px); + height: var(--braintree-express-button-height, 55px); } > button { border-radius: var(--button__border-radius); - height: var(--adyen-express-button-height, 48px); + height: var(--adyen-express-button-height, 55px); overflow: hidden; width: 100%; } diff --git a/view/frontend/web/js/checkout/src/components/GooglePay/GooglePay.vue b/view/frontend/web/js/checkout/src/components/GooglePay/GooglePay.vue index d927547..bacc254 100644 --- a/view/frontend/web/js/checkout/src/components/GooglePay/GooglePay.vue +++ b/view/frontend/web/js/checkout/src/components/GooglePay/GooglePay.vue @@ -1,13 +1,15 @@