ng-easycommerce-v18 0.0.1

package/projects/ng-easycommerce/src/lib/ec-components/checkout-ec/dataform-ec/dataform-ec.component.html

@@ -0,0 +1,836 @@
+@if(channel$ | async; as channelConfig){
+    @if(channelConfig.channelType != 'b2b' || (channelConfig.channelType == 'b2b' && isAuthenticated())){
+        @if( modeSelectAddress == 'LOAD_ADDRESS_AND_SELECTION' && isAuthenticated() && this.addressBook != null){
+            <!--Selector de modos-->
+            <div class="container card p-4 mb-3">
+                <div class="row justify-content-center">
+                    <div class="col-12 col-md-10 col-lg-8 text-center">
+                        <div class="btn-group btn-group-toggle" data-bs-toggle="buttons">
+                            <label [class]="'btn btn-outline-secondary ' + (!getMode() ? 'active' : '')">
+                                <input type="radio" name="options" id="option1" autocomplete="off" checked
+                                    (change)="setMode('seleccion')"> {{'select-address' | translate | titlecase}}
+                            </label>
+                            @if(!getParamByChannelAndLanguage('btn_new_address_')){
+                            <label [class]="'btn btn-outline-secondary ' + (getMode() ? 'active' : '')">
+                                <input type="radio" name="options" id="option2" autocomplete="off" (change)="setMode('carga')">
+                                {{ 'new-address' | translate | titlecase}}
+                            </label>
+                            }
+                            @if(getParamByChannelAndLanguage('btn_new_address_'); as param){
+                            <label [class]="'btn btn-outline-secondary ' + (selectAddress ? 'active' : '')">
+                                <input type="radio" name="options" id="option2" autocomplete="off" (change)="setMode('carga')">
+                                {{ param.value}}
+                            </label>
+                            }
+                        </div>
+                    </div>
+                </div>
+            </div>
+        }
+
+        @if(getMode()){
+            @if(!require_login){
+            <div>
+                @if(modeSelectAddress == 'ONLY_LOAD_ADDRESS'){
+                    <div class="checkout-title  my-2">
+                        <h3>{{'billing-details'|translate}}</h3>
+                    </div>
+                }
+                <!--Formulario-->
+                <form [formGroup]="checkoutForm" (submit)="verifyValidate($event)"> <!-- //this.cartService.items -->
+                    <div class="row mt-2"><!--Fila 1-->
+
+                        @if(getTypeForm().viewForms.firstName.enabled){
+                        <div class="form-group col-12 col-md-6">
+                            <!--Si es required-->
+                            <label class="form-label">{{'first-name'|translate}}
+                                @if(getTypeForm().viewForms.firstName.required){
+                                <span class="required">*</span>
+                                }
+                            </label>
+                            <!--Input-->
+                            <input class="form-control" type="text" name="firstName" formControlName="firstName" value=""
+                                placeholder="" autocomplete="off">
+                            @if(checkoutForm.controls['firstName'].touched &&
+                            checkoutForm.controls['firstName'].errors?.['required']){
+                            <div class="text-danger-container">
+                                <span class="text-danger">{{'first-name-help1'|translate}}</span>
+                            </div>
+                            }
+                            <!--Error info-->
+                            @if(checkoutForm.controls['firstName'].touched &&
+                            checkoutForm.controls['firstName'].errors?.['pattern']){
+                            <div class="text-danger-container">
+                                <span class="text-danger">
+                                    {{'first-name-help2'|translate}}
+                                </span>
+                            </div>
+                            }
+                        </div>
+                        }
+                        @if(getTypeForm().viewForms.lastName.enabled){
+                        <div class="form-group col-12 col-md-6">
+                            <label class="form-label">{{'last-name'|translate}}
+                                @if(getTypeForm().viewForms.lastName.required){
+                                <span class="required">*</span>
+                                }
+                            </label>
+                            <input class="form-control" type="text" name="lastName" formControlName="lastName" value=""
+                                placeholder="" autocomplete="off">
+                            @if(checkoutForm.controls['lastName'].touched &&
+                            checkoutForm.controls['lastName'].errors?.['required']){
+                            <div class="text-danger-container">
+                                <span class="text-danger">{{'last-name-help1'|translate}}</span>
+                            </div>
+                            }
+                            @if(checkoutForm.controls['lastName'].touched && checkoutForm.controls['lastName'].errors?.['pattern']){
+                            <div class="text-danger-container">
+                                <span class="text-danger">{{'last-name-help2'|translate}}</span>
+                            </div>
+                            }
+                        </div>
+                        }
+                    </div>
+                    <div class="row mt-2"><!--Fila 2-->
+                        @if(getTypeForm().viewForms.phoneNumber.enabled){
+                        <div class="form-group col-12 col-md-6">
+                            <label class="form-label">{{'phone'|translate}}
+                                @if(getTypeForm().viewForms.phoneNumber.required){
+                                <span class="required">*</span>
+                                }
+                            </label>
+                            <input (change)="onInputChange()" class="form-control" type="text" name="phoneNumber"
+                                formControlName='phoneNumber' value="" placeholder="" autocomplete="off">
+                            @if(checkoutForm.controls['phoneNumber'].touched &&
+                            checkoutForm.controls['phoneNumber'].errors?.['required']){
+                            <div class="text-danger-container">
+                                <span class="text-danger">
+                                    {{'phone-help1'|translate}}
+                                </span>
+                            </div>
+                            }
+                            @if(checkoutForm.controls['phoneNumber'].touched &&
+                            checkoutForm.controls['phoneNumber'].errors?.['pattern']){
+                            <div class="text-danger-container">
+                                <span class="text-danger">
+                                    {{'phone-help2'|translate}}
+                                </span>
+                            </div>
+                            }
+                        </div>
+                        }
+                        @if(getTypeForm().viewForms.email.enabled){
+                        <div class="form-group col-12 col-md-6">
+                            <label class="form-label">{{'email-address'|translate}}
+                                @if(getTypeForm().viewForms.email.required){
+                                <span class="required">*</span>
+                                }</label>
+                            <input class="form-control" type="email" name="email" formControlName='email' value="" placeholder=""
+                                autocomplete="off">
+                            @if(checkoutForm.controls['email'].touched && checkoutForm.controls['email'].errors?.['required']){
+                            <div class="text-danger-container">
+                                <span class="text-danger">
+                                    {{'email-address-help1'|translate}}
+                                </span>
+                            </div>
+                            }
+                            @if(checkoutForm.controls['email'].touched && checkoutForm.controls['email'].errors?.['email']){
+                            <div class="text-danger-container">
+                                <span class="text-danger">
+                                    {{'email-address-help2'|translate}}
+                                </span>
+                            </div>
+                            }
+                        </div>
+                        }
+                    </div>
+                    <div class="row mt-2"><!--Fila 3-->
+                        @if(getTypeForm().viewForms.countryCode.enabled){
+                        @if(countries$ | async; as countries){
+                        <div class="form-group col-12 col-md-4">
+                            <label class="form-label">{{'country'|translate}}
+                                @if(getTypeForm().viewForms.countryCode.required){
+                                <span class="required">*</span>
+                                }</label>
+                            <select class="form-select" name="countryCode" formControlName='countryCode'
+                                (change)="onCountrySelected($event)">
+                                @for(country of countries; track $index){
+                                <option [value]="country.code">{{ country.name }}</option>
+                                }
+                            </select>
+                            @if(checkoutForm.controls['countryCode'].touched &&
+                            checkoutForm.controls['countryCode'].errors?.['required']){
+                            <div class="text text-danger">
+                                {{'country-help'|translate}}
+                            </div>
+                            }
+                        </div>
+                        }
+                        }
+                        @if(getTypeForm().viewForms.provinceCode.enabled){
+                        @if(provinces$ | async; as provinces){
+                        <div class="form-group col-12 col-md-4">
+                            <label class="form-label">{{'state'|translate}}
+                                @if(getTypeForm().viewForms.provinceCode.required){
+                                <span class="required">*</span>
+                                }</label>
+                            <select class="form-select" name="provinceCode" (change)="onProvincesSelected($event, provinces)"
+                                formControlName='provinceCode'>
+                                @for(province of provinces; track $index){
+                                <option [value]="province.code">{{ province.name }}
+                                </option>
+                                }
+                            </select>
+                            @if(checkoutForm.controls['provinceCode'].touched &&
+                            checkoutForm.controls['provinceCode'].errors?.['required']){
+                            <div class="text text-danger">
+                                {{'state-help'|translate}}
+                            </div>
+                            }
+                        </div>
+                        }
+                        }
+                        @if(getTypeForm().viewForms.city.enabled){
+                        <div class="form-group col-12 col-md-4">
+                            <label class="form-label">{{'town-city'|translate}}
+                                @if(getTypeForm().viewForms.city.required){
+                                <span class="required">*</span>
+                                }</label>
+                            <input (change)="onInputChange()" class="form-control" type="text" name="city" formControlName='city'
+                                value="" placeholder="" autocomplete="off">
+                            @if(checkoutForm.controls['city'].touched && checkoutForm.controls['city'].errors?.['required']){
+                            <div class="text-danger-container">
+                                <span class="text-danger">{{'town-city-help'|translate}}</span>
+                            </div>
+                            }
+                        </div>
+                        }
+                    </div>
+                    <div class="row mt-df"><!--Fila 4-->
+                        @if(getTypeForm().viewForms.street.enabled){
+                        <div class="form-group col-12 col-md-8">
+                            <label class="field-label">{{'address'|translate}}
+                                @if(getTypeForm().viewForms.street.required){
+                                <span class="required">*</span>
+                                }
+                            </label>
+                            <input (change)="onInputChange()" class="form-control" type="text" name="street"
+                                formControlName='street' value="" placeholder="" autocomplete="off">
+                            @if(checkoutForm.controls['street'].touched && checkoutForm.controls['street'].errors?.['required']){
+                            <div class="text-danger-container">
+                                <span class="text-danger">{{'address-help1'|translate}}</span>
+                            </div>
+                            }
+                            @if(checkoutForm.controls['street'].touched && checkoutForm.controls['street'].errors?.['maxlength']){
+                            <div class="text-danger-container">
+                                <span class="text-danger">{{'address-help2'|translate}}</span>
+                            </div>
+                            }
+                        </div>
+                        }
+
+                        <!-- form dirección -->
+                        @if(getTypeForm().viewForms.postcode.enabled){
+                        <div class="form-group col-12 col-md-4">
+                            <label class="field-label">{{'postal-code'|translate}}
+                                @if(getTypeForm().viewForms.postcode.required){
+                                <span class="required">*</span>
+                                }</label>
+                            <input (change)="onInputChange()" class="form-control" type="text" name="postcode"
+                                formControlName='postcode' value="" placeholder="" autocomplete="off">
+                            @if(checkoutForm.controls['postcode'].touched &&
+                            checkoutForm.controls['postcode'].errors?.['required']){
+                            <div class="text-danger-container">
+                                <span class="text-danger">{{'postal-code-help'|translate}}</span>
+                            </div>
+                            }
+                            @if(checkoutForm.controls['postcode'].touched && checkoutForm.controls['postcode'].errors?.['pattern']){
+                            <div class="text-danger-container">
+                                <span class="text-danger"> {{'postal-code-pattern-error' | translate}} </span>
+                            </div>
+                            }
+                        </div>
+                        }
+                    </div>
+                    <div class="row mt-df"><!--Fila 5-->
+                        @if(getTypeForm().viewForms.documentType.enabled){
+                        @if(documentTypes$ | async; as documentTypes){
+                        <div class="form-group col-12 col-md-4">
+                            <label class="field-label">{{'document-type'|translate}}
+                                @if(getTypeForm().viewForms.documentType.required){
+                                <span class="required">*</span>
+                                }</label>
+                            <select name="documentType" class="form-select" (change)="onDocumentTypesSelected($event)"
+                                formControlName='documentType'>
+                                <!--                             <option [value]="''" selected>{{'document-type'|translate}}</option>
+                --> @for(item of documentTypes; track $index){
+                                <option [value]="item.code">{{item.name}}</option>
+                                }
+                            </select>
+                            @if(checkoutForm.controls['documentType'].touched &&
+                            checkoutForm.controls['documentType'].errors?.['required']){
+                            <div class="text-danger-container">
+                                <span class="text-danger">
+                                    {{'type-document-help'|translate}}
+                                </span>
+                            </div>
+                            }
+                        </div>
+                        }
+                        }
+                        @if(getTypeForm().viewForms.documentNumber.enabled){
+                        <div class="form-group col-12 col-md-4">
+                            <label class="field-label">{{'document-number'|translate}}
+                                @if(getTypeForm().viewForms.documentNumber.required){
+                                <span class="required">*</span>
+                                }
+                            </label>
+                            <input (change)="onInputChange()" class="form-control" [type]="'text'" name="documentNumber"
+                                formControlName='documentNumber' min="1" max="99999999999" value="" placeholder=""
+                                autocomplete="off">
+                            @if(checkoutForm.controls['documentNumber'].touched &&
+                            checkoutForm.controls['documentNumber'].errors?.['required']){
+                            <div class="text-danger-container">
+                                <span class="text-danger">
+                                    {{'document-number-help'|translate}}
+                                </span>
+                            </div>
+                            }
+                        </div>
+                        }
+                    </div>
+                    <div class="row mt-df"><!--Fila 6-->
+                        @if(getTypeForm().viewForms.notes.enabled){
+                        <div class="form-group col-12 col-md-12">
+                            @if(!getLabelNotesParam()){
+                            <label class="field-label">{{'notes'|translate}}
+                                @if(getTypeForm().viewForms.notes.required){
+                                <span class="required">*</span>
+                                }
+                            </label>
+                            }
+                            @if(getLabelNotesParam(); as labelnotes){
+                            <label class="field-label" [innerHTML]="labelnotes.value">
+                                @if(getTypeForm().viewForms.notes.required){
+                                <span class="required">*</span>
+                                }
+                            </label>
+                            }
+
+                            <input (change)="onInputChange()" class="form-control" type="text" name="notes" formControlName='notes'
+                                value="" placeholder="" autocomplete="off">
+                        </div>
+                        }
+                    </div>
+                    <div class="row mt-df"><!--Fila 7-->
+                        <div class="form-group col-12 col-md-12">
+                            <label for="formFact"><b>{{ 'same-billing-address' | translate }}</b> <input type="checkbox"
+                                    class="ms-2" [checked]="viewDataFacturacion" (change)="showFormFacturacion()"
+                                    id="formFact"></label>
+                        </div>
+                    </div>
+                    <div class="row mt-df">
+                        <div class="col-12">
+                            <p>
+                                <label class="required text-underline text-danger">* {{ 'required-fields' | translate }}</label>
+                            </p>
+                        </div>
+                    </div>
+                    <div class="row mt-df">
+                        @if(getTypeForm().viewForms.terms.enabled){
+                        <div class="form-group col-12 col-md-12">
+                            @if(getTypeForm().viewForms.terms.required){
+                            <span class="required">*</span>
+                            }
+                            <label class="" for=""> {{ 'accept-terms' | translate }} <input class="ms-2" name="terms"
+                                    formControlName='terms' type="checkbox" required (change)="onInputChange()" /> </label><br />
+                            <button type="button" class="btn btn-primary" data-bs-toggle="modal"
+                                data-bs-target="#terminos-y-condiciones">
+                                {{ 'whats-this' | translate }}
+                            </button>
+                            @if(checkoutForm.controls['terms'].touched && !checkoutForm.controls['terms'].value){
+                            <div class="text-danger-container">
+                                <span class="text-danger">{{ 'must-accept-terms' | translate }}</span>
+                            </div>
+                            }
+                        </div>
+                        }
+                    </div>
+                    @if(!viewDataFacturacion){
+                    <!--Formulario de Facturación-->
+                    <div class="card">
+                        <div class="card-header text-center">
+                            <h2>{{ 'billing-data' | translate }}</h2>
+                        </div>
+                        <div class="card-body">
+                            <form [formGroup]="checkoutFormFacturacion">
+                                <div class="row mt-2"><!--Fila 1-->
+
+                                    @if(getTypeForm().viewForms.firstName.enabled){
+                                    <div class="form-group col-12 col-md-6">
+                                        <!--Si es required-->
+                                        <label class="form-label">{{'first-name'|translate}}
+                                            @if(getTypeForm().viewForms.firstName.required){
+                                            <span class="required">*</span>
+                                            }
+                                        </label>
+                                        <!--Input-->
+                                        <input class="form-control" type="text" name="firstName" formControlName="firstName"
+                                            value="" placeholder="" autocomplete="off">
+                                        @if(checkoutFormFacturacion.controls['firstName'].touched &&
+                                        checkoutFormFacturacion.controls['firstName'].errors?.['required']){
+                                        <div class="text-danger-container">
+                                            <span class="text-danger">{{'first-name-help1'|translate}}</span>
+                                        </div>
+                                        }
+                                        <!--Error info-->
+                                        @if(checkoutFormFacturacion.controls['firstName'].touched &&
+                                        checkoutFormFacturacion.controls['firstName'].errors?.['pattern']){
+                                        <div class="text-danger-container">
+                                            <span class="text-danger">
+                                                {{'first-name-help2'|translate}}
+                                            </span>
+                                        </div>
+                                        }
+                                    </div>
+                                    }
+                                    @if(getTypeForm().viewForms.lastName.enabled){
+                                    <div class="form-group col-12 col-md-6">
+                                        <label class="form-label">{{'last-name'|translate}}
+                                            @if(getTypeForm().viewForms.lastName.required){
+                                            <span class="required">*</span>
+                                            }
+                                        </label>
+                                        <input class="form-control" type="text" name="lastName" formControlName="lastName" value=""
+                                            placeholder="" autocomplete="off">
+                                        @if(checkoutFormFacturacion.controls['lastName'].touched &&
+                                        checkoutFormFacturacion.controls['lastName'].errors?.['required']){
+                                        <div class="text-danger-container">
+                                            <span class="text-danger">{{'last-name-help1'|translate}}</span>
+                                        </div>
+                                        }
+                                        @if(checkoutFormFacturacion.controls['lastName'].touched &&
+                                        checkoutFormFacturacion.controls['lastName'].errors?.['pattern']){
+                                        <div class="text-danger-container">
+                                            <span class="text-danger">{{'last-name-help2'|translate}}</span>
+                                        </div>
+                                        }
+                                    </div>
+                                    }
+                                </div>
+                                <div class="row mt-2"><!--Fila 2-->
+                                    @if(getTypeForm().viewForms.phoneNumber.enabled){
+                                    <div class="form-group col-12 col-md-6">
+                                        <label class="form-label">{{'phone'|translate}}
+                                            @if(getTypeForm().viewForms.phoneNumber.required){
+                                            <span class="required">*</span>
+                                            }
+                                        </label>
+                                        <input (change)="onInputChange()" class="form-control" type="text" name="phoneNumber"
+                                            formControlName='phoneNumber' value="" placeholder="" autocomplete="off">
+                                        @if(checkoutFormFacturacion.controls['phoneNumber'].touched &&
+                                        checkoutFormFacturacion.controls['phoneNumber'].errors?.['required']){
+                                        <div class="text-danger-container">
+                                            <span class="text-danger">
+                                                {{'phone-help1'|translate}}
+                                            </span>
+                                        </div>
+                                        }
+                                        @if(checkoutFormFacturacion.controls['phoneNumber'].touched &&
+                                        checkoutFormFacturacion.controls['phoneNumber'].errors?.['pattern']){
+                                        <div class="text-danger-container">
+                                            <span class="text-danger">
+                                                {{'phone-help2'|translate}}
+                                            </span>
+                                        </div>
+                                        }
+                                    </div>
+                                    }
+                                    @if(getTypeForm().viewForms.email.enabled){
+                                    <div class="form-group col-12 col-md-6">
+                                        <label class="form-label">{{'email-address'|translate}}
+                                            @if(getTypeForm().viewForms.email.required){
+                                            <span class="required">*</span>
+                                            }</label>
+                                        <input class="form-control" type="email" name="email" formControlName='email' value=""
+                                            placeholder="" autocomplete="off">
+                                        @if(checkoutFormFacturacion.controls['email'].touched &&
+                                        checkoutFormFacturacion.controls['email'].errors?.['required']){
+                                        <div class="text-danger-container">
+                                            <span class="text-danger">
+                                                {{'email-address-help1'|translate}}
+                                            </span>
+                                        </div>
+                                        }
+                                        @if(checkoutFormFacturacion.controls['email'].touched &&
+                                        checkoutFormFacturacion.controls['email'].errors?.['email']){
+                                        <div class="text-danger-container">
+                                            <span class="text-danger">
+                                                {{'email-address-help2'|translate}}
+                                            </span>
+                                        </div>
+                                        }
+                                    </div>
+                                    }
+                                </div>
+                                <div class="row mt-2"><!--Fila 3-->
+                                    @if(getTypeForm().viewForms.countryCode.enabled){
+                                    @if(countries$ | async; as countries){
+                                    <div class="form-group col-12 col-md-4">
+                                        <label class="form-label">{{'country'|translate}}
+                                            @if(getTypeForm().viewForms.countryCode.required){
+                                            <span class="required">*</span>
+                                            }</label>
+                                        <select class="form-select" name="countryCode" formControlName='countryCode'
+                                            (change)="onCountrySelected($event, true)">
+                                            @for(country of countries; track $index){
+                                            <option [value]="country.code">{{ country.name }}</option>
+                                            }
+                                        </select>
+                                        @if(checkoutFormFacturacion.controls['countryCode'].touched &&
+                                        checkoutFormFacturacion.controls['countryCode'].errors?.['required']){
+                                        <div class="text text-danger">
+                                            {{'country-help'|translate}}
+                                        </div>
+                                        }
+                                    </div>
+                                    }
+                                    }
+                                    @if(getTypeForm().viewForms.provinceCode.enabled){
+                                    @if(provinces$ | async; as provinces){
+                                    <div class="form-group col-12 col-md-4">
+                                        <label class="form-label">{{'state'|translate}}
+                                            @if(getTypeForm().viewForms.provinceCode.required){
+                                            <span class="required">*</span>
+                                            }</label>
+                                        <select class="form-select" name="provinceCode"
+                                            (change)="onProvincesSelected($event, provinces, true)" formControlName='provinceCode'>
+                                            @for(province of provinces; track $index){
+                                            <option [value]="province.code">{{ province.name }}
+                                            </option>
+                                            }
+                                        </select>
+                                        @if(checkoutFormFacturacion.controls['provinceCode'].touched &&
+                                        checkoutFormFacturacion.controls['provinceCode'].errors?.['required']){
+                                        <div class="text text-danger">
+                                            {{'state-help'|translate}}
+                                        </div>
+                                        }
+                                    </div>
+                                    }
+                                    }
+                                    @if(getTypeForm().viewForms.city.enabled){
+                                    <div class="form-group col-12 col-md-4">
+                                        <label class="form-label">{{'town-city'|translate}}
+                                            @if(getTypeForm().viewForms.city.required){
+                                            <span class="required">*</span>
+                                            }</label>
+                                        <input (change)="onInputChange()" class="form-control" type="text" name="city"
+                                            formControlName='city' value="" placeholder="" autocomplete="off">
+                                        @if(checkoutFormFacturacion.controls['city'].touched &&
+                                        checkoutFormFacturacion.controls['city'].errors?.['required']){
+                                        <div class="text-danger-container">
+                                            <span class="text-danger">{{'town-city-help'|translate}}</span>
+                                        </div>
+                                        }
+                                    </div>
+                                    }
+                                </div>
+                                <div class="row mt-df"><!--Fila 4-->
+                                    @if(getTypeForm().viewForms.street.enabled){
+                                    <div class="form-group col-12 col-md-8">
+                                        <label class="field-label">{{'address'|translate}}
+                                            @if(getTypeForm().viewForms.street.required){
+                                            <span class="required">*</span>
+                                            }
+                                        </label>
+                                        <input (change)="onInputChange()" class="form-control" type="text" name="street"
+                                            formControlName='street' value="" placeholder="" autocomplete="off">
+                                        @if(checkoutFormFacturacion.controls['street'].touched &&
+                                        checkoutFormFacturacion.controls['street'].errors?.['required']){
+                                        <div class="text-danger-container">
+                                            <span class="text-danger">{{'address-help1'|translate}}</span>
+                                        </div>
+                                        }
+                                        @if(checkoutFormFacturacion.controls['street'].touched &&
+                                        checkoutFormFacturacion.controls['street'].errors?.['maxlength']){
+                                        <div class="text-danger-container">
+                                            <span class="text-danger">{{'address-help2'|translate}}</span>
+                                        </div>
+                                        }
+                                    </div>
+                                    }
+
+                                    <!-- form dirección -->
+                                    @if(getTypeForm().viewForms.postcode.enabled){
+                                    <div class="form-group col-12 col-md-4">
+                                        <label class="field-label">{{'postal-code'|translate}}
+                                            @if(getTypeForm().viewForms.postcode.required){
+                                            <span class="required">*</span>
+                                            }</label>
+                                        <input (change)="onInputChange()" class="form-control" type="text" name="postcode"
+                                            formControlName='postcode' value="" placeholder="" autocomplete="off">
+                                        @if(checkoutFormFacturacion.controls['postcode'].touched &&
+                                        checkoutFormFacturacion.controls['postcode'].errors?.['required']){
+                                        <div class="text-danger-container">
+                                            <span class="text-danger">{{'postal-code-help'|translate}}</span>
+                                        </div>
+                                        }
+                                        @if(checkoutFormFacturacion.controls['postcode'].touched &&
+                                        checkoutFormFacturacion.controls['postcode'].errors?.['pattern']){
+                                        <div class="text-danger-container">
+                                            <span class="text-danger"> {{'postal-code-pattern-error' | translate}} </span>
+                                        </div>
+                                        }
+                                    </div>
+                                    }
+                                </div>
+                                <div class="row mt-df"><!--Fila 5-->
+                                    @if(getTypeForm().viewForms.documentType.enabled){
+                                    @if(documentTypes$ | async; as documentTypes){
+                                    <div class="form-group col-12 col-md-4">
+                                        <label class="field-label">{{'document-type'|translate}}
+                                            @if(getTypeForm().viewForms.documentType.required){
+                                            <span class="required">*</span>
+                                            }</label>
+                                        <select name="documentType" class="form-select" (change)="onDocumentTypesSelected($event, true)"
+                                            formControlName='documentType'>
+                                            <!--                             <option [value]="''" selected>{{'document-type'|translate}}</option>
+                            --> @for(item of documentTypes; track $index){
+                                            <option [value]="item.code">{{item.name}}</option>
+                                            }
+                                        </select>
+                                        @if(checkoutFormFacturacion.controls['documentType'].touched &&
+                                        checkoutFormFacturacion.controls['documentType'].errors?.['required']){
+                                        <div class="text-danger-container">
+                                            <span class="text-danger">
+                                                {{'type-document-help'|translate}}
+                                            </span>
+                                        </div>
+                                        }
+                                    </div>
+                                    }
+                                    }
+                                    @if(getTypeForm().viewForms.documentNumber.enabled){
+                                    <div class="form-group col-12 col-md-4">
+                                        <label class="field-label">{{'document-number'|translate}}
+                                            @if(getTypeForm().viewForms.documentNumber.required){
+                                            <span class="required">*</span>
+                                            }
+                                        </label>
+                                        <input (change)="onInputChange()" class="form-control" [type]="'text'" name="documentNumber"
+                                            formControlName='documentNumber' min="1" max="99999999999" value="" placeholder=""
+                                            autocomplete="off">
+                                        @if(checkoutFormFacturacion.controls['documentNumber'].touched &&
+                                        checkoutFormFacturacion.controls['documentNumber'].errors?.['required']){
+                                        <div class="text-danger-container">
+                                            <span class="text-danger">
+                                                {{'document-number-help'|translate}}
+                                            </span>
+                                        </div>
+                                        }
+                                    </div>
+                                    }
+                                </div>
+                                <div class="row mt-df"><!--Fila 6-->
+                                    @if(getTypeForm().viewForms.notes.enabled){
+                                    <div class="form-group col-12 col-md-12">
+                                        @if(!getLabelNotesParam()){
+                                        <label class="field-label">{{'notes'|translate}}
+                                            @if(getTypeForm().viewForms.notes.required){
+                                            <span class="required">*</span>
+                                            }
+                                        </label>
+                                        }
+                                        @if(getLabelNotesParam(); as labelnotes){
+                                        <label class="field-label" [innerHTML]="labelnotes.value">
+                                            @if(getTypeForm().viewForms.notes.required){
+                                            <span class="required">*</span>
+                                            }
+                                        </label>
+                                        }
+
+                                        <input (change)="onInputChange()" class="form-control" type="text" name="notes"
+                                            formControlName='notes' value="" placeholder="" autocomplete="off">
+                                    </div>
+                                    }
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                    }
+                    <div class="row d-flex flex-row">
+                        <div class="col-12 d-flex justify-content-end">
+                            <button type="submit" class="btn btn-primary text-white" [disabled]="checkoutForm.invalid">{{(isLastOne
+                                ? 'finish-checkout' : (allready_data ? 'update' :
+                                'ready-form')) | translate}}
+                                <!-- {{(allready_data ? 'update' : (isLastOne ? 'finish-checkout' : 'ready-form')) | translate}}  -->
+                            </button>
+                        </div>
+                    </div>
+                    @if(loading){
+                    <div class="d-flex flex-column justify-content-center align-items-center">
+                        <app-loading-full-ec></app-loading-full-ec>
+                    </div>
+                    }
+
+                </form>
+            </div>
+            } @else {
+            <div id="loginCheckout">
+                @if(require_login){
+                <div class="d-flex flex-column justify-content-center align-items-center">
+                    <div class="col-12">
+                        <app-login-form-ec (ready)="verifyValidate($event)" [redirect]="false" [title]="'need-login'">
+                        </app-login-form-ec>
+                    </div>
+                </div>
+                }
+            </div>
+            }
+        } @else {
+        @if(modeSelectAddress == 'ONLY_ADDRESS_SELECTION'){
+        <div class="checkout-title my-2">
+            <h3>{{'address-selection'|translate}}</h3>
+        </div>
+        }
+
+        @if(this.addressBook){
+            @if(this.addressBook?.length){
+            <div class="container">
+                <div class="row">
+                    @for(item of addressBook; track $index; let i = $index){
+                    <div class="col-sm-6 col-12 my-3">
+                        <div class="card p-3">
+                            <input class="ms-1 mt-3 form-check-input input-size-lg" type="radio" [name]="'n-'+i" [id]="i"
+                                [checked]="item.selected" (click)="setSelectAddress(item)" (change)="onInputChange()">
+                            <div class="ms-5">
+                                <h4 class="card-title">
+                                    <strong>{{'address'|translate}}</strong><br>
+                                    <span class="text-uppercase h3">{{item.street}}</span>
+                                </h4>
+                                <div class="row">
+                                    <h5 class="card-subtitle mb-2 text-muted col-auto">
+                                        <strong>{{'country'|translate}}</strong> {{getCountry(item.countryCode)}}
+                                    </h5>
+                                    <h5 class="card-subtitle mb-2 text-muted col-auto">
+                                        <strong>{{'state'|translate}}</strong> {{getProvince(item.provinceCode)}}
+                                    </h5>
+                                    <h5 class="card-subtitle mb-2 text-muted col-auto">
+                                        <strong>{{'town-city'|translate}}</strong> {{item.city}}
+                                    </h5>
+                                    <h5 class="card-subtitle mb-2 text-muted col-auto">
+                                        <strong>{{'postal-code'|translate}}</strong> {{item.postcode}}
+                                    </h5>
+                                </div>
+                                <div class="row px-3">
+                                    <div class="card p-2 bg-light w-100">
+                                        <div class="card-body">
+                                            <h5 class="card-title">{{'address-contact'|translate}}</h5>
+                                            <h6 class="card-subtitle mb-2 text-muted">
+                                                <strong>{{'first-name'|translate}}</strong>
+                                                {{item.addressContact.firstName}}
+                                            </h6>
+                                            <h6 class="card-subtitle mb-2 text-muted">
+                                                <strong>{{'last-name'|translate}}</strong>
+                                                {{item.addressContact.lastName}}
+                                            </h6>
+                                            <h6 class="card-subtitle mb-2 text-muted">
+                                                <strong>{{'document-type'|translate}}</strong>
+                                                {{getDocumentType(item.addressContact.documentType)}}
+                                            </h6>
+                                            <h6 class="card-subtitle mb-2 text-muted">
+                                                <strong>{{'document-number'|translate}}</strong>
+                                                {{item.addressContact.documentNumber}}
+                                            </h6>
+                                            <h6 class="card-subtitle mb-2 text-muted">
+                                                <strong>{{'email-address'|translate}}</strong>
+                                                {{item.addressContact.email}}
+                                            </h6>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    }
+
+                </div>
+
+                <div class="w-100">
+                    <div class="row mt-df">
+                        <div class="form-group col-12 col-md-12">
+                            @if(!getLabelNotesParam()){
+                            <label class="form-label">{{'notes'|translate}}</label>
+                            }
+                            @if(getLabelNotesParam(); as labelnotes){
+                            <label class="form-label" [innerHTML]="labelnotes.value"></label>
+                            <input (change)="onInputChange()" class="form-control" type="text" name="notes"
+                                [(ngModel)]="this.addressBookSelected.notes" #ctrl="ngModel" value="" placeholder=""
+                                autocomplete="off">
+                            }
+
+                        </div>
+                    </div>
+                </div>
+                <div class="row d-flex flex-row">
+                    <div class="col-12 d-flex justify-content-end">
+                        <button (click)="onSelectAddress(cartItems)" class="btn btn-primary text-white" [disabled]="loadingStep">{{(isLastOne
+                            ? 'finish-checkout' : (allready_data ? 'update' :
+                            'ready-form')) | translate}}
+                            <!-- {{(allready_data ? 'update' : (isLastOne ? 'finish-checkout' : 'ready-form')) | translate}}  -->
+                        </button>
+                        
+                    </div>
+                </div>
+                @if(loading){
+                <div class="d-flex flex-column jusitfy-content-center align-items-center">
+                    <app-loading-full-ec></app-loading-full-ec>
+                </div>
+                }
+            </div>
+            } @else {
+            <div class="container">
+                <div class="row">
+                    <div class="col-12 text-center my-2">
+                        <div class="d-flex flex-column justify-content-center align-items-center">
+                            <app-loading-full-ec></app-loading-full-ec>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            }
+        } @else {
+        <div class="container">
+            <div class="row">
+                <div class="col-12 text-center my-2">
+                    <h4> {{'address-book-not-result' | translate }} </h4>
+                </div>
+            </div>
+        </div>
+        }
+
+        }
+
+    }
+    @else {
+    <div class="container">
+        <p>Por favor <a [routerLink]="['/auth/login']"> Inicie Sesión</a></p>
+    </div>
+    }
+}
+@if(getTypeForm().viewForms.terms.enabled){
+<div class="modal fade" id="terminos-y-condiciones" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-xl modal-dialog-scrollable">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="modalLabel">Términos y condiciones</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <app-blocks-ec [section]="'terminos-y-condiciones'" />
+            </div>
+        </div>
+    </div>
+</div>
+}