Skip to content

Commit

Permalink
CC-31629 Fixed submit button disabling on the checkout address step. …
Browse files Browse the repository at this point in the history 
…(#2429)

CC-31629 Fixed submit button disabling on the checkout address step.
  • Loading branch information
@danilmoro3
danilmoro3 authored Dec 6, 2023
1 parent f07b111 commit 3e35f3d
Show file tree
Hide file tree
Showing 6 changed files with 106 additions and 50 deletions.
2 changes: 1 addition & 1 deletion composer.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"spryker-shop/customer-page": "^2.46.0",
"spryker-shop/money-widget": "^1.0.0",
"spryker-shop/shop-application": "^1.0.0",
"spryker-shop/shop-ui": "^1.40.0",
"spryker-shop/shop-ui": "^1.73.1",
"spryker/application": "^3.8.0",
"spryker/calculation": "^4.2.0",
"spryker/cart": "^4.3.0 || ^5.0.0 || ^7.0.0",
Expand Down
13 changes: 9 additions & 4 deletions .../CheckoutPage/Theme/default/components/molecules/address-item-form/address-item-form.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,24 @@
name: 'address-item-form',
} %}

{# @deprecated property "jsAddressClass" is deprecated. #}
{% define data = {
form: required,
formBundle: null,
shippingForm: required,
jsAddressClass: '',
hiddenClassName: 'is-hidden',
validatorClassName: '',
formSubmitClassName: '',
addressSelectClassName: '',
addressFormClassName: '',
addressFormContainerClassName: '',
} %}

{% set addressSelectClassName = 'js-' ~ config.name ~ '__address-select' %}
{% set validatorTriggerClassName = 'js-' ~ config.name ~ '__validator-trigger' %}
{% set itemShippingClassName = 'js-' ~ config.name ~ '__item-shipping' %}
{% set itemDeliveryValidationClassName = 'js-' ~ config.name ~ '__item-delivery-validation' %}
{% set addressSelectClassName = data.addressSelectClassName ?: 'js-' ~ config.name ~ '__address-select' %}
{% set itemShippingClassName = data.addressFormClassName ?: 'js-' ~ config.name ~ '__item-shipping' %}
{% set itemDeliveryValidationClassName = data.addressFormContainerClassName ?: 'js-' ~ config.name ~ '__item-delivery-validation' %}

{% block body %}
{% if is_granted('ROLE_USER') %}
Expand Down Expand Up @@ -98,7 +103,7 @@
attributes: {
'container-selector': '.' ~ itemShippingClassName,
'extra-container-selector': '.' ~ itemDeliveryValidationClassName,
'target-selector': '.' ~ data.jsAddressClass ~ '__form-submit',
'target-selector': '.' ~ data.formSubmitClassName ?: '.' ~ data.jsAddressClass ~ '__form-submit',
'dropdown-trigger-selector': '.' ~ addressSelectClassName ~ ':not(.' ~ data.hiddenClassName ~ ')',
'extra-triggers-class-name': validatorTriggerClassName,
'parent-target-class-name': config.jsName ~ '__items',
Expand Down
33 changes: 32 additions & 1 deletion ...fault/components/molecules/is-next-checkout-step-enabled/is-next-checkout-step-enabled.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import ValidateNextCheckoutStep, { EVENT_INIT } from '../validate-next-checkout-

export default class IsNextCheckoutStepEnabled extends Component {
protected trigger: HTMLSelectElement;
protected extraTriggers: HTMLInputElement[];
protected target: ValidateNextCheckoutStep;
protected extraTarget: ValidateNextCheckoutStep;

Expand All @@ -13,6 +14,12 @@ export default class IsNextCheckoutStepEnabled extends Component {
this.trigger = <HTMLSelectElement>document.querySelector(this.triggerSelector);
}

if (this.extraTriggersClassName) {
this.extraTriggers = <HTMLInputElement[]>(
Array.from(document.getElementsByClassName(this.extraTriggersClassName))
);
}

this.target = <ValidateNextCheckoutStep>document.querySelector(this.targetSelector);

if (this.extraTargetSelector) {
Expand All @@ -25,8 +32,28 @@ export default class IsNextCheckoutStepEnabled extends Component {
}

protected mapEvents(): void {
const target = this.extraTarget ? this.extraTarget : this.target;
this.mapTriggerChangeEvent();
this.mapExtraTriggersToggleEvent();
this.mapTargetInitEvent();
}

protected mapTriggerChangeEvent(): void {
this.trigger.addEventListener('change', () => this.onTriggerChange());
}

protected mapExtraTriggersToggleEvent(): void {
if (!this.extraTriggers) {
return;
}

this.extraTriggers.forEach((extraTrigger: HTMLInputElement) => {
extraTrigger.addEventListener('toggle', () => this.onTriggerChange());
});
}

protected mapTargetInitEvent(): void {
const target = this.extraTarget ? this.extraTarget : this.target;

target.addEventListener(EVENT_INIT, () => this.initTriggerState());
}

Expand Down Expand Up @@ -69,6 +96,10 @@ export default class IsNextCheckoutStepEnabled extends Component {
return this.getAttribute('trigger-selector');
}

protected get extraTriggersClassName(): string {
return this.getAttribute('extra-triggers-class-name');
}

/**
* Gets a querySelector name of the target element.
*/
Expand Down
1 change: 1 addition & 0 deletions ...ult/components/molecules/is-next-checkout-step-enabled/is-next-checkout-step-enabled.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@

{% define attributes = {
'trigger-selector': required,
'extra-triggers-class-name': '',
'target-selector': required,
'toggle-option-value': '-1',
'extra-target-selector': '',
Expand Down
4 changes: 2 additions & 2 deletions ...e/default/components/molecules/validate-next-checkout-step/validate-next-checkout-step.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,11 +97,11 @@ export default class ValidateNextCheckoutStep extends Component {
* Init the methods, which fill the collection of form fields and toggle disabling of button.
*/
async initTriggerState(): Promise<void> {
this.containers = <HTMLElement[]>Array.from(document.querySelectorAll(this.containerSelector));
await this.fillExtraTriggersCollection();

this.containers = <HTMLElement[]>Array.from(document.querySelectorAll(this.containerSelector));
this.fillDropdownTriggersCollection();
this.fillFormFieldsCollection();
await this.fillExtraTriggersCollection();
this.toggleDisablingNextStepButton();
this.resetEvents();
this.mapEvents();
Expand Down
103 changes: 61 additions & 42 deletions src/SprykerShop/Yves/CheckoutPage/Theme/default/views/address/address.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,19 +54,26 @@
{% set hasCompanyUnitAddresses = data.form.shippingAddress.id_company_unit_address is defined %}
{% set hasShippingAddressesAndApplicable = embed.isCompanyBusinessUnitShippingAddressApplicable ?: hasShippingAddresses %}
{% set hiddenClassName = 'is-hidden' %}
{% set addressSelectClassName = embed.jsAddressClass ~ '__address-select' %}
{% set addressFormClassName = embed.jsAddressClass ~ '__address-form' %}
{% set addressFormContainerClassName = embed.jsAddressClass ~ '__address-form-container' %}
{% set validatorTriggerClassName = embed.jsAddressClass ~ '__validator-trigger' %}
{% set shippingValidationContainerClassName = embed.jsAddressClass ~ '__shipping-validation-container' %}
{% set shippingClassName = embed.jsAddressClass ~ '__shipping' %}
{% set shippingFormHandlerClassName = embed.jsAddressClass ~ '__form-handler-shippingAddress' %}
{% set multishipmentTargetClassName = embed.jsAddressClass ~ '__items-target' %}
{% set validatorClassName = embed.jsAddressClass ~ '__validate-next-checkout-step' %}
{% set multishipmentValidatorClassName = embed.jsAddressClass ~ '__multishipment-validate-next-checkout-step' %}
{% set billingSameAsShippingContainerClassName = embed.jsAddressClass ~ '__billing-same-as-shipping-container' %}
{% set billingSameAsShippingClassName = embed.jsAddressClass ~ '__billing-same-as-shipping' %}
{% set selectBillingAddressClassName = embed.jsAddressClass ~ '__form-select-billingAddress' %}
{% set billingSelectClassName = embed.jsAddressClass ~ '__form-select-billingAddress' %}
{% set billingClassName = embed.jsAddressClass ~ '__billing' %}
{% set billingFormClassName = embed.jsAddressClass ~ '__billing-form' %}
{% set billingFormHandlerClassName = embed.jsAddressClass ~ '__form-handler-billingAddress' %}
{% set commonSelectsClassName = embed.jsAddressClass ~ '__common-select' %}
{% set commonFormsClassName = embed.jsAddressClass ~ '__common-form' %}
{% set commonFormContainersClassName = embed.jsAddressClass ~ '__common-form-container' %}

<div class="grid col col--sm-12 {{ embed.jsAddressClass }}__form-handler-shippingAddress">
<div class="grid col col--sm-12 {{ shippingFormHandlerClassName }}">
{% set deliveryContainerClassName = embed.jsAddressClass ~ '__delivery' %}

{% if hasShippingAddressesAndApplicable %}
Expand Down Expand Up @@ -110,7 +117,7 @@
deliveryContainerClassName: deliveryContainerClassName,
billingSameAsShippingContainerClassName: billingSameAsShippingContainerClassName,
shipmentTypesClassName: validatorTriggerClassName,
servicePointClassName: shippingValidationContainerClassName,
servicePointClassName: addressFormClassName,
deliverySelectClassName: deliverySelectClassName,
},
} only %}
Expand All @@ -126,10 +133,12 @@
{% if embed.isCompanyBusinessUnitShippingAddressApplicable %}
{% widget embed.companyBusinessUnitShippingAddressWidget with {
data: {
itemShippingTriggerJsClass: deliveryContainerClassName ~ ' ' ~ shipmentTypeHiddenClassName,
itemShippingTriggerJsClass: addressSelectClassName ~ ' ' ~ deliverySelectClassName ~ ' ' ~ deliveryContainerClassName ~ ' ' ~ shipmentTypeHiddenClassName,
isMultipleShipmentEnabled: embed.isMultipleShipmentEnabled,
items: embed.forms.items,
jsAddressClass: embed.jsAddressClass,
addressFormClassName: shippingFormHandlerClassName,
addressSelectClassName: deliverySelectClassName,
},
} only %}
{% endwidget %}
Expand All @@ -147,7 +156,7 @@
label: 'page.checkout.address.delivery.address_select' | trans,
component: molecule('select'),
attr: {
class: deliverySelectClassName,
class: addressSelectClassName ~ ' ' ~ deliverySelectClassName,
},
}) }}
{% endif %}
Expand All @@ -156,9 +165,9 @@
</div>
{% endif %}

<div class="{{ deliveryContainerClassName }} {{ shipmentTypeHiddenClassName }}">
<div class="{{ addressFormContainerClassName }} {{ deliveryContainerClassName }} {{ shipmentTypeHiddenClassName }}">
{% include molecule('form') with {
class: shippingClassName ~ ' ' ~ shippingValidationContainerClassName ~ ' ' ~ (isAddressSelected ? hiddenClassName),
class: shippingClassName ~ ' ' ~ addressFormClassName ~ ' ' ~ (isAddressSelected ? hiddenClassName),
data: {
form: embed.forms.shipping,
enableStart: false,
Expand Down Expand Up @@ -188,6 +197,10 @@
jsAddressClass: embed.jsAddressClass,
hiddenClassName: hiddenClassName,
validatorClassName: multishipmentValidatorClassName,
formSubmitClassName: embed.formSubmitClassName,
addressSelectClassName: commonSelectsClassName,
addressFormClassName: commonFormsClassName,
addressFormContainerClassName: commonFormContainersClassName,
},
} only %}
{% endif %}
Expand All @@ -196,6 +209,7 @@
<div class="form__field {{ billingSameAsShippingClassName }} {{ isMultipleShipmentSelected ? hiddenClassName }}">
{{ form_row(data.form.billingSameAsShipping, {
component: molecule('toggler-checkbox'),
componentClass: embed.jsAddressClass ~ '__sub-form-trigger',
attributes: {
'target-selector': '.' ~ billingClassName,
'class-to-toggle': hiddenClassName,
Expand All @@ -206,9 +220,9 @@
</div>
</div>

<div class="grid col col--sm-12 {{ embed.jsAddressClass }}__form-handler-billingAddress">
<div class="grid col col--sm-12 {{ billingFormHandlerClassName }}">
{% embed molecule('form') with {
class: billingClassName ~ ' form--extend spacing-top spacing-top--big ' ~ (not isMultipleShipmentSelected ? hiddenClassName),
class: addressFormContainerClassName ~ ' ' ~ commonFormContainersClassName ~ ' ' ~ billingClassName ~ ' form--extend spacing-top spacing-top--big ' ~ (not isMultipleShipmentSelected ? hiddenClassName),
data: {
title: 'page.checkout.address.billing-address' | trans,
form: embed.forms.billing,
Expand All @@ -229,7 +243,13 @@
jsAddressClass: embed.jsAddressClass,
hiddenClassName: hiddenClassName,
billingFormClassName: billingFormClassName,
selectBillingAddressClassName: selectBillingAddressClassName,
billingSelectClassName: billingSelectClassName,
billingFormHandlerClassName: billingFormHandlerClassName,
addressSelectClassName: addressSelectClassName,
addressFormClassName: addressFormClassName,
addressFormContainerClassName: addressFormContainerClassName,
commonSelectsClassName: commonSelectsClassName,
commonFormsClassName: commonFormsClassName,
},
} only %}
{% block fields %}
Expand All @@ -247,39 +267,37 @@

{% if hasBillingAddressesAndApplicable %}
<div class="form__field col col--sm-6">
<ul class="list spacing-y">
{% if isCompanyBusinessUnitBillingAddressApplicable %}
{% widget companyBusinessUnitBillingAddressWidget with {
data: {
jsAddressClass: embed.jsAddressClass,
}
} only %}
{% endwidget %}

{% if hasBillingAddresses %}
{% do data.form.id_customer_address.setRendered %}
{% endif %}
{% if isCompanyBusinessUnitBillingAddressApplicable %}
{% widget companyBusinessUnitBillingAddressWidget with {
data: {
itemShippingTriggerJsClass: embed.addressSelectClassName ~ ' ' ~ embed.commonSelectsClassName ~ ' ' ~ embed.billingSelectClassName,
jsAddressClass: embed.jsAddressClass,
addressFormClassName: embed.billingFormHandlerClassName,
addressSelectClassName: embed.billingSelectClassName,
},
} only %}
{% endwidget %}

{% if hasCompanyUnitBillingAddresses %}
{% do data.form.id_company_unit_address.setRendered %}
{% endif %}
{% if hasBillingAddresses %}
{% do data.form.id_customer_address.setRendered %}
{% endif %}

{% else %}
<li class="list__item spacing-y">
{{ form_row(data.form.id_customer_address, {
label: 'page.checkout.address.billing.address_select' | trans,
component: molecule('select'),
attr: {
class: embed.selectBillingAddressClassName,
},
}) }}
</li>
{% if hasCompanyUnitBillingAddresses %}
{% do data.form.id_company_unit_address.setRendered %}
{% endif %}
</ul>
{% else %}
{{ form_row(data.form.id_customer_address, {
label: 'page.checkout.address.billing.address_select' | trans,
component: molecule('select'),
attr: {
class: embed.addressSelectClassName ~ ' ' ~ embed.commonSelectsClassName ~ ' ' ~ embed.billingSelectClassName,
},
}) }}
{% endif %}
</div>
{% endif %}

<div class="{{ embed.billingFormClassName }} {{ isAddressSelected ? embed.hiddenClassName }}">
<div class="{{ embed.billingFormClassName }} {{ embed.addressFormClassName }} {{ embed.commonFormsClassName }} {{ isAddressSelected ? embed.hiddenClassName }}">
{{ parent() }}
</div>
{% endblock %}
Expand All @@ -289,6 +307,7 @@
{% include molecule('is-next-checkout-step-enabled', 'CheckoutPage') with {
attributes: {
'trigger-selector': '.' ~ deliverySelectClassName,
'extra-triggers-class-name': embed.jsAddressClass ~ '__sub-form-trigger',
'target-selector': '.' ~ multishipmentValidatorClassName,
'extra-target-selector': '.' ~ validatorClassName,
},
Expand All @@ -297,10 +316,10 @@
{% include molecule('validate-next-checkout-step', 'CheckoutPage') with {
class: validatorClassName,
attributes: {
'container-selector': '.' ~ shippingValidationContainerClassName,
'extra-container-selector': '.' ~ deliveryContainerClassName,
'container-selector': '.' ~ addressFormClassName,
'extra-container-selector': '.' ~ addressFormContainerClassName,
'target-selector': '.' ~ embed.formSubmitClassName,
'dropdown-trigger-selector': '.' ~ deliverySelectClassName ~ ':not(.' ~ hiddenClassName ~ ')',
'dropdown-trigger-selector': '.' ~ addressSelectClassName ~ ':not(.' ~ hiddenClassName ~ ')',
'extra-triggers-class-name': validatorTriggerClassName,
'parent-target-class-name': singleDeliveryContainerClassName,
'is-enable': false,
Expand All @@ -322,7 +341,7 @@

{% include molecule('address-form-toggler', 'CustomerPage') ignore missing with {
attributes: {
'trigger-selector': '.' ~ selectBillingAddressClassName,
'trigger-selector': '.' ~ billingSelectClassName,
'target-selector': '.' ~ billingFormClassName,
},
} only %}
Expand Down

0 comments on commit 3e35f3d

Please sign in to comment.