Skip to content

Commit

Permalink
Merge pull request #2334 from spryker/feature/cc-31739-update-service…
Browse files Browse the repository at this point in the history 
…-point-and-shipment-type-fe-integrations

CC-31739 Update FE parts of Service Point and Shipment Type integrations
  • Loading branch information
@andriitserkovnyi
andriitserkovnyi committed Dec 4, 2023
2 parents b0d8aff + a4a316c commit 2f0e77f
Show file tree
Hide file tree
Showing 2 changed files with 130 additions and 84 deletions.
59 changes: 31 additions & 28 deletions ...ures/202311.0/install-the-service-points-customer-account-management-feature.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,11 @@ Adjust TWIG templates to display the service point selector:
```twig
{% raw %}{% block globalComponents %}
....
{% include molecule('main-overlay') only %}
{% include molecule('main-overlay') with {
attributes: {
'is-open': data.isOverlayOpen,
},
} only %}
{% endblock %}{% endraw %}
```

Expand All @@ -206,38 +210,37 @@ If the `cross` icon is already defined in the project, it's not necessary to add

{% endinfo_block %}

3. For `/resources/form/form.twig` of `ShopUi` module, adjust `choice_widget_expanded` and `checkbox_widget` blocks:
3. In `tsconfig.yves.json` of the `ShopUi` module, adjust the `paths` section:

```json
{
"compilerOptions": {
"paths": {
...
"ServicePointWidget/*": [
"./vendor/spryker-shop/service-point-widget/src/SprykerShop/Yves/ServicePointWidget/Theme/default/*"
]
}
}
}
```

4. To the `address` view of the `CheckoutPage` module, add `ClickAndCollectServicePointAddressFormWidget`:

```twig
{% raw %}{% block choice_widget_expanded -%}
...
{{- form_widget(child, {
parent_label_class: label_attr.class|default(''),
choices_attr: choices_attr | default({}),
}) -}}
...
{%- endblock choice_widget_expanded %}
{%- block checkbox_widget -%}
...
{%- set inputClass = attr.class | default ~ ' ' ~ choices_attr.class | default -%}
{% define attributes = {
id: id,
name: full_name,
checked: checked | default(false),
required: required | default(false),
disabled: disabled ?: attr.disabled | default(false),
value: value | default(),
} %}
...
{%- endblock -%}{% endraw %}
{% raw %}{% widget 'ClickAndCollectServicePointAddressFormWidget' args [data.form] only %}{% endwidget %}{% endraw %}
```

4. To the `addres` view of the `CheckoutPage` module, add `ClickAndCollectServicePointAddressFormWidget`:
{% info_block infoBox "Adding of ClickAndCollectServicePointAddressFormWidget is automated" %}

If you are using `ShipmentTypeAddressFormWidget`, `ClickAndCollectServicePointAddressFormWidget` is added automatically.

{% endinfo_block %}

5. Optional: For a multi-shipment, to the `address-item-form-field-list` molecule of the `CheckoutPage` module, add `ClickAndCollectServicePointAddressFormWidget`:

```twig
{% raw %}{% widget 'ClickAndCollectServicePointAddressFormWidget' args [data.checkoutAddressForm] only %}{% endwidget %}{% endraw %}
{% raw %}{% widget 'ClickAndCollectServicePointAddressFormWidget' args [item] only %}{% endwidget %}{% endraw %}
```

{% info_block infoBox "Adding of ClickAndCollectServicePointAddressFormWidget is automated" %}
Expand All @@ -246,7 +249,7 @@ If using the `ShipmentTypeAddressFormWidget` widget, the `ClickAndCollectService

{% endinfo_block %}

5. Build assets:
6. Build assets:

```bash
console frontend:yves:build
Expand Down
155 changes: 99 additions & 56 deletions ...l-features/202311.0/install-the-shipment-customer-account-management-feature.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,9 @@

This document describes how to install the [Shipment](/docs/pbc/all/carrier-management/{{page.version}}/base-shop/shipment-feature-overview.html) + [Customer Account Management](/docs/pbc/all/customer-relationship-management/{{page.version}}/base-shop/customer-account-management-feature-overview/customer-account-management-feature-overview.html) feature.

## Install feature core
## Prerequisites

Follow the steps below to install the Shipment + Customer Account Management feature.

### Prerequisites

To start feature integration, integrate the required features:
Install the required features:

| NAME | VERSION | INSTALLATION GUIDE |
|-----------------------------|------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
Expand Down Expand Up @@ -37,7 +33,7 @@ console data:import glossary

{% info_block warningBox "Verification" %}

Make sure that the configured data is added to the `spy_glossary_key` and `spy_glossary_translation` tables in the database.
Make sure the configured data has been added to the `spy_glossary_key` and `spy_glossary_translation` tables.

{% endinfo_block %}

Expand All @@ -47,9 +43,9 @@ Enable the following plugins:

| PLUGIN | SPECIFICATION | PREREQUISITES | NAMESPACE |
|--------------------------------------------------------------|---------------------------------------------------------------------------|---------------|------------------------------------------------------------|
| ShipmentTypeCheckoutAddressCollectionFormExpanderPlugin | Expands the checkout address form with the `ShipmentType` subform. | None | SprykerShop\Yves\ShipmentTypeWidget\Plugin\CustomerPage |
| ShipmentTypeCheckoutMultiShippingAddressesFormExpanderPlugin | Expands the checkout multi-shipping address form `ShipmentType`. | None | SprykerShop\Yves\ShipmentTypeWidget\Plugin\CustomerPage |
| ShipmentTypeAddressFormWidgetCacheKeyGeneratorStrategyPlugin | Skips caching of the `ShipmentTypeAddressFormWidget` widget. | None | SprykerShop\Yves\ShipmentTypeWidget\Plugin\ShopApplication |
| ShipmentTypeCheckoutAddressCollectionFormExpanderPlugin | Expands the checkout address form with the `ShipmentType` subform. | | SprykerShop\Yves\ShipmentTypeWidget\Plugin\CustomerPage |
| ShipmentTypeCheckoutMultiShippingAddressesFormExpanderPlugin | Expands the checkout multi-shipping address form `ShipmentType`. | | SprykerShop\Yves\ShipmentTypeWidget\Plugin\CustomerPage |
| ShipmentTypeAddressFormWidgetCacheKeyGeneratorStrategyPlugin | Skips caching of the `ShipmentTypeAddressFormWidget` widget. | | SprykerShop\Yves\ShipmentTypeWidget\Plugin\ShopApplication |

**src/Pyz/Yves/CustomerPage/CustomerPageDependencyProvider.php**

Expand Down Expand Up @@ -116,7 +112,7 @@ Register the following plugins to enable widgets:

| PLUGIN | SPECIFICATION | PREREQUISITES | NAMESPACE |
|-------------------------------|---------------------------------------------------------------|---------------|--------------------------------------------|
| ShipmentTypeAddressFormWidget | Enables shipment type selection during the checkout address step. | None | SprykerShop\Yves\ShipmentTypeWidget\Widget |
| ShipmentTypeAddressFormWidget | Enables shipment type selection at the checkout address step. | | SprykerShop\Yves\ShipmentTypeWidget\Widget |

**src/Pyz/Yves/ShopApplication/ShopApplicationDependencyProvider.php**

Expand All @@ -142,17 +138,47 @@ class ShopApplicationDependencyProvider extends SprykerShopApplicationDependency
}
```

## 4) Set up the FE part
## 4) Set up the frontend

Adjust TWIG templates to display the shipment types:

1. For a single shipment, to the `address` view of the `CheckoutPage` module, add `ShipmentTypeAddressFormWidget`:
1. In `/resources/form/form.twig` of the `ShopUi` module, adjust `choice_widget_expanded` and `checkbox_widget` blocks:

```twig
{% raw %}{% block choice_widget_expanded -%}
...
{{- form_widget(child, {
parent_label_class: label_attr.class | default,
choices_attr: choices_attr | default({}),
}) -}}
...
{%- endblock choice_widget_expanded %}
{%- block checkbox_widget -%}
...
{%- set inputClass = attr.class | default ~ ' ' ~ choices_attr.class | default -%}
{% define attributes = {
...
disabled: disabled ?: attr.disabled | default(false),
...
} %}
{%- set modifiers = modifiers | merge([attributes.additionalModifier], choices_attr.modifiers | default([])) -%}
...
{%- endblock -%}{% endraw %}
```

2. For a single shipment, to the `address` view of the `CheckoutPage` module, add `ShipmentTypeAddressFormWidget`:

```twig
{% raw %}{% widget 'ShipmentTypeAddressFormWidget' args [data.form] with {
data: {
deliveryContainerClassName: deliveryContainerClassName,
billingSameAsShippingContainerClassName: embed.jsAddressClass ~ '__wrapper-billingSameAsShipping',
billingSameAsShippingContainerClassName: billingSameAsShippingContainerClassName,
shipmentTypesClassName: validatorTriggerClassName,
servicePointClassName: shippingValidationContainerClassName,
deliverySelectClassName: deliverySelectClassName,
},
} only %}
{% endwidget %}{% endraw %}
Expand All @@ -161,13 +187,15 @@ Adjust TWIG templates to display the shipment types:
{% info_block infoBox "Attribute description" %}

* `deliveryContainerClassName`: class name of the container delivery form and address selector.
* `embed.jsAddressClass ~ '__wrapper-billingSameAsShipping'`: container class name for the **Billing same as shipping** checkbox.
* `billingSameAsShippingContainerClassName`: container class name for the **Billing same as shipping** checkbox.
* `validatorTriggerClassName`: trigger class name for the `validate-next-checkout-step` molecule.
* `shippingValidationContainerClassName`: container class name for the shipping validation.
* `deliverySelectClassName`: class name of the address selector.

{% endinfo_block %}

2. (Optional) For a multi-shipment, follow these steps:
1. Add the `ShipmentTypeAddressFormWidget` widget, as described in step 1 (for the single shipment).
2. To the `address` view of the `CheckoutPage` module, add the `multiple-shipment-toggler` molecule:
2. Optional: For a multi-shipment, adjust the `CheckoutPage` module by following these steps:
1. To the `address` view, add the `multiple-shipment-toggler` molecule:

```twig
{% raw %}{% include molecule('multiple-shipment-toggler', 'CheckoutPage') with {
Expand All @@ -181,41 +209,56 @@ Adjust TWIG templates to display the shipment types:
} only %}{% endraw %}
```

{% info_block infoBox "Attribute description" %}

* `isMultipleShipmentSelected`: flag that indicates if the multiple shipment is selected.
* `singleDeliveryContainerClassName`: class name of the container address selector and the `ShipmentTypeAddressFormWidget`.
* `deliverySelectClassName`: class name of the address selector.

{% endinfo_block %}

3. To the `address-item-form-field-list` molecule of the `CheckoutPage` module, add `ShipmentTypeAddressFormWidget`:

```twig
{% raw %}{% widget 'ShipmentTypeAddressFormWidget' args [item] with {
data: {
deliveryContainerClassName: deliveryContainerClassName,
shipmentTypesClassName: data.validatorTriggerClassName,
servicePointClassName: data.itemShippingClassName,
},
} only %}{% endwidget %}{% endraw %}
```

4. In the `CheckoutPage` module, adjust the `address-item-form` molecule by adding the `extra-triggers-class-name` attribute property for the `validate-next-checkout-step` molecule to validate `pickup` shipment type:

```twig
{% raw %}{% include molecule('validate-next-checkout-step', 'CheckoutPage') with {
class: validatorClassName,
attributes: {
'container-selector': '.' ~ itemShippingClassName,
'target-selector': '.' ~ data.jsAddressClass ~ '__form-submit',
'dropdown-trigger-selector': '.' ~ addressSelectClassName ~ ':not(.' ~ data.hiddenClassName ~ ')',
'extra-triggers-class-name': validatorTriggerClassName,
'parent-target-class-name': config.jsName ~ '__items',
'is-enable': false,
},
} only %}{% endraw %}
```
{% info_block infoBox "Attribute description" %}

* `isMultipleShipmentSelected`: flag that indicates if the multiple shipment is selected.
* `singleDeliveryContainerClassName`: class name of the container address selector and the `ShipmentTypeAddressFormWidget`.
* `deliverySelectClassName`: class name of the address selector.

{% endinfo_block %}

2. To the `address-item-form-field-list` molecule of the `CheckoutPage` module, add `ShipmentTypeAddressFormWidget`:

```twig
{% raw %}{% widget 'ShipmentTypeAddressFormWidget' args [item] with {
data: {
deliveryContainerClassName: deliveryContainerClassName,
shipmentTypesClassName: data.validatorTriggerClassName,
servicePointClassName: data.itemShippingClassName,
},
} only %}{% endwidget %}{% endraw %}
```

3. Move the `is-next-checkout-step-enabled` and `validate-next-checkout-step` molecules from the `address-item-form-field-list` molecule to the `address` view. Put them before the `address-form-toggler` molecule.

4. To validate the `pickup` shipment type, adjust the `address` view by adding the `extra-target-selector` attribute property for the `is-next-checkout-step-enabled` molecule:

```twig
{% raw %}{% include molecule('is-next-checkout-step-enabled', 'CheckoutPage') with {
attributes: {
'trigger-selector': '.' ~ deliverySelectClassName,
'target-selector': '.' ~ multishipmentValidatorClassName,
'extra-target-selector': '.' ~ validatorClassName,
},
} only %}{% endraw %}
```

5. To validate the `pickup` shipment type, adjust the `address` view by adding the `extra-container-selector` and `extra-triggers-class-name` attribute properties for the `validate-next-checkout-step` molecule :

```twig
{% raw %}{% include molecule('validate-next-checkout-step', 'CheckoutPage') with {
class: validatorClassName,
attributes: {
'container-selector': '.' ~ shippingValidationContainerClassName,
'extra-container-selector': '.' ~ deliveryContainerClassName,
'target-selector': '.' ~ embed.formSubmitClassName,
'dropdown-trigger-selector': '.' ~ deliverySelectClassName ~ ':not(.' ~ hiddenClassName ~ ')',
'extra-triggers-class-name': validatorTriggerClassName,
'parent-target-class-name': singleDeliveryContainerClassName,
'is-enable': false,
},
} only %}{% endraw %}
```

3. Build assets:

Expand All @@ -225,10 +268,10 @@ console frontend:yves:build

{% info_block warningBox "Verification" %}

Make sure the following widgets were registered:
Make sure the following widget has been registered:

| MODULE | TEST |
| MODULE | VERIFICATION |
|--------------------------------|---------------------------------------------------------------------------------|
| ShipmentTypeAddressFormWidget | Go to **Address Checkout Step** and make sure that you can select shipment type. |
| ShipmentTypeAddressFormWidget | Go to **Address Checkout Step** and make sure that you can select a shipment type. |

{% endinfo_block %}

0 comments on commit 2f0e77f

Please sign in to comment.