diff --git a/src/app/features/store/pages/checkout-page/checkout-payment-step.component.html b/src/app/features/store/pages/checkout-page/checkout-payment-step.component.html index b740468..d6cf2ce 100644 --- a/src/app/features/store/pages/checkout-page/checkout-payment-step.component.html +++ b/src/app/features/store/pages/checkout-page/checkout-payment-step.component.html @@ -40,90 +40,15 @@

Cargando información de pago...

} @else if (selectedPaymentMethod() === 'qr') { -
-

Ingresa a tu billetera y escanea el siguiente QR

-
- -
- @if (qrData()) { - - } @else { - - - - } -
-
+ } @else if (selectedPaymentMethod() === 'transfer') { -
-

Transferi a la siguiente cuenta desde cualquier billetera

-
- - -
+ } @else { -
-

Descarga la app de TelePagos para finalizar la compra

-
- -
-
- - - Disponible en - Google Play - -
- -
- - - Descargalo en - App Store - -
-
-
+ } diff --git a/src/app/features/store/pages/checkout-page/checkout-payment-step.component.scss b/src/app/features/store/pages/checkout-page/checkout-payment-step.component.scss index c745e9e..7f41e3d 100644 --- a/src/app/features/store/pages/checkout-page/checkout-payment-step.component.scss +++ b/src/app/features/store/pages/checkout-page/checkout-payment-step.component.scss @@ -134,173 +134,5 @@ line-height: 1.35; } - &__divider { - width: 100%; - max-width: 220px; - height: 1px; - margin: 1.2rem 0 1.45rem; - background: #dddddd; - } - - &__account { - width: 100%; - display: grid; - gap: 0.75rem; - color: #7a7a7a; - font-size: 12px; - } - - &__eyebrow { - margin: 0; - color: #838383; - font-size: 12px; - font-weight: 325; - letter-spacing: 0.06em; - } -} - -.payment-detail { - display: grid; - grid-template-columns: auto auto; - justify-content: center; - gap: 0.35rem; - align-items: center; - font-size: 12px; - - &--copy { - grid-template-columns: auto auto auto; - } - - &__label { - color: #8a8a8a; - font-weight: 325; - } - - &__value { - color: #5e5e5e; - font-weight: 500; - } - - &__feedback { - display: block; - margin-top: -0.25rem; - color: var(--tenant-primary, #6376f3); - font-size: 0.78rem; - font-weight: 700; - } -} - -.qr-code { - position: relative; - width: min(170px, 100%); - aspect-ratio: 1; - border: 8px solid #ffffff; - background-color: #ffffff; - background-image: - linear-gradient( - 90deg, - rgba(17, 17, 17, 0.95) 0 14%, - transparent 14% 28%, - rgba(17, 17, 17, 0.95) 28% 42%, - transparent 42% 56%, - rgba(17, 17, 17, 0.95) 56% 70%, - transparent 70% 84%, - rgba(17, 17, 17, 0.95) 84% 100% - ), - linear-gradient( - rgba(17, 17, 17, 0.95) 0 14%, - transparent 14% 28%, - rgba(17, 17, 17, 0.95) 28% 42%, - transparent 42% 56%, - rgba(17, 17, 17, 0.95) 56% 70%, - transparent 70% 84%, - rgba(17, 17, 17, 0.95) 84% 100% - ); - background-size: 18px 18px; - background-position: 0 0, 9px 9px; - display: flex; - justify-content: center; - align-items: center; - - qrcode { - display: flex; - justify-content: center; - align-items: center; - width: 100%; - height: 100%; - - ::ng-deep canvas, - ::ng-deep img { - display: block !important; - width: 100% !important; - height: 100% !important; - max-width: 100%; - max-height: 100%; - } - } -} - -.qr-code__finder { - position: absolute; - width: 38px; - height: 38px; - border: 5px solid #111111; - background: #ffffff; - box-shadow: inset 0 0 0 8px #ffffff, inset 0 0 0 14px #111111; - - &--tl { - top: 10px; - left: 10px; - } - - &--tr { - top: 10px; - right: 10px; - } - - &--bl { - bottom: 10px; - left: 10px; - } -} - -.store-badges { - width: 100%; - max-width: 210px; - display: grid; - gap: 0.8rem; -} - -.store-badge { - display: flex; - align-items: center; - gap: 0.75rem; - padding: 0.75rem 0.95rem; - border-radius: 0.85rem; - background: #111111; - color: #ffffff; - box-shadow: 0 10px 24px rgba(17, 17, 17, 0.16); - - i { - font-size: 1.35rem; - } - - &__text { - display: grid; - text-align: left; - line-height: 1.1; - - small { - font-size: 0.62rem; - letter-spacing: 0.05em; - text-transform: uppercase; - opacity: 0.8; - } - - strong { - font-size: 1rem; - font-weight: 700; - } - } } diff --git a/src/app/features/store/pages/checkout-page/checkout-payment-step.component.ts b/src/app/features/store/pages/checkout-page/checkout-payment-step.component.ts index 9c3f8c4..2f1f505 100644 --- a/src/app/features/store/pages/checkout-page/checkout-payment-step.component.ts +++ b/src/app/features/store/pages/checkout-page/checkout-payment-step.component.ts @@ -1,14 +1,15 @@ import { ChangeDetectionStrategy, Component, input, output } from '@angular/core'; import { ButtonComponent } from '../../../../shared/components/button/button.component'; -import { IconButtonComponent } from '../../../../shared/components/icon-button/icon-button.component'; -import { QRCodeComponent } from '../../../../shared/components/qrcode/qrcode.component'; +import { CheckoutPaymentQrComponent } from './components/checkout-payment-qr/checkout-payment-qr.component'; +import { CheckoutPaymentTelepagosComponent } from './components/checkout-payment-telepagos/checkout-payment-telepagos.component'; +import { CheckoutPaymentTransferComponent } from './components/checkout-payment-transfer/checkout-payment-transfer.component'; import { PaymentMethod, PaymentMethodOption, TransferAccount, TransferField } from './checkout-page.models'; @Component({ selector: 'app-checkout-payment-step', standalone: true, - imports: [ButtonComponent, IconButtonComponent, QRCodeComponent], + imports: [ButtonComponent, CheckoutPaymentQrComponent, CheckoutPaymentTelepagosComponent, CheckoutPaymentTransferComponent], templateUrl: './checkout-payment-step.component.html', styleUrl: './checkout-payment-step.component.scss', changeDetection: ChangeDetectionStrategy.OnPush diff --git a/src/app/features/store/pages/checkout-page/components/checkout-payment-qr/checkout-payment-qr.component.html b/src/app/features/store/pages/checkout-page/components/checkout-payment-qr/checkout-payment-qr.component.html new file mode 100644 index 0000000..06e008d --- /dev/null +++ b/src/app/features/store/pages/checkout-page/components/checkout-payment-qr/checkout-payment-qr.component.html @@ -0,0 +1,14 @@ +
+

Ingresa a tu billetera y escanea el siguiente QR

+
+ +
+ @if (qrData()) { + + } @else { + + + + } +
+
diff --git a/src/app/features/store/pages/checkout-page/components/checkout-payment-qr/checkout-payment-qr.component.scss b/src/app/features/store/pages/checkout-page/components/checkout-payment-qr/checkout-payment-qr.component.scss new file mode 100644 index 0000000..4c13ebc --- /dev/null +++ b/src/app/features/store/pages/checkout-page/components/checkout-payment-qr/checkout-payment-qr.component.scss @@ -0,0 +1,105 @@ +.payment-panel__card { + width: 100%; + max-width: 290px; + min-height: 269px; + padding: 1.5rem 1.75rem; + border-radius: 5px; + background: #ffffff; + color: #666666; + box-shadow: 0 0 0 1px #f1f1f1; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; +} + +.payment-panel__title { + max-width: 18rem; + margin: 0; + color: #8a8a8a; + font-size: 13px; + font-weight: 700; + line-height: 1.35; +} + +.payment-panel__divider { + width: 100%; + max-width: 220px; + height: 1px; + margin: 1.2rem 0 1.45rem; + background: #dddddd; +} + +.qr-code { + position: relative; + width: min(170px, 100%); + aspect-ratio: 1; + border: 8px solid #ffffff; + background-color: #ffffff; + background-image: + linear-gradient( + 90deg, + rgba(17, 17, 17, 0.95) 0 14%, + transparent 14% 28%, + rgba(17, 17, 17, 0.95) 28% 42%, + transparent 42% 56%, + rgba(17, 17, 17, 0.95) 56% 70%, + transparent 70% 84%, + rgba(17, 17, 17, 0.95) 84% 100% + ), + linear-gradient( + rgba(17, 17, 17, 0.95) 0 14%, + transparent 14% 28%, + rgba(17, 17, 17, 0.95) 28% 42%, + transparent 42% 56%, + rgba(17, 17, 17, 0.95) 56% 70%, + transparent 70% 84%, + rgba(17, 17, 17, 0.95) 84% 100% + ); + background-size: 18px 18px; + background-position: 0 0, 9px 9px; + display: flex; + justify-content: center; + align-items: center; + + qrcode { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + + ::ng-deep canvas, + ::ng-deep img { + display: block !important; + width: 100% !important; + height: 100% !important; + max-width: 100%; + max-height: 100%; + } + } +} + +.qr-code__finder { + position: absolute; + width: 38px; + height: 38px; + border: 5px solid #111111; + background: #ffffff; + box-shadow: inset 0 0 0 8px #ffffff, inset 0 0 0 14px #111111; + + &--tl { + top: 10px; + left: 10px; + } + + &--tr { + top: 10px; + right: 10px; + } + + &--bl { + bottom: 10px; + left: 10px; + } +} diff --git a/src/app/features/store/pages/checkout-page/components/checkout-payment-qr/checkout-payment-qr.component.ts b/src/app/features/store/pages/checkout-page/components/checkout-payment-qr/checkout-payment-qr.component.ts new file mode 100644 index 0000000..941eb0c --- /dev/null +++ b/src/app/features/store/pages/checkout-page/components/checkout-payment-qr/checkout-payment-qr.component.ts @@ -0,0 +1,14 @@ +import { ChangeDetectionStrategy, Component, input } from '@angular/core'; +import { QRCodeComponent } from '../../../../../../shared/components/qrcode/qrcode.component'; + +@Component({ + selector: 'app-checkout-payment-qr', + standalone: true, + imports: [QRCodeComponent], + templateUrl: './checkout-payment-qr.component.html', + styleUrl: './checkout-payment-qr.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class CheckoutPaymentQrComponent { + readonly qrData = input(null); +} diff --git a/src/app/features/store/pages/checkout-page/components/checkout-payment-telepagos/checkout-payment-telepagos.component.html b/src/app/features/store/pages/checkout-page/components/checkout-payment-telepagos/checkout-payment-telepagos.component.html new file mode 100644 index 0000000..3e21971 --- /dev/null +++ b/src/app/features/store/pages/checkout-page/components/checkout-payment-telepagos/checkout-payment-telepagos.component.html @@ -0,0 +1,22 @@ +
+

Descarga la app de TelePagos para finalizar la compra

+
+ +
+
+ + + Disponible en + Google Play + +
+ +
+ + + Descargalo en + App Store + +
+
+
diff --git a/src/app/features/store/pages/checkout-page/components/checkout-payment-telepagos/checkout-payment-telepagos.component.scss b/src/app/features/store/pages/checkout-page/components/checkout-payment-telepagos/checkout-payment-telepagos.component.scss new file mode 100644 index 0000000..3902980 --- /dev/null +++ b/src/app/features/store/pages/checkout-page/components/checkout-payment-telepagos/checkout-payment-telepagos.component.scss @@ -0,0 +1,71 @@ +.payment-panel__card { + width: 100%; + max-width: 290px; + min-height: 269px; + padding: 1.5rem 1.75rem; + border-radius: 5px; + background: #ffffff; + color: #666666; + box-shadow: 0 0 0 1px #f1f1f1; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; +} + +.payment-panel__title { + max-width: 18rem; + margin: 0; + color: #8a8a8a; + font-size: 13px; + font-weight: 700; + line-height: 1.35; +} + +.payment-panel__divider { + width: 100%; + max-width: 220px; + height: 1px; + margin: 1.2rem 0 1.45rem; + background: #dddddd; +} + +.store-badges { + width: 100%; + max-width: 210px; + display: grid; + gap: 0.8rem; +} + +.store-badge { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.75rem 0.95rem; + border-radius: 0.85rem; + background: #111111; + color: #ffffff; + box-shadow: 0 10px 24px rgba(17, 17, 17, 0.16); + + i { + font-size: 1.35rem; + } + + &__text { + display: grid; + text-align: left; + line-height: 1.1; + + small { + font-size: 0.62rem; + letter-spacing: 0.05em; + text-transform: uppercase; + opacity: 0.8; + } + + strong { + font-size: 1rem; + font-weight: 700; + } + } +} diff --git a/src/app/features/store/pages/checkout-page/components/checkout-payment-telepagos/checkout-payment-telepagos.component.ts b/src/app/features/store/pages/checkout-page/components/checkout-payment-telepagos/checkout-payment-telepagos.component.ts new file mode 100644 index 0000000..0a35b23 --- /dev/null +++ b/src/app/features/store/pages/checkout-page/components/checkout-payment-telepagos/checkout-payment-telepagos.component.ts @@ -0,0 +1,11 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; + +@Component({ + selector: 'app-checkout-payment-telepagos', + standalone: true, + imports: [], + templateUrl: './checkout-payment-telepagos.component.html', + styleUrl: './checkout-payment-telepagos.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class CheckoutPaymentTelepagosComponent {} diff --git a/src/app/features/store/pages/checkout-page/components/checkout-payment-transfer/checkout-payment-transfer.component.html b/src/app/features/store/pages/checkout-page/components/checkout-payment-transfer/checkout-payment-transfer.component.html new file mode 100644 index 0000000..ca7e67c --- /dev/null +++ b/src/app/features/store/pages/checkout-page/components/checkout-payment-transfer/checkout-payment-transfer.component.html @@ -0,0 +1,46 @@ +
+

Transferi a la siguiente cuenta desde cualquier billetera

+
+ + +
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 new file mode 100644 index 0000000..23f1597 --- /dev/null +++ b/src/app/features/store/pages/checkout-page/components/checkout-payment-transfer/checkout-payment-transfer.component.scss @@ -0,0 +1,78 @@ +.payment-panel__card { + width: 100%; + max-width: 290px; + min-height: 269px; + padding: 1.5rem 1.75rem; + border-radius: 5px; + background: #ffffff; + color: #666666; + box-shadow: 0 0 0 1px #f1f1f1; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; +} + +.payment-panel__title { + max-width: 18rem; + margin: 0; + color: #8a8a8a; + font-size: 13px; + font-weight: 700; + line-height: 1.35; +} + +.payment-panel__divider { + width: 100%; + max-width: 220px; + height: 1px; + margin: 1.2rem 0 1.45rem; + background: #dddddd; +} + +.payment-panel__account { + width: 100%; + display: grid; + gap: 0.75rem; + color: #7a7a7a; + font-size: 12px; +} + +.payment-panel__eyebrow { + margin: 0; + color: #838383; + font-size: 12px; + font-weight: 325; + letter-spacing: 0.06em; +} + +.payment-detail { + display: grid; + grid-template-columns: auto auto; + justify-content: center; + gap: 0.35rem; + align-items: center; + font-size: 12px; + + &--copy { + grid-template-columns: auto auto auto; + } + + &__label { + color: #8a8a8a; + font-weight: 325; + } + + &__value { + color: #5e5e5e; + font-weight: 500; + } + + &__feedback { + display: block; + margin-top: -0.25rem; + color: var(--tenant-primary, #6376f3); + font-size: 0.78rem; + font-weight: 700; + } +} 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 new file mode 100644 index 0000000..cf11138 --- /dev/null +++ b/src/app/features/store/pages/checkout-page/components/checkout-payment-transfer/checkout-payment-transfer.component.ts @@ -0,0 +1,22 @@ +import { ChangeDetectionStrategy, Component, input, output } from '@angular/core'; +import { IconButtonComponent } from '../../../../../../shared/components/icon-button/icon-button.component'; +import { TransferAccount, TransferField } from '../../checkout-page.models'; + +@Component({ + selector: 'app-checkout-payment-transfer', + standalone: true, + imports: [IconButtonComponent], + templateUrl: './checkout-payment-transfer.component.html', + styleUrl: './checkout-payment-transfer.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class CheckoutPaymentTransferComponent { + readonly transferAccount = input.required(); + readonly copiedTransferField = input(null); + + readonly copyTransferValue = output<{ field: TransferField; value: string }>(); + + protected requestCopy(field: TransferField, value: string): void { + this.copyTransferValue.emit({ field, value }); + } +}