tbianchini/shopit-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(purchase-status): enhance purchase status page with improved layout and loading states

Browse Source 
feat(styles): unify color variables for better theming consistency
style(simple-layout): adjust card border radius for a cleaner design
This commit is contained in:
ncoronel
2026-07-07 11:55:43 -03:00
parent 910f367851
commit d1e20460ac
6 changed files with 132 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/app/app.ts
View File

@@ -31,12 +31,22 @@ function hexToRgb(hex: string): string {
'[style.--tenant-secondary]': 'tenantSecondaryColor()',
'[style.--tenant-danger]': 'tenantDangerColor()',
'[style.--tenant-success]': 'tenantSuccessColor()',
'[style.--color-primary]': 'tenantPrimaryColor()',
'[style.--color-secondary]': 'tenantSecondaryColor()',
'[style.--color-danger]': 'tenantDangerColor()',
'[style.--color-success]': 'tenantSuccessColor()',
'[style.--tenant-primary-rgb]': 'tenantPrimaryColorRgb()',
'[style.--tenant-secondary-rgb]': 'tenantSecondaryColorRgb()',
'[style.--tenant-danger-rgb]': 'tenantDangerColorRgb()',
'[style.--tenant-success-rgb]': 'tenantSuccessColorRgb()',
'[style.--color-primary-rgb]': 'tenantPrimaryColorRgb()',
'[style.--color-secondary-rgb]': 'tenantSecondaryColorRgb()',
'[style.--color-danger-rgb]': 'tenantDangerColorRgb()',
'[style.--color-success-rgb]': 'tenantSuccessColorRgb()',
'[style.--tenant-header-bg]': 'tenantHeaderBgColor()',
'[style.--tenant-footer-bg]': 'tenantFooterBgColor()'
'[style.--tenant-footer-bg]': 'tenantFooterBgColor()',
'[style.--color-header-bg]': 'tenantHeaderBgColor()',
'[style.--color-footer-bg]': 'tenantFooterBgColor()'
}
})
export class App {
@@ -78,5 +88,4 @@ export class App {
this.tenantService.tenant()?.footer_bg_color ??
DEFAULT_TENANT_BRANDING.footerBgColor
);
}
}

2
src/app/core/layout/simple-layout/simple-layout.component.scss
View File

@@ -15,7 +15,7 @@
}
.simple-layout__card {
border-radius: 1.5rem;
border-radius: 5px;
overflow: hidden;
}

41
src/app/features/store/pages/purchase-status-page/purchase-status-page.component.html
View File

@@ -5,28 +5,39 @@
</div>
<h2 class="status-content__title">Cargando estado...</h2>
} @else if (status() === 'approved') {
<div class="status-content__icon status-content__icon--success">
<i class="fa-solid fa-check"></i>
<div class="status-content__section status-content__section--primary">
<div class="status-content__icon status-content__icon--success">
<i class="fa-solid fa-check"></i>
</div>
<h2 class="status-content__title">COMPRA REALIZADA!</h2>
<p class="status-content__subtitle">Tu compra fue realizada con &eacute;xito</p>
</div>
<h2 class="status-content__title">COMPRA REALIZADA!</h2>
<p class="status-content__subtitle">Tu compra fue realizada con éxito</p>
<hr class="status-content__divider" />
<p class="status-content__message">Comunicate con nosotros para coordinar el envío.</p>
<a [href]="getWhatsAppLink()" target="_blank" rel="noopener noreferrer" class="status-content__button">
<i class="fa-brands fa-whatsapp"></i> WhatsApp
</a>
<div class="status-content__section status-content__section--secondary">
<p class="status-content__message">Comunicate con nosotros para coordinar el env&iacute;o.</p>
<app-button
type="button"
variant="secondary"
hostClass="status-content__button d-block"
buttonClass="status-content__button-control d-inline-flex align-items-center justify-content-center gap-2 py-2"
(click)="openWhatsApp()"
>
<i class="fa-brands fa-whatsapp status-content__button-icon"></i>
<span>WhatsApp</span>
</app-button>
</div>
} @else if (status() === 'pending') {
<div class="status-content__icon status-content__icon--warning">
<i class="fa-solid fa-clock"></i>
</div>
<h2 class="status-content__title">PAGO PENDIENTE</h2>
<p class="status-content__subtitle">Estamos esperando la confirmación de tu pago</p>
<p class="status-content__subtitle">Estamos esperando la confirmaci&oacute;n de tu pago</p>
<hr class="status-content__divider" />
<p class="status-content__message">Una vez que el pago sea procesado, actualizaremos el estado de tu compra.</p>
} @else {
<div class="status-content__icon status-content__icon--error">
@@ -35,4 +46,4 @@
<h2 class="status-content__title">HUBO UN ERROR</h2>
<p class="status-content__subtitle">No pudimos obtener el estado de tu compra</p>
}
</div>
</div>

94
src/app/features/store/pages/purchase-status-page/purchase-status-page.component.scss
View File

@@ -1,25 +1,49 @@
:host {
--color-primary: var(--tenant-primary, #6376f3);
--color-primary-rgb: var(--tenant-primary-rgb, 99, 118, 243);
}
.status-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
width: 100%;
text-align: center;
padding: 2rem 1rem;
&__section {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
&__section--primary {
gap: 0.75rem;
}
&__section--secondary {
gap: 1rem;
}
&__icon {
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 80px;
width: 92px;
height: 92px;
border-radius: 50%;
font-size: 2rem;
margin-bottom: 1rem;
margin-bottom: 0.25rem;
i {
line-height: 1;
}
&--success {
background-color: rgba(var(--color-success-rgb), 0.1);
color: var(--color-success);
border: 2px solid var(--color-success);
background-color: color-mix(in srgb, white 92%, var(--color-primary));
color: var(--color-primary) !important;
border: 1.5px solid color-mix(in srgb, white 20%, var(--color-primary));
}
&--warning {
@@ -35,52 +59,58 @@
}
&--loading {
background-color: rgba(var(--color-primary-rgb), 0.1);
background-color: color-mix(in srgb, white 90%, var(--color-primary));
color: var(--color-primary);
border: 2px solid var(--color-primary);
}
}
&__title {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-primary);
margin: 0;
font-size: 16px;
font-weight: 700;
line-height: 1.25;
color: var(--color-primary) !important;
}
&__subtitle {
font-size: 1rem;
color: var(--color-text-muted);
margin: 0;
font-size: 13px;
font-weight: 700;
line-height: 1.35;
color: #8a8a8a;
}
&__divider {
width: 100%;
border: none;
border-top: 1px solid var(--color-border);
margin: 1.5rem 0;
display: block;
width: min(100%, 410px);
height: 1px;
background-color: #d9d9d9 !important;
border: 0;
opacity: 1;
margin: 1.75rem 0 1.5rem;
}
&__message {
font-size: 0.9rem;
max-width: 280px;
margin: 0;
font-size: 13px;
font-weight: 325;
line-height: 1.45;
color: var(--color-text);
margin-bottom: 1.5rem;
}
&__button {
width: auto;
}
&__button-icon {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border-radius: var(--border-radius-md);
background-color: #25D366; /* WhatsApp color */
color: white;
font-weight: 600;
text-decoration: none;
transition: background-color 0.2s ease;
&:hover {
background-color: #1EBE5D;
}
justify-content: center;
width: 20px;
height: 20px;
font-size: 20px;
line-height: 1;
}
}
}

26
src/app/features/store/pages/purchase-status-page/purchase-status-page.component.ts
View File

@@ -5,11 +5,12 @@ import { firstValueFrom } from 'rxjs';
import { environment } from '../../../../../environments/environment';
import { TenantService } from '../../../../core/services/tenant.service';
import { ButtonComponent } from '../../../../shared/components/button/button.component';
@Component({
selector: 'app-purchase-status-page',
standalone: true,
imports: [],
imports: [ButtonComponent],
templateUrl: './purchase-status-page.component.html',
styleUrl: './purchase-status-page.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush
@@ -36,21 +37,14 @@ export class PurchaseStatusPageComponent implements OnInit {
}
private async checkPurchaseStatus(tenantCode: string, purchaseId: string): Promise<void> {
// MOCK DATA FOR DESIGN TESTING
try {
this.isLoading.set(true);
const response = await firstValueFrom(
this.http.get<{ data: { payment_status: string } }>(`${environment.url}tenants/${tenantCode}/compras/${purchaseId}`)
);
// Simular un delay de red
await new Promise((resolve) => setTimeout(resolve, 500));
const paymentStatus = response?.data?.payment_status;
if (paymentStatus === 'approved') {
this.status.set('approved');
} else {
this.status.set('pending');
}
this.status.set('approved'); // Cambiar a 'pending' o 'error' para probar otros estados
} catch (error) {
console.error('Failed to fetch purchase status:', error);
this.status.set('error');
} finally {
this.isLoading.set(false);
@@ -59,7 +53,11 @@ export class PurchaseStatusPageComponent implements OnInit {
protected getWhatsAppLink(): string {
const phone = '5493416658247';
const message = encodeURIComponent('Hola! Mi compra fue realizada con éxito.');
const message = encodeURIComponent('Hola! Mi compra fue realizada con \u00e9xito.');
return `https://wa.me/${phone}?text=${message}`;
}
}
protected openWhatsApp(): void {
window.open(this.getWhatsAppLink(), '_blank', 'noopener,noreferrer');
}
}

29
src/styles.scss
View File

@@ -1,4 +1,3 @@
@use "./fonts";
@import "@fortawesome/fontawesome-free/css/all.min.css";
@@ -9,14 +8,24 @@
:root, app-root {
--bs-body-font-family: "Gotham", sans-serif;
--bs-primary: var(--tenant-primary);
--bs-primary-rgb: var(--tenant-primary-rgb);
--bs-secondary: var(--tenant-secondary);
--bs-secondary-rgb: var(--tenant-secondary-rgb);
--bs-danger: var(--tenant-danger);
--bs-danger-rgb: var(--tenant-danger-rgb);
--bs-success: var(--tenant-success);
--bs-success-rgb: var(--tenant-success-rgb);
--color-primary: var(--tenant-primary);
--color-primary-rgb: var(--tenant-primary-rgb);
--color-secondary: var(--tenant-secondary);
--color-secondary-rgb: var(--tenant-secondary-rgb);
--color-danger: var(--tenant-danger);
--color-danger-rgb: var(--tenant-danger-rgb);
--color-success: var(--tenant-success);
--color-success-rgb: var(--tenant-success-rgb);
--color-header-bg: var(--tenant-header-bg);
--color-footer-bg: var(--tenant-footer-bg);
--bs-primary: var(--color-primary);
--bs-primary-rgb: var(--color-primary-rgb);
--bs-secondary: var(--color-secondary);
--bs-secondary-rgb: var(--color-secondary-rgb);
--bs-danger: var(--color-danger);
--bs-danger-rgb: var(--color-danger-rgb);
--bs-success: var(--color-success);
--bs-success-rgb: var(--color-success-rgb);
}
label {
@@ -24,4 +33,4 @@ label {
margin-bottom: 0.375rem;
font-size: 13px;
font-weight: 400;
}
}