{{ title() }}
+
@if (hasBackButton()) {
(HeaderType.LogoWithUserAccountButton);
+ customAction = input<(() => boolean) | null>(null);
readonly buttonColorSchemeMap: Partial<
Record
diff --git a/src/app/components/top-up/calculator/top-up-calculator.component.html b/src/app/components/top-up/calculator/top-up-calculator.component.html
new file mode 100644
index 0000000..7d21b36
--- /dev/null
+++ b/src/app/components/top-up/calculator/top-up-calculator.component.html
@@ -0,0 +1,67 @@
+
+
+
+
+
+
+ @if (currentBalance().value.toString() !== newBalance().toString()) {
+
+ Você tem R$ {{ currentBalance().value }} de saldo. Após
+ a transação, você ficará com R$ {{ newBalance() }}.
+
+ } @else {
+
+ Você tem R$ {{ currentBalance().value }} de saldo.
+
+ }
+
+
diff --git a/src/app/components/top-up/calculator/top-up-calculator.component.ts b/src/app/components/top-up/calculator/top-up-calculator.component.ts
new file mode 100644
index 0000000..80d012d
--- /dev/null
+++ b/src/app/components/top-up/calculator/top-up-calculator.component.ts
@@ -0,0 +1,114 @@
+import { NgIf } from '@angular/common';
+import {
+ ChangeDetectionStrategy,
+ Component,
+ computed,
+ input,
+ model,
+ output,
+ signal,
+} from '@angular/core';
+import {
+ AbstractControl,
+ FormControl,
+ FormsModule,
+ ReactiveFormsModule,
+ ValidationErrors,
+ ValidatorFn,
+ Validators,
+} from '@angular/forms';
+
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideMoveRight } from '@ng-icons/lucide';
+import { NgxCurrencyDirective, NgxCurrencyInputMode } from 'ngx-currency';
+
+import { MealBalanceBreakdownComponent } from '@rusbe/components/meal-balance-breakdown/meal-balance-breakdown.component';
+import { WarningCardComponent } from '@rusbe/components/warning-card/warning-card.component';
+import { GeneralGoodsPartialGrantBalance } from '@rusbe/services/general-goods/general-goods.service';
+import { BrlCurrency } from '@rusbe/types/brl-currency';
+
+@Component({
+ selector: 'rusbe-top-up-calculator',
+ imports: [
+ NgIf,
+ MealBalanceBreakdownComponent,
+ FormsModule,
+ NgxCurrencyDirective,
+ ReactiveFormsModule,
+ WarningCardComponent,
+ NgIcon,
+ ],
+ templateUrl: './top-up-calculator.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ host: {
+ class: 'flex flex-grow flex-col items-start justify-start',
+ },
+ viewProviders: [
+ provideIcons({
+ lucideMoveRight,
+ }),
+ ],
+})
+export class TopUpCalculatorComponent {
+ submitted = output();
+
+ value = model.required();
+ currentBalance = input.required();
+
+ inputDisabled = signal(false);
+
+ newBalance = computed(() => {
+ const topUpValueFloat = parseFloat(this.value());
+ const currentBalance = this.currentBalance().value;
+
+ if (isNaN(topUpValueFloat)) return currentBalance;
+
+ return currentBalance.add(BrlCurrency.fromNumber(topUpValueFloat));
+ });
+
+ readonly topUpValue = new FormControl(
+ { value: '0', disabled: this.inputDisabled() },
+ {
+ validators: [
+ Validators.required,
+ lowTopUpValueValidator,
+ highTopUpValueValidator,
+ ],
+ },
+ );
+
+ readonly maskConfig = {
+ align: 'left',
+ allowNegative: false,
+ allowZero: true,
+ decimal: ',',
+ precision: 2,
+ prefix: '',
+ suffix: '',
+ thousands: '',
+ nullable: true,
+ min: null,
+ max: null,
+ inputMode: NgxCurrencyInputMode.Financial,
+ };
+
+ onSubmitValue() {
+ this.topUpValue.markAsTouched();
+ if (this.topUpValue.invalid) return;
+ this.submitted.emit(true);
+ }
+}
+
+const lowTopUpValueValidator: ValidatorFn = (
+ control: AbstractControl,
+): ValidationErrors | null => {
+ const value = control.value;
+ return value < 1 ? { lowTopUpValue: true } : null;
+};
+
+const highTopUpValueValidator: ValidatorFn = (
+ control: AbstractControl,
+): ValidationErrors | null => {
+ const value = control.value;
+ return value > 100 ? { highTopUpValue: true } : null;
+};
diff --git a/src/app/components/top-up/credit-card/top-up-credit-card.component.html b/src/app/components/top-up/credit-card/top-up-credit-card.component.html
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/top-up/credit-card/top-up-credit-card.component.ts b/src/app/components/top-up/credit-card/top-up-credit-card.component.ts
new file mode 100644
index 0000000..0d49a93
--- /dev/null
+++ b/src/app/components/top-up/credit-card/top-up-credit-card.component.ts
@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+ selector: 'rusbe-top-up-credit-card',
+ imports: [],
+ templateUrl: './top-up-credit-card.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TopUpCreditCardComponent {}
diff --git a/src/app/components/top-up/in-loco-helper/top-up-in-loco-helper.component.html b/src/app/components/top-up/in-loco-helper/top-up-in-loco-helper.component.html
new file mode 100644
index 0000000..6873d44
--- /dev/null
+++ b/src/app/components/top-up/in-loco-helper/top-up-in-loco-helper.component.html
@@ -0,0 +1,48 @@
+
diff --git a/src/app/components/top-up/in-loco-helper/top-up-in-loco-helper.component.ts b/src/app/components/top-up/in-loco-helper/top-up-in-loco-helper.component.ts
new file mode 100644
index 0000000..66b2284
--- /dev/null
+++ b/src/app/components/top-up/in-loco-helper/top-up-in-loco-helper.component.ts
@@ -0,0 +1,56 @@
+import {
+ ChangeDetectionStrategy,
+ Component,
+ computed,
+ input,
+ output,
+} from '@angular/core';
+
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideMoveRight } from '@ng-icons/lucide';
+
+import { LogoComponent } from '@rusbe/components/logo/logo.component';
+import { BrlCurrency } from '@rusbe/types/brl-currency';
+
+import { PaymentMethods } from '../payment-method/payment-method.component';
+
+@Component({
+ selector: 'rusbe-top-up-in-loco-helper',
+ imports: [LogoComponent, NgIcon],
+ templateUrl: './top-up-in-loco-helper.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ viewProviders: [
+ provideIcons({
+ lucideMoveRight,
+ }),
+ ],
+ host: {
+ class: 'flex flex-grow flex-col items-start justify-start',
+ },
+})
+export class TopUpInLocoHelperComponent {
+ backClicked = output();
+
+ cpf = input.required();
+ name = input.required();
+ topUpValue = input.required();
+ paymentMethod = input.required();
+
+ parsedCpf = computed(() => this.parseCpfNumber());
+ parsedValue = computed(() =>
+ BrlCurrency.fromNumber(parseFloat(this.topUpValue())),
+ );
+
+ onBackClicked(): void {
+ this.backClicked.emit();
+ }
+
+ private parseCpfNumber(): string {
+ const cpfNumber = this.cpf();
+
+ if (!cpfNumber) return '';
+ if (cpfNumber.length !== 11) return cpfNumber;
+
+ return cpfNumber.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3-$4');
+ }
+}
diff --git a/src/app/components/top-up/payment-method/payment-method.component.html b/src/app/components/top-up/payment-method/payment-method.component.html
new file mode 100644
index 0000000..e0c9f18
--- /dev/null
+++ b/src/app/components/top-up/payment-method/payment-method.component.html
@@ -0,0 +1,29 @@
+
+
+ @for (paymentMethod of inAppPaymentMethods; track $index) {
+
+ }
+
+
+
+ @for (paymentMethod of inLocoPaymentMethods; track $index) {
+
+ }
+
+
diff --git a/src/app/components/top-up/payment-method/payment-method.component.ts b/src/app/components/top-up/payment-method/payment-method.component.ts
new file mode 100644
index 0000000..97d930a
--- /dev/null
+++ b/src/app/components/top-up/payment-method/payment-method.component.ts
@@ -0,0 +1,79 @@
+import { ChangeDetectionStrategy, Component, output } from '@angular/core';
+
+import { provideIcons } from '@ng-icons/core';
+import {
+ lucideBanknote,
+ lucideChevronRight,
+ lucideCreditCard,
+ lucideEraser,
+ lucideFullscreen,
+ lucideListStart,
+ lucidePalette,
+ lucideRotateCcw,
+ lucideUtensils,
+} from '@ng-icons/lucide';
+
+import { CardButtonComponent } from '@rusbe/components/cards/card-button/card-button.component';
+import { CardGroupComponent } from '@rusbe/components/cards/card-group/card-group.component';
+import { GeneralGoodsTransactionType } from '@rusbe/services/general-goods/general-goods.service';
+
+@Component({
+ selector: 'rusbe-top-up-payment-method',
+ imports: [CardGroupComponent, CardButtonComponent],
+ templateUrl: './payment-method.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ viewProviders: [
+ provideIcons({
+ lucidePalette,
+ lucideUtensils,
+ lucideListStart,
+ lucideFullscreen,
+ lucideRotateCcw,
+ lucideEraser,
+ lucideChevronRight,
+ lucideCreditCard,
+ lucideBanknote,
+ }),
+ ],
+})
+export class TopUpPaymentMethodComponent {
+ paymentMethodChanged = output();
+ paymentLocationChanged = output();
+
+ readonly inAppPaymentMethods = Object.values(GeneralGoodsTransactionType);
+ readonly inLocoPaymentMethods = INLOCO_PAYMENT_METHODS;
+ readonly PAYMENT_METHOD_MESSAGES = {
+ [GeneralGoodsTransactionType.Pix]:
+ 'Use o código gerado para pagar usando Pix.',
+ [GeneralGoodsTransactionType.CreditCard]:
+ 'Use seu cartão de crédito para completar a transação.',
+ };
+
+ readonly PAYMENT_METHOD_ICONS = {
+ [GeneralGoodsTransactionType.Pix]: 'pix',
+ [GeneralGoodsTransactionType.CreditCard]: 'bootstrapCreditCard',
+ 'Em espécie': 'bootstrapCash',
+ 'Cartão de débito': 'bootstrapDebitCard',
+ };
+
+ handlePaymentMethodSelection(
+ selectedPaymentMethod: PaymentMethods,
+ selectedPaymentLocation: PaymentLocation,
+ ) {
+ this.paymentMethodChanged.emit(selectedPaymentMethod);
+ this.paymentLocationChanged.emit(selectedPaymentLocation);
+ }
+}
+
+export type PaymentLocation = 'InLoco' | 'InApp';
+
+export const INLOCO_PAYMENT_METHODS = [
+ 'Em espécie',
+ 'Cartão de crédito',
+ 'Cartão de débito',
+ 'Pix',
+] as const;
+
+export type PaymentMethods =
+ | (typeof INLOCO_PAYMENT_METHODS)[number]
+ | GeneralGoodsTransactionType;
diff --git a/src/app/components/top-up/pix/top-up-pix.component.html b/src/app/components/top-up/pix/top-up-pix.component.html
new file mode 100644
index 0000000..c0a9ff8
--- /dev/null
+++ b/src/app/components/top-up/pix/top-up-pix.component.html
@@ -0,0 +1,145 @@
+@if (pixTransactionData()) {
+
+
+
+
+
+ R$
+
+ {{ parsedTopUpValue() }}
+
+
+
+
+
+ {{ pixTransactionData()?.qrCodeString }}
+
+
+
+
+
+
+
+ @if (showPixQrCode()) {
+ ![Código QR Pix]()
+ }
+
+
+ Realize o pagamento usando o app do banco ou instituição financeira de
+ sua preferência. A transação pode levar alguns minutos para ser
+ processada.
+
+
+
+
+
+ {{ LOCALIZED_CURRENT_DATE }}
+
+
+
+
+
+
+
+
+ {{ parsedCpf() }}
+
+
+
+
+ {{ name() }}
+
+
+
+
+
+
+ Você tem {{ timeLeft() }} para completar o
+ pagamento
+
+
+
+
+
+
+ Sempre verifique se o destinatário do seu pagamento corresponde à
+ General Goods.
+
+
+ Esta transação é feita diretamente à General Goods, e o Rusbé não
+ recebe, processa ou armazena dados de pagamento. A General Goods é
+ responsável por processar seu pagamento e pelas informações de créditos
+ e recarga mostradas.
+
+
+
+
+
+
+} @else {
+
+
+ Gerando código pix...
+
+}
diff --git a/src/app/components/top-up/pix/top-up-pix.component.ts b/src/app/components/top-up/pix/top-up-pix.component.ts
new file mode 100644
index 0000000..67e5271
--- /dev/null
+++ b/src/app/components/top-up/pix/top-up-pix.component.ts
@@ -0,0 +1,110 @@
+import { Clipboard } from '@angular/cdk/clipboard';
+import {
+ ChangeDetectionStrategy,
+ Component,
+ computed,
+ inject,
+ input,
+ output,
+ signal,
+} from '@angular/core';
+
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import {
+ lucideAlarmClock,
+ lucideCalendarDays,
+ lucideCopy,
+ lucideInfo,
+ lucideMoveRight,
+ lucideScanQrCode,
+ lucideUserRound,
+} from '@ng-icons/lucide';
+
+import { CardGroupComponent } from '@rusbe/components/cards/card-group/card-group.component';
+import { SpinnerComponent } from '@rusbe/components/spinner/spinner.component';
+import { GeneralGoodsPixTransactionData } from '@rusbe/services/general-goods/general-goods.service';
+import { BrlCurrency } from '@rusbe/types/brl-currency';
+
+@Component({
+ selector: 'rusbe-top-up-pix',
+ imports: [CardGroupComponent, NgIcon, SpinnerComponent],
+ templateUrl: './top-up-pix.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ viewProviders: [
+ provideIcons({
+ lucideCopy,
+ lucideScanQrCode,
+ lucideCalendarDays,
+ lucideUserRound,
+ lucideMoveRight,
+ lucideInfo,
+ lucideAlarmClock,
+ }),
+ ],
+ host: {
+ class: 'flex flex-grow flex-col items-start justify-start',
+ },
+})
+export class TopUpPixComponent {
+ finished = output();
+
+ readonly CURRENT_DATE = new Date();
+ readonly LOCALIZED_CURRENT_DATE = this.parseCurrentDate();
+
+ topUpValue = input.required();
+ cpf = input.required();
+ name = input.required();
+ timeLeft = input.required();
+
+ pixTransactionData = input();
+
+ pixQrCodeSource = computed(() => this.parseBase64ImageSource());
+ parsedTopUpValue = computed(() =>
+ BrlCurrency.fromNumber(parseFloat(this.topUpValue())).toString(),
+ );
+ parsedCpf = computed(() => this.parseCpfNumber());
+
+ showPixQrCode = signal(false);
+ copiedToClipboard = signal(false);
+
+ private readonly clipboard = inject(Clipboard);
+
+ copyPasswordToClipboard() {
+ const pixTransactionData = this.pixTransactionData();
+ if (!pixTransactionData) return;
+ this.clipboard.copy(pixTransactionData.qrCodeString);
+ this.copiedToClipboard.set(true);
+ }
+
+ onFinish() {
+ this.finished.emit();
+ }
+
+ private parseCurrentDate(): string {
+ const dateString = this.CURRENT_DATE.toLocaleDateString('pt-BR', {
+ day: '2-digit',
+ month: 'long',
+ year: 'numeric',
+ });
+ const timeString = Intl.DateTimeFormat('pt-BR', {
+ hour: 'numeric',
+ minute: 'numeric',
+ }).format(this.CURRENT_DATE);
+ return `${dateString}, ${timeString}`;
+ }
+
+ private parseBase64ImageSource(): string {
+ const pixTransactionData = this.pixTransactionData();
+ if (!pixTransactionData) return '';
+ return `data:image/png;base64, ${pixTransactionData.qrCodeBase64Image}`;
+ }
+
+ private parseCpfNumber(): string {
+ const cpfNumber = this.cpf();
+
+ if (!cpfNumber) return '';
+ if (cpfNumber.length !== 11) return cpfNumber;
+
+ return cpfNumber.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '•••.$2.$3-••');
+ }
+}
diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
index 8dc97d4..4f4db1a 100644
--- a/src/app/pages/home/home.component.html
+++ b/src/app/pages/home/home.component.html
@@ -28,12 +28,11 @@
} @else {
Adicionar créditos
+ @if (showAddCreditsCard()) {
+ Adicionar créditos
+ }
Histórico de cardápios
diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts
index 282072c..015e955 100644
--- a/src/app/pages/home/home.component.ts
+++ b/src/app/pages/home/home.component.ts
@@ -17,6 +17,7 @@ import {
AccountAuthState,
AuthStateService,
} from '@rusbe/services/auth-state/auth-state.service';
+import { GeneralGoodsBalanceType } from '@rusbe/services/general-goods/general-goods.service';
import { KnowledgeService } from '@rusbe/services/knowledge/knowledge.service';
@Component({
@@ -46,4 +47,9 @@ export class HomePageComponent {
const authState = this.authStateService.accountAuthState();
return authState && authState !== AccountAuthState.LoggedIn;
});
+ public showAddCreditsCard = computed(
+ () =>
+ this.authStateService.generalGoodsAccountData()?.balance.type !==
+ GeneralGoodsBalanceType.FullGrantStudentHousing,
+ );
}
diff --git a/src/app/pages/top-up/top-up.component.html b/src/app/pages/top-up/top-up.component.html
new file mode 100644
index 0000000..af62ce9
--- /dev/null
+++ b/src/app/pages/top-up/top-up.component.html
@@ -0,0 +1,98 @@
+
+
+
+
+ Adicionar créditos
+
+
+ @let currentErrorValue = currentError();
+
+ @if (accountAuthState() === undefined) {
+
+
+ Um momento...
+
+ } @else if (currentErrorValue) {
+
+
+
+
+
+ {{ ERROR_MESSAGES[currentErrorValue] }}
+
+
+
+
+
+
+
+
+ } @else {
+ @if (STAGE_MESSAGE[currentStage()]) {
+
+
+ {{ STAGE_MESSAGE[currentStage()] }}
+
+
+ }
+
+ @if (!valueSubmitted()) {
+
+ }
+
+
diff --git a/src/app/pages/top-up/top-up.component.ts b/src/app/pages/top-up/top-up.component.ts
new file mode 100644
index 0000000..fa8aa19
--- /dev/null
+++ b/src/app/pages/top-up/top-up.component.ts
@@ -0,0 +1,257 @@
+import { CommonModule } from '@angular/common';
+import {
+ Component,
+ OnDestroy,
+ computed,
+ effect,
+ inject,
+ signal,
+ viewChild,
+} from '@angular/core';
+import { Router } from '@angular/router';
+
+import { Subscription, interval, takeUntil, timer } from 'rxjs';
+
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideInfo } from '@ng-icons/lucide';
+
+import {
+ HeaderComponent,
+ HeaderType,
+} from '@rusbe/components/header/header.component';
+import { SpinnerComponent } from '@rusbe/components/spinner/spinner.component';
+import { TopUpCalculatorComponent } from '@rusbe/components/top-up/calculator/top-up-calculator.component';
+import { TopUpCreditCardComponent } from '@rusbe/components/top-up/credit-card/top-up-credit-card.component';
+import { TopUpInLocoHelperComponent } from '@rusbe/components/top-up/in-loco-helper/top-up-in-loco-helper.component';
+import {
+ PaymentLocation,
+ PaymentMethods,
+ TopUpPaymentMethodComponent,
+} from '@rusbe/components/top-up/payment-method/payment-method.component';
+import { TopUpPixComponent } from '@rusbe/components/top-up/pix/top-up-pix.component';
+import {
+ AccountAuthState,
+ AuthStateService,
+} from '@rusbe/services/auth-state/auth-state.service';
+import {
+ GeneralGoodsPartialGrantBalance,
+ GeneralGoodsPixTransactionData,
+ GeneralGoodsService,
+} from '@rusbe/services/general-goods/general-goods.service';
+import { BrlCurrency } from '@rusbe/types/brl-currency';
+import { RusbeError } from '@rusbe/types/error-handling';
+
+@Component({
+ selector: 'rusbe-top-up',
+ imports: [
+ HeaderComponent,
+ CommonModule,
+ TopUpPaymentMethodComponent,
+ TopUpCalculatorComponent,
+ TopUpPixComponent,
+ TopUpCreditCardComponent,
+ TopUpInLocoHelperComponent,
+ SpinnerComponent,
+ NgIcon,
+ ],
+ templateUrl: './top-up.component.html',
+ viewProviders: [
+ provideIcons({
+ lucideInfo,
+ }),
+ ],
+})
+export class TopUpComponent implements OnDestroy {
+ readonly STAGE_MESSAGE = {
+ [TopUpStage.Calculator]: 'Quanto você quer adicionar?',
+ [TopUpStage.PaymentMethod]: 'Como você deseja adicionar créditos?',
+ [TopUpStage.InLocoHelper]: 'No guichê, mostre essas informações',
+ [TopUpStage.Pix]: '',
+ [TopUpStage.CreditCard]: '',
+ error: '',
+ };
+ readonly ERROR_MESSAGES = {
+ [TopUpError.GeneralGoodsUnavailable]:
+ 'Infelizmente, o sistema da General Goods está fora do ar.',
+ [TopUpError.PixUnavailable]:
+ 'Ocorreu um erro ao tentar gerar o código Pix.',
+ [TopUpError.Generic]:
+ 'Ocorreu um erro desconhecido. Por favor, tente novamente.',
+ };
+ readonly FIFTEEN_MINUTES = 15 * 60 * 1000;
+
+ calculatorComponent = viewChild(TopUpCalculatorComponent);
+ paymentMethodComponent = viewChild(TopUpPaymentMethodComponent);
+ inLocoHelperComponent = viewChild(TopUpInLocoHelperComponent);
+ creditCardComponent = viewChild(TopUpCreditCardComponent);
+ pixComponent = viewChild(TopUpPixComponent);
+
+ valueSubmitted = signal(false);
+ value = signal('0');
+ paymentMethod = signal(null);
+ paymentLocation = signal(null);
+ pixTransactionData = signal(null);
+ currentError = signal(null);
+ remainingTimeString = signal(this.parseRemainingTime(0));
+
+ headerType = computed(() => {
+ if (
+ this.currentStage() === TopUpStage.Calculator ||
+ this.currentStage() === TopUpStage.PaymentMethod
+ ) {
+ return HeaderType.PageNameWithBackButton;
+ }
+ return HeaderType.PageNameWithCloseButton;
+ });
+ accountData = computed(() => {
+ const accountData = this.authStateService.generalGoodsAccountData();
+ if (!accountData) return { fullName: '', cpfNumber: '' };
+
+ return {
+ fullName: accountData.fullName,
+ cpfNumber: accountData.cpfNumber,
+ };
+ });
+ accountBalance = computed(
+ () =>
+ this.authStateService.generalGoodsAccountData()
+ ?.balance as GeneralGoodsPartialGrantBalance,
+ );
+ currentStage = computed(() => {
+ if (this.calculatorComponent()) {
+ return 'calculator';
+ } else if (this.paymentMethodComponent()) {
+ return 'payment-method';
+ } else if (this.inLocoHelperComponent()) {
+ return 'in-loco-helper';
+ } else if (this.creditCardComponent()) {
+ return 'credit-card';
+ } else if (this.pixComponent()) {
+ return 'pix';
+ }
+ return 'error';
+ });
+ accountAuthState = computed(() => this.authStateService.accountAuthState());
+
+ pixTimerSubscription?: Subscription;
+
+ private readonly router = inject(Router);
+ private readonly generalGoodsService = inject(GeneralGoodsService);
+ private readonly authStateService = inject(AuthStateService);
+
+ constructor() {
+ effect(() => {
+ if (this.pixComponent()) this.startPixTransaction();
+ });
+
+ effect(() => {
+ if (this.accountAuthState() === AccountAuthState.LoggedIn) {
+ this.currentError.set(null);
+ } else {
+ this.currentError.set(TopUpError.GeneralGoodsUnavailable);
+ }
+ });
+ }
+
+ ngOnDestroy(): void {
+ this.pixTimerSubscription?.unsubscribe();
+ }
+
+ goToPreviousStage(): boolean {
+ switch (this.currentStage()) {
+ case 'calculator':
+ return false;
+ case 'payment-method':
+ this.valueSubmitted.set(false);
+ return true;
+ case 'credit-card':
+ case 'in-loco-helper':
+ case 'pix':
+ this.paymentLocation.set(null);
+ this.paymentMethod.set(null);
+ return true;
+ case 'error':
+ return false;
+ default:
+ return false;
+ }
+ }
+
+ goToHome() {
+ this.router.navigate(['/']);
+ }
+
+ retry(): void {
+ if (this.currentError() === TopUpError.GeneralGoodsUnavailable) {
+ this.authStateService.updateAccountAuthState();
+ } else if (this.currentError() === TopUpError.PixUnavailable) {
+ this.currentError.set(null);
+ }
+ }
+
+ onPaymentMethodChange(paymentMethod: PaymentMethods) {
+ this.paymentMethod.set(paymentMethod);
+ }
+
+ onPaymentLocaltionChange(paymentLocation: PaymentLocation) {
+ this.paymentLocation.set(paymentLocation);
+ }
+
+ onCalculatorConfirm(value: boolean) {
+ this.valueSubmitted.set(value);
+ }
+
+ private async startPixTransaction() {
+ try {
+ const pixTransactionResponse =
+ await this.generalGoodsService.startAddCreditsTransactionUsingPix(
+ BrlCurrency.fromNumber(parseFloat(this.value())),
+ );
+ this.pixTransactionData.set(pixTransactionResponse);
+
+ this.startPixTimer();
+ } catch (error) {
+ if (error instanceof RusbeError) {
+ this.currentError.set(TopUpError.PixUnavailable);
+ return;
+ }
+ this.currentError.set(TopUpError.Generic);
+ }
+ }
+
+ private startPixTimer() {
+ const source = interval(1000);
+
+ const result = source.pipe(takeUntil(timer(this.FIFTEEN_MINUTES)));
+
+ this.pixTimerSubscription = result.subscribe({
+ next: (timeSpent) => {
+ this.remainingTimeString.set(this.parseRemainingTime(timeSpent));
+ },
+ complete: () => {
+ this.router.navigate(['/']);
+ },
+ });
+ }
+
+ private parseRemainingTime(timeSpent: number): string {
+ const remainingTime = this.FIFTEEN_MINUTES - timeSpent * 1000;
+ const minutes = Math.floor(remainingTime / 60000);
+ const seconds = Math.floor((remainingTime % 60000) / 1000);
+ return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+ }
+}
+
+export enum TopUpStage {
+ Calculator = 'calculator',
+ PaymentMethod = 'payment-method',
+ Pix = 'pix',
+ CreditCard = 'credit-card',
+ InLocoHelper = 'in-loco-helper',
+}
+
+enum TopUpError {
+ GeneralGoodsUnavailable = 'general-goods-unavailable',
+ PixUnavailable = 'pix-unavailable',
+ Generic = 'generic-error',
+}
diff --git a/src/app/services/general-goods/general-goods.service.ts b/src/app/services/general-goods/general-goods.service.ts
index e50c27c..034144e 100644
--- a/src/app/services/general-goods/general-goods.service.ts
+++ b/src/app/services/general-goods/general-goods.service.ts
@@ -545,4 +545,5 @@ export enum GeneralGoodsBalanceType {
export enum GeneralGoodsTransactionType {
Pix = 'Pix',
+ CreditCard = 'Cartão de crédito',
}
diff --git a/src/styles.css b/src/styles.css
index 6c10808..3c0deb8 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -199,6 +199,10 @@
@apply w-full justify-center;
}
+ .button-split {
+ @apply button-base w-full justify-between;
+ }
+
.button-large {
@apply p-4 text-sm sm:text-lg;
}
@@ -220,7 +224,7 @@
}
.grouping-card-strip-button {
- @apply w-full touch-manipulation rounded-sm font-bold text-accent transition-all hover:bg-accent/10 focus:outline-none focus:ring focus:ring-accent focus:ring-offset-0 active:bg-accent/30 sm:gap-6;
+ @apply w-full touch-manipulation rounded-sm font-bold text-accent transition-all hover:bg-accent/10 focus:outline-none focus:ring focus:ring-accent focus:ring-offset-0 active:bg-accent/30 disabled:pointer-events-none sm:gap-6;
}
.grouping-card-strip-button-inner {
+ Você tem R$ {{ currentBalance().value }} de saldo. Após + a transação, você ficará com R$ {{ newBalance() }}. +
+ } @else { ++ Você tem R$ {{ currentBalance().value }} de saldo. +
+ } + +
+
+ @for (paymentMethod of inAppPaymentMethods; track $index) {
+
+ }
+
+
+
+ @for (paymentMethod of inLocoPaymentMethods; track $index) {
+
+ }
+
+
diff --git a/src/app/components/top-up/payment-method/payment-method.component.ts b/src/app/components/top-up/payment-method/payment-method.component.ts
new file mode 100644
index 0000000..97d930a
--- /dev/null
+++ b/src/app/components/top-up/payment-method/payment-method.component.ts
@@ -0,0 +1,79 @@
+import { ChangeDetectionStrategy, Component, output } from '@angular/core';
+
+import { provideIcons } from '@ng-icons/core';
+import {
+ lucideBanknote,
+ lucideChevronRight,
+ lucideCreditCard,
+ lucideEraser,
+ lucideFullscreen,
+ lucideListStart,
+ lucidePalette,
+ lucideRotateCcw,
+ lucideUtensils,
+} from '@ng-icons/lucide';
+
+import { CardButtonComponent } from '@rusbe/components/cards/card-button/card-button.component';
+import { CardGroupComponent } from '@rusbe/components/cards/card-group/card-group.component';
+import { GeneralGoodsTransactionType } from '@rusbe/services/general-goods/general-goods.service';
+
+@Component({
+ selector: 'rusbe-top-up-payment-method',
+ imports: [CardGroupComponent, CardButtonComponent],
+ templateUrl: './payment-method.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ viewProviders: [
+ provideIcons({
+ lucidePalette,
+ lucideUtensils,
+ lucideListStart,
+ lucideFullscreen,
+ lucideRotateCcw,
+ lucideEraser,
+ lucideChevronRight,
+ lucideCreditCard,
+ lucideBanknote,
+ }),
+ ],
+})
+export class TopUpPaymentMethodComponent {
+ paymentMethodChanged = output
+
+
+
+} @else {
+
+ ![Código QR Pix]()
+ }
+
+
+
+
+
+
+
+ R$
++ {{ parsedTopUpValue() }} +
++ {{ pixTransactionData()?.qrCodeString }} +
+ +
+
+
+
+
+ @if (showPixQrCode()) {
+ + Realize o pagamento usando o app do banco ou instituição financeira de + sua preferência. A transação pode levar alguns minutos para ser + processada. +
+ +
+
+
+ + {{ LOCALIZED_CURRENT_DATE }} +
+
+
+
+
+
+
+
+ + {{ parsedCpf() }} +
+
+
+ + {{ name() }} +
+
+
+
+ + Você tem {{ timeLeft() }} para completar o + pagamento +
+
+
+ + Sempre verifique se o destinatário do seu pagamento corresponde à + General Goods. +
++ Esta transação é feita diretamente à General Goods, e o Rusbé não + recebe, processa ou armazena dados de pagamento. A General Goods é + responsável por processar seu pagamento e pelas informações de créditos + e recarga mostradas. +
+
+
+
+
+
+}
diff --git a/src/app/components/top-up/pix/top-up-pix.component.ts b/src/app/components/top-up/pix/top-up-pix.component.ts
new file mode 100644
index 0000000..67e5271
--- /dev/null
+++ b/src/app/components/top-up/pix/top-up-pix.component.ts
@@ -0,0 +1,110 @@
+import { Clipboard } from '@angular/cdk/clipboard';
+import {
+ ChangeDetectionStrategy,
+ Component,
+ computed,
+ inject,
+ input,
+ output,
+ signal,
+} from '@angular/core';
+
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import {
+ lucideAlarmClock,
+ lucideCalendarDays,
+ lucideCopy,
+ lucideInfo,
+ lucideMoveRight,
+ lucideScanQrCode,
+ lucideUserRound,
+} from '@ng-icons/lucide';
+
+import { CardGroupComponent } from '@rusbe/components/cards/card-group/card-group.component';
+import { SpinnerComponent } from '@rusbe/components/spinner/spinner.component';
+import { GeneralGoodsPixTransactionData } from '@rusbe/services/general-goods/general-goods.service';
+import { BrlCurrency } from '@rusbe/types/brl-currency';
+
+@Component({
+ selector: 'rusbe-top-up-pix',
+ imports: [CardGroupComponent, NgIcon, SpinnerComponent],
+ templateUrl: './top-up-pix.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ viewProviders: [
+ provideIcons({
+ lucideCopy,
+ lucideScanQrCode,
+ lucideCalendarDays,
+ lucideUserRound,
+ lucideMoveRight,
+ lucideInfo,
+ lucideAlarmClock,
+ }),
+ ],
+ host: {
+ class: 'flex flex-grow flex-col items-start justify-start',
+ },
+})
+export class TopUpPixComponent {
+ finished = output();
+
+ readonly CURRENT_DATE = new Date();
+ readonly LOCALIZED_CURRENT_DATE = this.parseCurrentDate();
+
+ topUpValue = input.required
+
+ Gerando código pix...
+
+
diff --git a/src/app/pages/top-up/top-up.component.ts b/src/app/pages/top-up/top-up.component.ts
new file mode 100644
index 0000000..fa8aa19
--- /dev/null
+++ b/src/app/pages/top-up/top-up.component.ts
@@ -0,0 +1,257 @@
+import { CommonModule } from '@angular/common';
+import {
+ Component,
+ OnDestroy,
+ computed,
+ effect,
+ inject,
+ signal,
+ viewChild,
+} from '@angular/core';
+import { Router } from '@angular/router';
+
+import { Subscription, interval, takeUntil, timer } from 'rxjs';
+
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideInfo } from '@ng-icons/lucide';
+
+import {
+ HeaderComponent,
+ HeaderType,
+} from '@rusbe/components/header/header.component';
+import { SpinnerComponent } from '@rusbe/components/spinner/spinner.component';
+import { TopUpCalculatorComponent } from '@rusbe/components/top-up/calculator/top-up-calculator.component';
+import { TopUpCreditCardComponent } from '@rusbe/components/top-up/credit-card/top-up-credit-card.component';
+import { TopUpInLocoHelperComponent } from '@rusbe/components/top-up/in-loco-helper/top-up-in-loco-helper.component';
+import {
+ PaymentLocation,
+ PaymentMethods,
+ TopUpPaymentMethodComponent,
+} from '@rusbe/components/top-up/payment-method/payment-method.component';
+import { TopUpPixComponent } from '@rusbe/components/top-up/pix/top-up-pix.component';
+import {
+ AccountAuthState,
+ AuthStateService,
+} from '@rusbe/services/auth-state/auth-state.service';
+import {
+ GeneralGoodsPartialGrantBalance,
+ GeneralGoodsPixTransactionData,
+ GeneralGoodsService,
+} from '@rusbe/services/general-goods/general-goods.service';
+import { BrlCurrency } from '@rusbe/types/brl-currency';
+import { RusbeError } from '@rusbe/types/error-handling';
+
+@Component({
+ selector: 'rusbe-top-up',
+ imports: [
+ HeaderComponent,
+ CommonModule,
+ TopUpPaymentMethodComponent,
+ TopUpCalculatorComponent,
+ TopUpPixComponent,
+ TopUpCreditCardComponent,
+ TopUpInLocoHelperComponent,
+ SpinnerComponent,
+ NgIcon,
+ ],
+ templateUrl: './top-up.component.html',
+ viewProviders: [
+ provideIcons({
+ lucideInfo,
+ }),
+ ],
+})
+export class TopUpComponent implements OnDestroy {
+ readonly STAGE_MESSAGE = {
+ [TopUpStage.Calculator]: 'Quanto você quer adicionar?',
+ [TopUpStage.PaymentMethod]: 'Como você deseja adicionar créditos?',
+ [TopUpStage.InLocoHelper]: 'No guichê, mostre essas informações',
+ [TopUpStage.Pix]: '',
+ [TopUpStage.CreditCard]: '',
+ error: '',
+ };
+ readonly ERROR_MESSAGES = {
+ [TopUpError.GeneralGoodsUnavailable]:
+ 'Infelizmente, o sistema da General Goods está fora do ar.',
+ [TopUpError.PixUnavailable]:
+ 'Ocorreu um erro ao tentar gerar o código Pix.',
+ [TopUpError.Generic]:
+ 'Ocorreu um erro desconhecido. Por favor, tente novamente.',
+ };
+ readonly FIFTEEN_MINUTES = 15 * 60 * 1000;
+
+ calculatorComponent = viewChild(TopUpCalculatorComponent);
+ paymentMethodComponent = viewChild(TopUpPaymentMethodComponent);
+ inLocoHelperComponent = viewChild(TopUpInLocoHelperComponent);
+ creditCardComponent = viewChild(TopUpCreditCardComponent);
+ pixComponent = viewChild(TopUpPixComponent);
+
+ valueSubmitted = signal(false);
+ value = signal('0');
+ paymentMethod = signal
+
+ @if (!valueSubmitted()) {
+
+ }
+
+
+
+ Adicionar créditos
+
+
+ @let currentErrorValue = currentError();
+
+ @if (accountAuthState() === undefined) {
+
+
+ } @else if (currentErrorValue) {
+
+
+ Um momento...
+
+
+ } @else {
+ @if (STAGE_MESSAGE[currentStage()]) {
+
+
+
+
+
+ + {{ ERROR_MESSAGES[currentErrorValue] }} +
+
+
+
+
+
+
+ }
+ + {{ STAGE_MESSAGE[currentStage()] }} +
+