-
-
- @if (transferAccount() && !isEditing()) {
-
-
-
DATOS DE CUENTA:
-
-
- Titular:
- {{ transferAccount()?.titular }}
-
-
-
- Entidad:
- {{ transferAccount()?.entidad }}
-
-
-
-
CVU:
-
{{ transferAccount()?.cvu }}
-
- @if (copiedTransferField() === 'cvu') {
-
¡Copiado!
- }
-
-
-
-
Alias:
-
{{ transferAccount()?.alias }}
-
- @if (copiedTransferField() === 'alias') {
-
¡Copiado!
- }
-
+ @if (validationStatus() === 'pending' || validationStatus() === 'error') {
+
+ } @else {
+
-
-
- {{ validationStatus() === 'checking' ? 'Validando pago...' : 'Ya transferí' }}
-
+ @if (transferAccount() && !isEditing()) {
+
+
+
DATOS DE CUENTA:
- @if (validationStatus() === 'pending') {
-
- Todavía no recibimos la transferencia. Podés volver a verificar.
-
- } @else if (validationStatus() === 'error') {
-
- No pudimos validar la transferencia. Intentá nuevamente.
-
- }
-
+
+ Titular:
+ {{ transferAccount()?.titular }}
+
+
+
+ Entidad:
+ {{ transferAccount()?.entidad }}
+
+
+
+
CVU:
+
{{ transferAccount()?.cvu }}
+
+ @if (copiedTransferField() === 'cvu') {
+
¡Copiado!
+ }
+
+
+
+
Alias:
+
{{ transferAccount()?.alias }}
+
+ @if (copiedTransferField() === 'alias') {
+
¡Copiado!
+ }
+
+
+
+
+
+ {{ validationStatus() === 'checking' ? 'Validando pago...' : 'Ya transferí' }}
+
+
+ }
}
diff --git a/src/app/features/store/pages/checkout-page/components/checkout-payment-transfer/checkout-payment-transfer.component.scss b/src/app/features/store/pages/checkout-page/components/checkout-payment-transfer/checkout-payment-transfer.component.scss
index b65c086..def5cf0 100644
--- a/src/app/features/store/pages/checkout-page/components/checkout-payment-transfer/checkout-payment-transfer.component.scss
+++ b/src/app/features/store/pages/checkout-page/components/checkout-payment-transfer/checkout-payment-transfer.component.scss
@@ -115,17 +115,3 @@
height: 100%;
}
}
-
-.payment-validation {
- margin: 0.75rem 0 0;
- font-size: 0.8rem;
- line-height: 1.35;
-
- &--pending {
- color: #8a681d;
- }
-
- &--error {
- color: #b42318;
- }
-}
diff --git a/src/app/features/store/pages/checkout-page/components/checkout-payment-transfer/checkout-payment-transfer.component.ts b/src/app/features/store/pages/checkout-page/components/checkout-payment-transfer/checkout-payment-transfer.component.ts
index f52e02a..29aed7b 100644
--- a/src/app/features/store/pages/checkout-page/components/checkout-payment-transfer/checkout-payment-transfer.component.ts
+++ b/src/app/features/store/pages/checkout-page/components/checkout-payment-transfer/checkout-payment-transfer.component.ts
@@ -1,23 +1,46 @@
-import { ChangeDetectionStrategy, Component, computed, input, output, signal, OnInit, effect, untracked } from '@angular/core';
+import {
+ ChangeDetectionStrategy,
+ Component,
+ computed,
+ input,
+ output,
+ signal,
+ OnInit,
+ effect,
+ untracked,
+} from '@angular/core';
import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
import { IconButtonComponent } from '../../../../../../shared/components/icon-button/icon-button.component';
import { ButtonComponent } from '../../../../../../shared/components/button/button.component';
import { InputComponent } from '../../../../../../shared/components/input/input.component';
-import { TransferAccount, TransferField, TransferValidationStatus } from '../../checkout-page.models';
+import {
+ TransferAccount,
+ TransferField,
+ TransferValidationStatus,
+} from '../../checkout-page.models';
+import { PaymentVerificationErrorComponent } from '../payment-verification-error/payment-verification-error.component';
@Component({
selector: 'app-checkout-payment-transfer',
standalone: true,
- imports: [IconButtonComponent, ButtonComponent, InputComponent, ReactiveFormsModule],
+ imports: [
+ IconButtonComponent,
+ ButtonComponent,
+ InputComponent,
+ ReactiveFormsModule,
+ PaymentVerificationErrorComponent,
+ ],
templateUrl: './checkout-payment-transfer.component.html',
styleUrl: './checkout-payment-transfer.component.scss',
- changeDetection: ChangeDetectionStrategy.OnPush
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CheckoutPaymentTransferComponent implements OnInit {
readonly transferAccount = input
(null);
readonly transferDni = input('');
readonly copiedTransferField = input(null);
readonly validationStatus = input('idle');
+ readonly paymentAmount = input(0);
+ readonly whatsappUrl = input(null);
readonly copyTransferValue = output<{ field: TransferField; value: string }>();
readonly submitDni = output();
@@ -25,7 +48,7 @@ export class CheckoutPaymentTransferComponent implements OnInit {
protected readonly dniControl = new FormControl('', {
nonNullable: true,
- validators: [Validators.required, Validators.pattern(/^\d{7,8}$/)]
+ validators: [Validators.required, Validators.pattern(/^\d{7,8}$/)],
});
protected readonly isEditing = signal(false);
diff --git a/src/app/features/store/pages/checkout-page/components/payment-verification-error/payment-verification-error.component.html b/src/app/features/store/pages/checkout-page/components/payment-verification-error/payment-verification-error.component.html
new file mode 100644
index 0000000..64e0374
--- /dev/null
+++ b/src/app/features/store/pages/checkout-page/components/payment-verification-error/payment-verification-error.component.html
@@ -0,0 +1,17 @@
+
+
+
+
+
No pudimos verificar el pago de {{ formattedAmount() }}.
+
Por favor contactate con nosotros para resolverlo.
+ @if (whatsappUrl()) {
+
+ WhatsApp
+
+ }
+
diff --git a/src/app/features/store/pages/checkout-page/components/payment-verification-error/payment-verification-error.component.scss b/src/app/features/store/pages/checkout-page/components/payment-verification-error/payment-verification-error.component.scss
new file mode 100644
index 0000000..a82da35
--- /dev/null
+++ b/src/app/features/store/pages/checkout-page/components/payment-verification-error/payment-verification-error.component.scss
@@ -0,0 +1,35 @@
+.payment-timeout {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
+ padding-top: 0.85rem;
+
+ &__icon {
+ display: grid;
+ width: 84px;
+ height: 84px;
+ place-items: center;
+ border: 1px solid var(--tenant-danger, #dc3545);
+ border-radius: 50%;
+ color: var(--tenant-danger, #dc3545);
+ font-size: 2.7rem;
+ }
+
+ &__title {
+ max-width: 250px;
+ margin: 1.35rem 0 0;
+ color: var(--tenant-danger, #dc3545);
+ font-size: 1.05rem;
+ font-weight: 700;
+ line-height: 1.3;
+ }
+
+ &__message {
+ max-width: 250px;
+ margin: 2rem 0 1.75rem;
+ color: #666666;
+ font-size: 1rem;
+ line-height: 1.25;
+ }
+}
diff --git a/src/app/features/store/pages/checkout-page/components/payment-verification-error/payment-verification-error.component.ts b/src/app/features/store/pages/checkout-page/components/payment-verification-error/payment-verification-error.component.ts
new file mode 100644
index 0000000..7ec1e4f
--- /dev/null
+++ b/src/app/features/store/pages/checkout-page/components/payment-verification-error/payment-verification-error.component.ts
@@ -0,0 +1,32 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+import { ButtonComponent } from '../../../../../../shared/components/button/button.component';
+
+@Component({
+ selector: 'app-payment-verification-error',
+ standalone: true,
+ imports: [ButtonComponent],
+ templateUrl: './payment-verification-error.component.html',
+ styleUrl: './payment-verification-error.component.scss',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PaymentVerificationErrorComponent {
+ readonly paymentAmount = input(0);
+ readonly whatsappUrl = input(null);
+
+ protected readonly formattedAmount = computed(() =>
+ new Intl.NumberFormat('es-AR', {
+ style: 'currency',
+ currency: 'ARS',
+ maximumFractionDigits: 0,
+ }).format(this.paymentAmount()),
+ );
+
+ protected openWhatsApp(): void {
+ const url = this.whatsappUrl();
+
+ if (url) {
+ window.open(url, '_blank', 'noopener,noreferrer');
+ }
+ }
+}