Skip to content

Added placeholder express methods to prevent CLS #70

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
maxparkergene wants to merge 5 commits into
base: develop
Choose a base branch
from
Open

Added placeholder express methods to prevent CLS #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
119a1c1
Added placeholder express methods to prevent CLS
maxparkergene May 20, 2025
d5e586f
Merge branch 'develop' of github.com:BlueFinchCommerce/module-checkou…
maxparkergene Jun 19, 2025
474b5cf
Merge branch 'develop' of github.com:BlueFinchCommerce/module-checkou…
maxparkergene Sep 24, 2025
db3334e
Fix eslint issues
maxparkergene Sep 24, 2025
3b05329
Updated PayPal Express default height
maxparkergene Sep 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 17 additions & 2 deletions ...rontend/web/js/checkout/src/components/Steps/CustomerInfoPage/DetailsPage/DetailsPage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
<template>
<div class="details-form">
<div class="details-form-header"
v-show="isExpressPaymentsVisible && (typeof ageCheckRequired === 'undefined' || !ageCheckRequired)">
v-show="(isExpressPaymentsVisible || placeholderExpressMethods.length)
&& (typeof ageCheckRequired === 'undefined' || !ageCheckRequired)">
<div class="instantCheckout-block">
<TextField
:text="instantCheckoutText"
Expand Down Expand Up @@ -38,6 +39,14 @@
v-for="expressPaymentMethod in expressPaymentMethods"
:key="`${expressPaymentMethod}-${storedKey}`"
/>
<template
v-for="index in placeholderExpressMethods"
:key="index"
>
<div class="button button--blank">
<div class="text-loading" />
</div>
</template>
</div>
</div>
<div class="details-form-body">
Expand Down Expand Up @@ -384,6 +393,7 @@ export default {
additionalDetailComponents: [],
clickAndCollectComponents: [],
isCreditComponentVisible: false,
placeholderExpress: window.bluefinchCheckout?.placeholderExpress,
};
},
watch: {
Expand Down Expand Up @@ -418,7 +428,12 @@ export default {
'isUsingSavedShippingAddress',
]),
...mapState(useShippingMethodsStore, ['isClickAndCollect']),
...mapState(usePaymentStore, ['errorMessage', 'isExpressPaymentsVisible', 'isPaymentMethodAvailable']),
...mapState(usePaymentStore, [
'errorMessage',
'placeholderExpressMethods',
'isExpressPaymentsVisible',
'isPaymentMethodAvailable',
]),
...mapState(useValidationStore, ['errors', 'isAddressValid']),
...mapState(useBraintreeStore, ['paypal']),
selectedAddressType() {
Expand Down
4 changes: 2 additions & 2 deletions ...b/js/checkout/src/components/Steps/CustomerInfoPage/DividerComponent/DividerComponent.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="divider">
<div class="divider-line" />
<TextField
v-if="isExpressPaymentsVisible"
v-if="isExpressPaymentsVisible || placeholderExpressMethods.length"
:text="dividerText"
:data-cy="'instant-checkout-divider-text'"
/>
Expand Down Expand Up @@ -34,7 +34,7 @@ export default {
},
computed: {
...mapState(useConfigStore, ['locale']),
...mapState(usePaymentStore, ['availableMethods', 'isExpressPaymentsVisible']),
...mapState(usePaymentStore, ['availableMethods', 'isExpressPaymentsVisible', 'placeholderExpressMethods']),
},
async mounted() {
if (!this.locale) {
Expand Down
1 change: 1 addition & 0 deletions view/frontend/web/js/checkout/src/components/Steps/PaymentPage/Braintree/PayPal/PayPal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,7 @@ export default {
shape: this.paypal.buttonShape,
color: this.paypal.buttonColor,
tagline: false,
height: 45,
},
fundingSource: this.isCredit ? window[this.namespace].FUNDING.CREDIT : window[this.namespace].FUNDING.PAYPAL,
createOrder: () => paypalInstance.createPayment({
Expand Down
3 changes: 3 additions & 0 deletions view/frontend/web/js/checkout/src/stores/PaymentStores/PaymentStore.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export default defineStore('paymentStore', {
paymentEmitter: mitt(),
availableMethods: getCartPaymentMethods(),
expressMethods: [],
placeholderExpressMethods: window.bluefinchCheckout?.placeholderExpressMethods || [],
hasVaultedMethods: false,
firstOpenController: 'braintree',
selectedMethod: null,
Expand Down Expand Up @@ -70,6 +71,8 @@ export default defineStore('paymentStore', {
addExpressMethod(method) {
this.setData({
expressMethods: this.$state.expressMethods.concat([method]),
placeholderExpressMethods: this.$state.placeholderExpressMethods
.filter((placeholderMethod) => method !== placeholderMethod),
});
},

Expand Down