Billing Address Modal¶
The <billing-address-modal> webcomponent is used to render a modal containing a billing address of a customer.
Attributes¶
| Attribute name | Type | Default | Description |
|---|---|---|---|
address |
Address | null | The address of a user that should be used to fill the default values of a form inside the modal |
isLoggedIn |
boolean | false | If a user is logged in this prop should be set to true |
API¶
API of a <billing-address-modal> is basically the same as this of a h-modal webcomponent. The only difference is that the open method of this webcomponent dispatches the billingAddressModal.opened event with the Event Bus.
open(): void¶
Opens modal and dispatches the billingAddressModal.opened event.
const billingAddressModal = document.querySelector('billing-address-modal');
billingAddressModal.open();
Event Bus events¶
This webcomponent emits the following events with the Event Bus:
Example¶
<billing-address-modal>
<h-modal hidden>
<h-portal hidden disabled to="modals">
<div class="modal-wrapper">
<div tabindex="0"></div>
<div class="modal" role="dialog">
<div class="modal__container">
<h-modal-header class="modal__header">
<b class="font_semibold">Dane do zamówienia</b>
<h-modal-close class="btn btn_icon" tabindex="0" role="button">
<h-icon icon-name="icon-x" role="button" size="xl" clickable>
<svg class="icon icon_xl icon_clickable">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-x"></use>
</svg>
</h-icon>
</h-modal-close>
</h-modal-header>
<h-modal-body class="modal__body">
<billing-address-form>
<reactive-form>
<form id="form-a42a8a7c-a82f-4ba5-b844-a1c2aae5093c" novalidate>
<control-connector requiredingroup class="control control_row">
<h-control-content class="control__content_auto control__content">
<h-control-element class="control__element">
<h-radio controlid="firstname1" controlname="isCompany" value="false" class="radio">
<h-radio-control class="radio__control">
<input type="radio" class="radio__input" id="firstname1" name="isCompany" value="false">
<label class="radio__label" for="firstname1"></label>
</h-radio-control>
<h-radio-content class="radio__content">
<label class="label" for="firstname1"><span>Konsument</span></label>
</h-radio-content>
</h-radio>
</h-control-element>
<control-errors></control-errors>
</h-control-content>
<h-control-content class="control__content_auto control__content">
<h-control-element class="control__element">
<h-radio controlid="firstname2" controlname="isCompany" value="true" class="radio">
<h-radio-control class="radio__control">
<input type="radio" class="radio__input" id="firstname2" name="isCompany" value="true">
<label class="radio__label" for="firstname2"></label>
</h-radio-control>
<h-radio-content class="radio__content">
<label class="label" for="firstname2"><span>Firma</span></label>
</h-radio-content>
</h-radio>
</h-control-element>
<control-errors></control-errors>
</h-control-content>
</control-connector>
<control-connector min="3" email class="control">
<h-control class="control">
<h-control-label class="control__label">
<label class="label label_required" for="email-67639d5b-c3cf-45cd-8465-8f20f8014439">Adres e-mail</label>
</h-control-label>
<h-control-content class="control control__content">
<h-control-element class="control__element">
<h-input controlname="email" controlid="email-67639d5b-c3cf-45cd-8465-8f20f8014439" class="input">
<h-input-control class="input__control">
<input id="email-67639d5b-c3cf-45cd-8465-8f20f8014439" name="email" type="text">
</h-input-control>
</h-input>
</h-control-element>
<control-errors></control-errors>
</h-control-content>
</h-control>
</control-connector>
<control-connector required class="control">
<h-control class="control">
<h-control-label class="control__label">
<label class="label label_required" for="first-name-e42b0e11-8380-40ab-a2c0-942c8b5335f7">Imię</label>
</h-control-label>
<h-control-content class="control control__content">
<h-control-element class="control__element">
<h-input controlname="firstname" controlid="first-name-e42b0e11-8380-40ab-a2c0-942c8b5335f7" class="input">
<h-input-control class="input__control">
<input id="first-name-e42b0e11-8380-40ab-a2c0-942c8b5335f7" name="firstname" type="text">
</h-input-control>
</h-input>
</h-control-element>
<control-errors></control-errors>
</h-control-content>
</h-control>
</control-connector>
<control-connector required class="control">
<h-control class="control">
<h-control-label class="control__label">
<label class="label label_required" for="last-name-12e6bfaf-360d-4c91-84ca-168d2d4c7def">Nazwisko</label>
</h-control-label>
<h-control-content class="control control__content">
<h-control-element class="control__element">
<h-input controlname="lastname" controlid="last-name-12e6bfaf-360d-4c91-84ca-168d2d4c7def" class="input">
<h-input-control class="input__control">
<input id="last-name-12e6bfaf-360d-4c91-84ca-168d2d4c7def" name="lastname" type="text">
</h-input-control>
</h-input>
</h-control-element>
<control-errors></control-errors>
</h-control-content>
</h-control>
</control-connector>
<control-connector required class="control">
<h-control class="control">
<h-control-label class="control__label">
<label class="label label_required" for="phone-cea72e38-955d-4fdf-a97e-11c3570c35d0">Numer telefonu</label>
</h-control-label>
<h-control-content class="control control__content">
<h-control-element class="control__element">
<h-input controlname="phone" controlid="phone-cea72e38-955d-4fdf-a97e-11c3570c35d0" class="input">
<h-input-control type="tel" class="input__control">
<input id="phone-cea72e38-955d-4fdf-a97e-11c3570c35d0" name="phone" type="text">
</h-input-control>
</h-input>
</h-control-element>
<control-errors></control-errors>
</h-control-content>
</h-control>
</control-connector>
<control-connector required class="control">
<h-control class="control">
<h-control-label class="control__label">
<label class="label label_required" for="country-70c16654-cbf7-4284-bc1d-95c3b2ad7aa3">Kraj</label>
</h-control-label>
<h-control-content class="control control__content">
<h-control-element class="control__element control__element_half">
<h-select class="select select_with-search" control-name="countryId" control-id="country-70c16654-cbf7-4284-bc1d-95c3b2ad7aa3">
<h-dropdown content-width="full" name="countryId" offset="2" direction="bottom-center">
<h-dropdown-toggler class="dropdown__toggler" name="countryId" tabindex="0" role="button" aria-expanded="false">
<h-select-toggler class="select-toggler select-toggler_selected" role="textbox" slot="toggler">
<ul class="select-toggler__values">
<li>Polska</li>
</ul>
<h-icon icon-name="icon-chevron-down">
<svg class="icon">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-chevron-down"></use>
</svg>
</h-icon>
</h-select-toggler>
</h-dropdown-toggler>
<h-portal hidden disabled to="dropdown-portal">
<h-dropdown-content class="select__content dropdown__content" name="countryId" role="menu">
<h-select-close-btn class="select__close-mobile-btn" role="menuitem" aria-label="close select" tabindex="0">
<h-icon icon-name="icon-x" size="l">
<svg class="icon icon_l">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-x"></use>
</svg>
</h-icon>
</h-select-close-btn>
<div class="select__label" role="menuitem">
<span class="select-toggler__placeholder">Wybierz</span>
</div>
<h-select-search class="select__search select-search" role="menuitem" value="">
<h-icon icon-name="icon-search" class="select-search__icon">
<svg class="icon">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-search"></use>
</svg>
</h-icon>
<input type="text" role="search" aria-autocomplete="list" autocomplete="false" placeholder="Szukaj" class="select-search__input">
</h-select-search>
<h-options role="menuitem" tabindex="0" class="select__options">
<h-option value="1" tabindex="-1" role="option" class="select-option">
<h-option-content class="select-option__content">Andora</h-option-content>
</h-option>
<h-option value="2" tabindex="-1" role="option" class="select-option">
<h-option-content class="select-option__content">Zjednoczone Emiraty Arabskie</h-option-content>
</h-option>
<h-option value="3" tabindex="-1" role="option" class="select-option">
<h-option-content class="select-option__content">Afganistan</h-option-content>
</h-option>
<h-option value="4" tabindex="-1" role="option" class="select-option">
<h-option-content class="select-option__content">Antigua i Barbuda</h-option-content>
</h-option>
<h-option value="5" tabindex="-1" role="option" class="select-option">
<h-option-content class="select-option__content">Anguilla</h-option-content>
</h-option>
<h-option value="6" tabindex="-1" role="option" class="select-option">
<h-option-content class="select-option__content">Albania</h-option-content>
</h-option>
<h-option value="7" tabindex="-1" role="option" class="select-option">
<h-option-content class="select-option__content">Armenia</h-option-content>
</h-option>
<h-option value="8" tabindex="-1" role="option" class="select-option">
<h-option-content class="select-option__content">Angola</h-option-content>
</h-option>
<h-option value="249" tabindex="-1" role="option" class="select-option">
<h-option-content class="select-option__content">Zimbabwe</h-option-content>
</h-option>
<h-option value="250" tabindex="-1" role="option" class="select-option">
<h-option-content class="select-option__content">Northern Ireland</h-option-content>
</h-option>
</h-options>
<div role="menuitem"></div>
</h-dropdown-content>
</h-portal>
</h-dropdown>
<input type="hidden" name="countryId" value="179">
</h-select>
</h-control-element>
<control-errors></control-errors>
</h-control-content>
</h-control>
</control-connector>
<control-connector required class="control">
<h-control class="control">
<h-control-label class="control__label">
<label class="label label_required" for="street-2d5a469e-3d8c-4956-8dd4-c340b4cc6f5f">Ulica, numer budynku i lokalu</label>
</h-control-label>
<h-control-content class="control control__content">
<h-control-element class="control__element">
<h-input controlname="street" controlid="street-2d5a469e-3d8c-4956-8dd4-c340b4cc6f5f" class="input">
<h-input-control class="input__control">
<input id="street-2d5a469e-3d8c-4956-8dd4-c340b4cc6f5f" name="street" type="text">
</h-input-control>
</h-input>
</h-control-element>
<control-errors></control-errors>
</h-control-content>
</h-control>
</control-connector>
<control-connector required class="control">
<h-control class="control">
<h-control-label class="control__label">
<label class="label label_required" for="postal-code-582c581d-8366-4dfd-bc57-f88b7f374437">Kod pocztowy</label>
</h-control-label>
<h-control-content class="control control__content">
<h-control-element class="control__element control__element_quarter">
<h-input controlname="postalCode" controlid="postal-code-582c581d-8366-4dfd-bc57-f88b7f374437" class="input">
<h-input-control mask="__-___" pattern="^(\d{2})(-)(\d{3})$" valid-pattern="00-000" class="input__control">
<input id="postal-code-582c581d-8366-4dfd-bc57-f88b7f374437" name="postalCode" type="text">
</h-input-control>
</h-input>
</h-control-element>
<control-errors></control-errors>
</h-control-content>
</h-control>
</control-connector>
<control-connector required class="control">
<h-control class="control">
<h-control-label class="control__label">
<label class="label label_required" for="city-33ab31c5-250d-45ba-a592-ba0f1001cef9">Miasto</label>
</h-control-label>
<h-control-content class="control control__content">
<h-control-element class="control__element">
<h-input controlname="city" controlid="city-33ab31c5-250d-45ba-a592-ba0f1001cef9" class="input">
<h-input-control class="input__control">
<input id="city-33ab31c5-250d-45ba-a592-ba0f1001cef9" name="city" type="text">
</h-input-control>
</h-input>
</h-control-element>
<control-errors></control-errors>
</h-control-content>
</h-control>
</control-connector>
<control-connector class="control">
<h-control class="control">
<h-control-content class="control control__content">
<h-control-element class="control__element">
<h-checkbox controlname="createUserAccount" value="1" controlid="create-user-account-6a4e58cf-fed4-4ac5-b58c-d3b7571dfcc0" class="checkbox">
<h-checkbox-control class="checkbox__control">
<input type="checkbox" class="checkbox__input" id="create-user-account-6a4e58cf-fed4-4ac5-b58c-d3b7571dfcc0" name="createUserAccount" value="1">
<label class="checkbox__label" for="create-user-account-6a4e58cf-fed4-4ac5-b58c-d3b7571dfcc0"></label>
</h-checkbox-control>
<h-checkbox-content class="checkbox__content">
<label class="label" for="create-user-account-6a4e58cf-fed4-4ac5-b58c-d3b7571dfcc0"><span>Chcę założyć konto w sklepie</span></label>
<div class="checkbox__description">
<p>
Opcjonalne<br>
Otrzymasz link do tworzenia hasła na e-mail. Zakładając konto, akceptujesz regulamin sklepu.
</p>
</div>
</h-checkbox-content>
</h-checkbox>
</h-control-element>
<control-errors></control-errors>
</h-control-content>
</h-control>
</control-connector>
</form>
</reactive-form>
</billing-address-form>
</h-modal-body>
<h-modal-footer class="modal__footer">
<button class="btn btn_secondary">
Anuluj
</button>
<button class="btn btn_primary">
Zapisz dane
</button>
</h-modal-footer>
</div>
</div>
<div tabindex="0"></div>
</div>
</h-portal>
</h-modal>
</billing-address-modal>