ng-easycommerce 0.0.0

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

@@ -0,0 +1,302 @@
+import { Component, inject, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { RouterLink } from '@angular/router';
+import { LoginFormEcComponent } from '../../auth-ec';
+import { TranslateModule } from '@ngx-translate/core';
+import { AddressingService, AnalyticsService, AuthService, CartService, ChannelService, CheckoutService, FormService, ParametersService, ToastService } from '../../../ec-services';
+import { AsyncPipe, JsonPipe, TitleCasePipe } from '@angular/common';
+import { ApiConstantsService } from '../../../constants';
+import { LoadingFullEcComponent } from '../../widgets-ec';
+import { BehaviorSubject, filter, firstValueFrom } from 'rxjs';
+import { ConnectionService } from '../../../api';
+import { InputEcComponent } from './input-ec/input-ec.component';
+import { BlocksEcComponent } from "../../blocks-ec/blocks-ec.component";
+
+@Component({
+    selector: 'app-dataform-ec',
+    standalone: true,
+    imports: [
+    RouterLink,
+    ReactiveFormsModule,
+    FormsModule,
+    LoginFormEcComponent,
+    TranslateModule,
+    AsyncPipe,
+    TitleCasePipe,
+    LoadingFullEcComponent,
+    JsonPipe,
+    BlocksEcComponent
+],
+    templateUrl: './dataform-ec.component.html',
+    styleUrl: './dataform-ec.component.scss'
+})
+export class DataformEcComponent implements OnInit {
+
+    private _channelService: ChannelService = inject(ChannelService);
+    private _authService: AuthService = inject(AuthService);
+    private _paramsService: ParametersService = inject(ParametersService);
+    private _apiConsts: ApiConstantsService = inject(ApiConstantsService);
+    private _addressingService: AddressingService = inject(AddressingService);
+    private _cartService: CartService = inject(CartService);
+    private _toastService: ToastService = inject(ToastService);
+    private _formService: FormService = inject(FormService);
+    private _checkoutService: CheckoutService = inject(CheckoutService);
+    private _formBuilder: FormBuilder = inject(FormBuilder);
+
+    public modeSelectAddress = this._addressingService.modeSelectAddress;
+    public cartItems: any = []
+
+    public channel$ = this._channelService.channel$;
+    public countries$ = this._formService.getCountriesData();
+    public provinces$ = this._formService.provinces$;
+    public documentTypes$ = this._formService.documentTypes$;
+    public isLastStep$ = this._checkoutService.isLastStep$;
+    public loadingStep$ = this._checkoutService.loadingStep$;
+    
+    public selectAddress: boolean = false;
+    public params: any;
+    public addressBook: any = [];
+    public addressBookSelected = { id: 0, notes: "" }
+    public form_ready: boolean = false;
+    public loading: boolean = false;
+    public allready_data: boolean = false;
+    public require_login: boolean = false;
+    public checkoutForm: FormGroup;
+    public checkoutFormFacturacion: FormGroup;
+    public getTypeForm: any = this._addressingService.getTypeForm;
+    public isLastOne: boolean = false;
+    public loadingStep: boolean = false;
+
+    private readonly postalCodePattern = '^[0-9][0-9]*$';
+
+    protected countriesFacturacionSubject = new BehaviorSubject<any[]>([]);
+    protected provincesFacturacionSubject = new BehaviorSubject<any[]>([]);
+    protected documentTypesFacturacionSubject = new BehaviorSubject<any[]>([]);
+
+    public countriesFacturacion$ = this.countriesFacturacionSubject.asObservable();
+    public provincesFacturacion$ = this.provincesFacturacionSubject.asObservable();
+    public documentTypesFacturacion$ = this.documentTypesFacturacionSubject.asObservable();
+
+    public viewDataFacturacion: boolean = true;
+    public validado = false;
+
+    constructor() {
+        this.checkoutForm = this._formBuilder.group({
+            ...this._addressingService.getTypeForm()?.configForm.formAddres,
+            postcode: ['', [Validators.required, Validators.pattern(this.postalCodePattern)]]
+        })
+        this.checkoutForm.statusChanges
+            .pipe(
+                filter(() => { this.onFormChange(); return this.checkoutForm.valid }))
+            .subscribe(() => this.onFormValid());
+
+        this.checkoutFormFacturacion = this._formBuilder.group({
+            ...this._addressingService.getTypeForm()?.configForm.formBilling,
+            postcode: ['', [Validators.required, Validators.pattern(this.postalCodePattern)]] // Se agrega para que sólo acepte códigos postales mayores que cero
+        });
+        this.checkoutFormFacturacion.statusChanges
+            .pipe(
+                filter(() => { this.onFormChange(); return this.checkoutFormFacturacion.valid }))
+            .subscribe(() => this.onFormValid());
+        this.isLastStep$.subscribe( res => this.isLastOne = res);
+        this.loadingStep$.subscribe( res => this.loadingStep = res);
+    }
+
+    ngOnInit(): void {
+        this._paramsService.getParameters().subscribe(params => this.params = params);
+        this._cartService.cartItems$.subscribe(items => this.cartItems = items);
+
+        this._authService.isAuthenticated() && this.checkoutForm.controls['email'].setValue(this._authService.getUserProfileAsUser()?.email); //--> esto es momentaneo hasta que empiece a trabajar con Seller y Customer.  
+        this._authService.isAuthenticated() && this.checkoutForm.get('email')?.disable({ onlySelf: true });
+        (this._addressingService.modeSelectAddress == 'LOAD_ADDRESS_AND_SELECTION' || this._addressingService.modeSelectAddress == 'ONLY_ADDRESS_SELECTION')
+            && firstValueFrom(this._addressingService.getAddressBook()).then(res => {
+                this.addressBook = res && res || null
+                this.addressBook == null && this.setMode('carga')
+            }
+            ).catch(err => console.error(err.error.message))
+
+    }
+
+    isAuthenticated(): boolean {
+        return this._authService.isAuthenticated()
+    }
+
+    getMode() {
+        switch (this.modeSelectAddress) {
+            case 'ONLY_LOAD_ADDRESS':
+                return true
+            case 'ONLY_ADDRESS_SELECTION':
+                if (this._authService.isAuthenticated()) {
+                    return false
+                }
+                return true
+            case 'LOAD_ADDRESS_AND_SELECTION':
+                if (this._authService.isAuthenticated()) {
+                    return this.selectAddress
+                }
+                return true
+        }
+    }
+
+    setMode(mode: string) {
+        this.selectAddress = mode == "carga"
+    }
+
+    getParamByChannelAndLanguage(nameParam: string) {
+        return this._paramsService.hasParams(this.params, nameParam + this._apiConsts.CHANNEL + '_' + this._apiConsts.LOCALE.split('_')[0])
+    }
+
+    setSelectAddress(addressSelect: any) {
+        this.addressBook.map((address: any) => address.selected = address.id === addressSelect.id)
+        this.addressBookSelected.id = this.addressBook.find((address: any) => address.selected).id || 0
+    }
+    onSelectAddress(items:any){
+        this.loading = true;
+        let addressSelected = this.addressBook.find((address:any) => address.selected)
+        if (addressSelected) {
+            try {
+                if (!this.addressBookSelected.id) {
+                    this.addressBookSelected.id = addressSelected.id || 0
+                }
+                const request = {
+                    selected: this.addressBookSelected,
+                    shippingAddress: addressSelected
+                }
+                this._addressingService.setHeadquarter(request).then(
+                    res => {
+                        if(this._cartService.channelConfig.applyOrderLot){
+                            items.forEach((item:any) => {
+                                if(!item.lot[0]){
+                                    this._cartService.addToLot(item.product,0,item.variant_id,0,item.item_id,item.quantity,item.product.price,item.quantity,item.discount,item.product.price*item.quantity,'new','','',0,res.shippingAddress.city + ' - ' + res.shippingAddress.street, 'newlot');  
+                                }
+                            })
+                        }
+                        this.form_ready = true;
+                        this.allready_data = true;
+                        this.next();
+                    }
+                ).catch(err => this._toastService.show('operation-error'));
+
+            } catch (e) { this._toastService.show('operation-error') }
+        } else {
+            this.showError('invalid-form')
+        }
+        this.loading = false;
+    }
+
+    onInputChange = () => this.form_ready = false;
+
+    getCountry(code: any) { return this._addressingService.countriesList.find((countries: any) => countries.code.toLocaleLowerCase().includes(code.toLocaleLowerCase()))?.name || "" }
+
+    getProvince(code: any) { return this._addressingService.provinceList.find((ct: any) => ct.code == code)?.name || "" }
+
+    getDocumentType(code: any) { return this._addressingService.documentTypes.find((dt: any) => dt.code == code)?.name || "" }
+
+    getLabelNotesParam() { return this._paramsService.hasParams(this.params, 'label_notes_' + this._apiConsts.CHANNEL + '_' + this._apiConsts.LOCALE.split('_')[0]) }
+
+    verifyValidate($event:any) {        
+        if (this.checkoutForm.valid) {
+            // Aca debo resolver el formulario y una vez este todo ok debo avisar al observable de
+            // los steps.
+            this.emitResult();
+        } else
+            this.showError('invalid-form');
+    }
+    showError = (error_message: any) => { this._toastService.show(error_message); return true; }
+
+    protected emitResult = async () => {
+        this.loading = true;
+        let data: any = { shippingAddress: { ...this.checkoutForm.getRawValue(), phoneNumber: this.checkoutForm.value.phoneNumber.toString() }, notes: (this.checkoutForm.getRawValue()).notes };
+         if (!this.viewDataFacturacion && this.checkoutFormFacturacion.valid) data = { ...data, notes: data.notes, billingAddress: this.checkoutFormFacturacion.getRawValue() };
+        try {
+            let result = await this._addressingService.setAddress(data);
+
+            if (result === false) {
+                this.require_login = true;
+                this._toastService.show('El email ya está registrado, inicie sesión.')
+            }
+            else if (result !== false && result !== undefined) {
+                //Ojo que lo edito, no hizo una compra nueva, atenti a esto.
+                this.form_ready = true
+                this.allready_data = true
+                this.next()
+            }
+
+        } catch (e) { this._toastService.show('operation-error') }
+        this.loading = false;
+    }
+
+    protected onFormChange() {
+        if (this.checkoutForm.valid) {
+            if (!this.viewDataFacturacion && this.checkoutFormFacturacion.valid) {
+                this.validado = true
+                return
+            }
+            if (this.viewDataFacturacion && this.checkoutForm.valid) {
+                this.validado = true
+                return
+            }
+        }
+        this.validado = false
+    }
+
+    onFormValid = () => {
+    }
+
+    /**
+     * Captura el evento de cuando cambia un pais en el `<select>`
+     * @param event 
+     */
+    onCountrySelected = (event: any, billing:boolean = false) => {
+        const { value } = event.target;
+        //$('#selectOpPais').attr('disabled', true);
+        const form = billing ? this.checkoutFormFacturacion : this.checkoutForm;
+        form.controls['countryCode'].setValue(value);
+        form.controls['provinceCode'].setValue('null');
+        //value != '' && this.provincesSubject.next(this.countriesSubject.value.find(country => country.code == value).provinces);
+        if (value != '' || value != 'null') {
+            this._formService.onCountrySelected(value);
+        }
+    }
+    /**
+     * Captura el evento de cuando cambia una provincia/estado en el `<select>`
+     * @param event 
+     * @param provinces lista de provincias para obtener el nombre de la seleccionada.
+     */
+    onProvincesSelected(event: any, provinces: any, billing:boolean = false){
+        const { value } = event.target;
+        const form = billing ? this.checkoutFormFacturacion : this.checkoutForm;
+        return form.controls['provinceCode'].setValue(value == 'null' ? null : value);
+        /* return form.controls['provinceName'].setValue(provinces.find((province: any) => province.code == value).name); */
+    }
+    onDocumentTypesSelected(event: any, billing:boolean = false) {
+        const { value } = event.target
+        const form = billing ? this.checkoutFormFacturacion : this.checkoutForm;
+        return form.controls['documentType'].setValue(value == '' ? '' : value);
+    }
+    showFormFacturacion = () => {
+        this.viewDataFacturacion = !this.viewDataFacturacion
+        if (!this.viewDataFacturacion) {
+            this.countriesFacturacion$.subscribe(res => {
+                if (res && res.length > 0) {
+                    this.checkoutFormFacturacion.controls['countryCode'].setValue(res[0].code)
+                    // Provincia
+                    this.checkoutFormFacturacion.controls['provinceCode'].setValue(
+                        res[0]?.provinces[0].code
+                    )
+                    this.provincesFacturacionSubject.next(res[0]?.provinces)
+                    // Documento
+                    this.checkoutFormFacturacion.controls['documentType'].setValue(res[0]?.documentTypes[0].code)
+                    this.documentTypesFacturacionSubject.next(res[0]?.documentTypes)
+                }
+            })
+        }
+        this.onFormChange()
+        return this.viewDataFacturacion
+    }
+
+    next(){
+		this._checkoutService.next()
+	}
+    
+}

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

@@ -0,0 +1,32 @@
+<div class="form-group col-12 col-md-6">
+	<!--Si es required-->
+	<!-- <label class="field-label">{{name|translate}}
+		@if(isRequired){
+		<span class="required">*</span>
+		}
+	</label> -->
+	<!--Input-->
+	<!-- <input class="form-control" type="text"  [value]="value" (input)="onInput($event)" placeholder=""
+		autocomplete="off">
+	@if(input.touched && input.errors?.['required']){
+	<div class="text-danger-container">
+		<span class="text-danger">{{name+'-help1'|translate}}</span>
+	</div>
+	} -->
+	<!--Error info-->
+	<!-- @if(input.touched && input.errors?.['pattern']){
+	<div class="text-danger-container">
+		<span class="text-danger">
+			{{name+'-help2'|translate}}
+		</span>
+	</div>
+	} -->
+	<input
+	class="form-control"
+	type="text"
+	[value]="value"
+	(input)="onInput($event)"
+	placeholder=""
+	autocomplete="off"
+  />
+</div>

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

@@ -0,0 +1,52 @@
+import { TitleCasePipe } from '@angular/common';
+import { Component, forwardRef, inject, Input } from '@angular/core';
+import { ControlContainer, ControlValueAccessor, FormControl, FormGroup, FormGroupDirective, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+	selector: 'app-input-ec',
+	standalone: true,
+	imports: [
+		ReactiveFormsModule,
+		FormsModule,
+		TranslateModule,
+		TitleCasePipe
+	],
+	templateUrl: './input-ec.component.html',
+	styleUrl: './input-ec.component.scss',
+	viewProviders:  [
+		{
+		  provide: NG_VALUE_ACCESSOR,
+		  useExisting: forwardRef(() => InputEcComponent),
+		  multi: true,
+		},
+	  ],
+})
+export class InputEcComponent implements ControlValueAccessor {
+	value = '';
+
+	private onChange = (value: any) => {};
+	private onTouched = () => {};
+  
+	writeValue(value: any): void {
+	  this.value = value || '';
+	}
+  
+	registerOnChange(fn: any): void {
+	  this.onChange = fn;
+	}
+  
+	registerOnTouched(fn: any): void {
+	  this.onTouched = fn;
+	}
+  
+	onInput(event: Event): void {
+	  const input = event.target as HTMLInputElement;
+	  this.value = input.value;
+	  this.onChange(this.value);
+	}
+  
+	setDisabledState?(isDisabled: boolean): void {
+	  // Si necesitas manejar el estado deshabilitado
+	}
+}

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

@@ -0,0 +1,12 @@
+@if(data$ | async; as datos){
+    <div id="appDetailCheckoutBlockEc" class="d-flex flex-row w-100 justify-content-center flex-wrap">
+        @for(item of data; track $index; let i = $index){
+                <div class="d-flex flex-column justify-content-center mx-sm-3 mx-2 text-center mb-4 resumen">
+                    <i ngClass="mb-2 colorIconoCheckout" [class]="getIcon(item.type)"></i>
+                    <strong class="text-center w-100 font-brandon font-md mb-1">{{ item.type | translate }}</strong>
+                    <span class="text-center w-100 font-brandon font-md text-gray">{{ (item.amount != 0 ) ? (item.amount |
+                        ecCurrencySymbol) : ('free' | translate) }}</span>
+                </div>
+        }
+    </div>
+}

package/projects/ng-easycommerce/src/lib/ec-components/checkout-ec/detail-checkout-block-ec/detail-checkout-block-ec.component.ts

@@ -0,0 +1,48 @@
+import { Component, inject } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { EcCurrencySymbolPipe } from '../../../ec-pipe';
+import { CheckoutService } from '../../../ec-services';
+import { AsyncPipe } from '@angular/common';
+@Component({
+    selector: 'app-detail-checkout-block-ec',
+    standalone: true,
+    imports: [TranslateModule, EcCurrencySymbolPipe, AsyncPipe],
+    templateUrl: './detail-checkout-block-ec.component.html',
+    styleUrl: './detail-checkout-block-ec.component.scss'
+})
+export class DetailCheckoutBlockEcComponent {
+    private _checkoutService: CheckoutService = inject(CheckoutService);
+
+    public data$ = this._checkoutService.associatedData$;
+    public data: any = null
+    getIcon = (data_type: string) => {
+
+        switch (data_type) {
+            case 'coupon': return 'fas fa-ticket-alt fa-3x';
+            case 'discount': return 'fas fa-tags fa-3x';
+            case 'shipment': return 'fas fa-shipping-fast fa-3x';
+            case 'subtotal': return 'fas fa-boxes fa-3x';
+            case 'taxes': return 'fas fa-file-invoice-dollar fa-3x';
+            case 'total': return 'fas fa-shopping-basket fa-3x';
+            default: return 'fas fa-tags fa-3x';
+        }
+
+    }
+    constructor() {
+        this._checkoutService.associatedData$.subscribe(data => {
+            this.data = data.filter((value: any, i: number) => this.checkData(value, i));
+        }
+        );
+    }
+
+    private checkData(data: any, index: number) {
+        switch (data.type) {
+            case 'discount':
+                return (data.amount != 0 && index === 1)
+            case 'coupon':
+                return (data.amount != 0 && index === 1)
+            default:
+                return true
+        }
+    }
+}

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

@@ -0,0 +1,195 @@
+@if(methods$ | async; as methods){
+<div class="container-fluid">
+
+	<div class="row">
+		<div class="col-12">
+			<div class="card ">
+				<div class="card-header text-dark text-center">
+					<h4>{{ 'select-method' | translate }}</h4>
+					<div class="btn-toolbar justify-content-center" role="toolbar" aria-label="Envios toolbar">
+						<div class="" role="group" aria-label="Grupo botones envio">
+							<div class="d-flex align-content-start justify-content-center flex-wrap">
+								@for (method of methods; track $index; let x = $index) {
+								<button type="button" class="btn btn-outline-secondary mx-1 mb-1"(click)="setMethod(method) ; setActive($event)">
+									{{ method.name | translate }}
+								</button>
+								}
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="card-body text-center">
+					@if(methodData$ | async; as method){
+					<div class="row justify-content-center">
+						@if(!loadingInternal){
+							@if(isMP(method.code)){
+								<div class="method-container text-dark">
+									<div class="row">
+										<div class="col-12">
+											<p id="faqs" class="qt px-5 ">{{ method.description }}</p>
+											<p class="px-5">{{ method.instructions }}</p>
+										<app-mp-redirect-ec (ready)="verifyValidate($event)" 	[method]="method"></app-mp-redirect-ec>
+										</div>
+									</div>
+								</div>
+							}
+							<!-- <div class="method-container text-dark text-left" *ngIf="isMPTarjetaDeCredito(method.code)">
+								<div class="row">
+									<div class="col-12">
+										<p id="faqs" class="qt px-5 ">{{ method.description }}</p>
+										<p class="px-5">{{ method.instructions }}</p>
+										<div app-mp-credit-ec (ready)="verifyValidate()" [public_key]="getPK(method)"
+											[user_data]="allData()" [total_amount]="total_amount">
+										</div>
+									</div>
+								</div>
+							</div>
+							<div class="method-container text-dark text-start" *ngIf="isRedirectRedsys(method.code)">
+								<div class="row">
+									<div class="col-12">
+										<ng-container
+											*ngIf="!method.code.includes('bizum') && !method.code.includes('_out_')">
+											<app-redsys-redirect-ec (ready)="verifyValidate($event)" [method]="method"
+												[user_data]="allData()">
+											</app-redsys-redirect-ec>
+										</ng-container>
+										<ng-container
+											*ngIf="method.code.includes('bizum') || method.code.includes('_out_')">
+											<app-redsys-redirect-out-ec (ready)="verifyValidate($event)"
+												[method]="method" [user_data]="allData()">
+											</app-redsys-redirect-out-ec>
+										</ng-container>
+									</div>
+								</div>
+							</div>
+							<div class="method-container text-dark text-start" *ngIf="isRedirectCecaBank(method.code)">
+								<div class="row">
+									<div class="col-12">
+										<app-ceca-redirect-ec (ready)="verifyValidate($event)" [method]="method"
+											[user_data]="allData()">
+										</app-ceca-redirect-ec>
+									</div>
+								</div>
+							</div>
+							<div class="method-container text-dark text-start" *ngIf="isPeyPalExpress(method.code)">
+								<div class="container">
+									<div class="row justify-content-center">
+										<div class="col-12">
+											<app-paypal-express-ec (ready)="verifyValidate($event)" [method]="method"
+												[user_data]="allData()" [total_amount]="total_amount">
+											</app-paypal-express-ec>
+										</div>
+									</div>
+								</div>
+							</div>
+							<div class="method-container text-dark text-start" *ngIf="isMobbex(method.code)">
+								<div class="container">
+									<div class="row justify-content-center">
+										<div class="col-12">
+											<app-mobbex-ec (ready)="verifyValidate($event)" [method]="method"
+												[user_data]="allData()" [paymentServiceInst]="paymentService"
+												[total_amount]="total_amount">
+											</app-mobbex-ec>
+										</div>
+									</div>
+								</div>
+							</div>
+							<div class="method-container text-dark text-start" *ngIf="isBancard(method.code)">
+								<div class="container">
+									<div class="row justify-content-center">
+										<div class="col-12">
+											<app-bancard-ec (ready)="verifyValidate($event)" [method]="method"
+												[user_data]="allData()" [paymentServiceInst]="paymentService"
+												[total_amount]="total_amount">
+											</app-bancard-ec>
+										</div>
+									</div>
+								</div>
+							</div>
+							<div class="method-container text-dark text-start" *ngIf="isDecidir(method.code)">
+								<div class="container">
+									<div class="row justify-content-center">
+										<div class="col-12">
+											<app-decidir-ec (ready)="verifyValidate($event)" [method]="method"
+												[user_data]="allData()" [paymentServiceInst]="paymentService"
+												[total_amount]="total_amount">
+											</app-decidir-ec>
+										</div>
+									</div>
+								</div>
+							</div> -->
+							@if(isMethodOffline(method.code)){
+							<div class="method-container text-dark">
+								<div class="row">
+									<div class="col-12">
+										<app-offline-ec 
+										[method]="method" 
+										[verifyValidate]= "verifyValidate"
+										[setLoading] = "setLoading" />
+									</div>
+								</div>
+							</div>	
+							}
+							
+							<!--
+							<div class="method-container text-dark text-start" *ngIf="isCulqi(method.code)">
+								<div class="container">
+									<div class="row justify-content-center">
+										<div class="col-12">
+											<app-culqi-ec [apiKey]="getPKCulqi(method)" [method]="method"
+												[amount]="total_amount" [customStyle]="true"
+												(ready)="verifyValidate()"></app-culqi-ec>
+										</div>
+									</div>
+								</div>
+							</div>
+							<div class="method-container text-dark text-start" *ngIf="isCatastro(method.code)">
+								<div class="container">
+									<div class="row justify-content-center">
+										<div class="col-12">
+											<app-bancard-catastro-ec (ready)="verifyValidate($event)" [method]="method"
+												[user_data]="allData()" [paymentServiceInst]="paymentService"
+												[total_amount]="total_amount"></app-bancard-catastro-ec>
+										</div>
+									</div>
+								</div>
+							</div>
+							<div class="method-container text-dark text-start" *ngIf="isBamboo(method.code)">
+								<div class="container">
+									<div class="row justify-content-center">
+										<div class="col-12">
+											<app-bamboo-ec (ready)="verifyValidate($event)" [method]="method"
+												[user_data]="allData()" [paymentServiceInst]="paymentService"
+												[total_amount]="total_amount"></app-bamboo-ec>
+										</div>
+									</div>
+								</div>
+							</div> -->
+							@if(isBankTransfer(method.code)){
+								<div class="method-container text-dark">
+									<div class="row">
+										<div class="col-12">
+											<app-bank-transfer-ec 
+												[method]="method" 
+												[verifyValidate]= "verifyValidate"
+												[setLoading] = "setLoading" />
+										</div>
+									</div>
+								</div>
+							}
+						} @else {
+							<app-loading-inline-ec></app-loading-inline-ec>
+						}
+					</div>
+					}
+				</div>
+			</div>
+			<div class="row d-flex flex-row">
+				<div class="col-12 d-flex justify-content-between">
+					<button class="btn btn-primary text-white" (click)="goBack()">{{'back'|translate}}</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+}