From e1516366dc79365b72c8fcd411a58e6f5db3dfe6 Mon Sep 17 00:00:00 2001
From: Guilherme Afonso <guilhermeafonso208@gmail.com>
Date: Tue, 18 Feb 2025 23:37:19 -0300
Subject: [PATCH 01/25] feat: add top up page structure

---
 src/app/app.routes.ts                         |  5 ++
 .../card-button/card-button.component.html    | 14 +++++
 .../card-button/card-button.component.ts      | 15 +++++
 .../card-group/card-group.component.html      |  2 +
 .../cards/card-group/card-group.component.ts  | 12 ++++
 .../pages/top-up/top-up.component copy.html   | 48 ++++++++++++++++
 src/app/pages/top-up/top-up.component.html    | 42 ++++++++++++++
 src/app/pages/top-up/top-up.component.ts      | 55 +++++++++++++++++++
 .../general-goods/general-goods.service.ts    |  1 +
 9 files changed, 194 insertions(+)
 create mode 100644 src/app/components/cards/card-button/card-button.component.html
 create mode 100644 src/app/components/cards/card-button/card-button.component.ts
 create mode 100644 src/app/components/cards/card-group/card-group.component.html
 create mode 100644 src/app/components/cards/card-group/card-group.component.ts
 create mode 100644 src/app/pages/top-up/top-up.component copy.html
 create mode 100644 src/app/pages/top-up/top-up.component.html
 create mode 100644 src/app/pages/top-up/top-up.component.ts

diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 1cfd3e2..73ec125 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -84,6 +84,11 @@ export const routes: Routes = [
         (m) => m.LegalTermsPageComponent,
       ),
   },
+  {
+    path: 'top-up',
+    loadComponent: () =>
+      import('./pages/top-up/top-up.component').then((m) => m.TopUpComponent),
+  },
   {
     path: '404',
     loadComponent: () =>
diff --git a/src/app/components/cards/card-button/card-button.component.html b/src/app/components/cards/card-button/card-button.component.html
new file mode 100644
index 0000000..98b7ef1
--- /dev/null
+++ b/src/app/components/cards/card-button/card-button.component.html
@@ -0,0 +1,14 @@
+<div class="grouping-card-strip-button-inner">
+  <ng-icon class="min-w-fit" name="lucideEraser" aria-hidden="true"></ng-icon>
+  <div class="w-full text-overlay-contrast">
+    <h3><ng-content></ng-content></h3>
+    <p class="my-1 text-xs font-normal sm:text-base">
+      {{ subtitle() }}
+    </p>
+  </div>
+  <ng-icon
+    class="min-w-fit"
+    name="lucideChevronRight"
+    aria-hidden="true"
+  ></ng-icon>
+</div>
diff --git a/src/app/components/cards/card-button/card-button.component.ts b/src/app/components/cards/card-button/card-button.component.ts
new file mode 100644
index 0000000..58f558a
--- /dev/null
+++ b/src/app/components/cards/card-button/card-button.component.ts
@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+import { NgIcon } from '@ng-icons/core';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'button[rusbe-card-button]',
+  imports: [NgIcon],
+  templateUrl: './card-button.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { class: 'grouping-card-strip-button w-full' },
+})
+export class CardButtonComponent {
+  subtitle = input('');
+}
diff --git a/src/app/components/cards/card-group/card-group.component.html b/src/app/components/cards/card-group/card-group.component.html
new file mode 100644
index 0000000..e165999
--- /dev/null
+++ b/src/app/components/cards/card-group/card-group.component.html
@@ -0,0 +1,2 @@
+<h2 class="grouping-card-title px-responsive">{{ title() }}</h2>
+<ng-content select="button[rusbe-card-button]"></ng-content>
diff --git a/src/app/components/cards/card-group/card-group.component.ts b/src/app/components/cards/card-group/card-group.component.ts
new file mode 100644
index 0000000..dcdc5d6
--- /dev/null
+++ b/src/app/components/cards/card-group/card-group.component.ts
@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'section[rusbe-card-group]',
+  templateUrl: './card-group.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { class: 'grouping-card' },
+})
+export class CardGroupComponent {
+  title = input('');
+}
diff --git a/src/app/pages/top-up/top-up.component copy.html b/src/app/pages/top-up/top-up.component copy.html
new file mode 100644
index 0000000..402cb5a
--- /dev/null
+++ b/src/app/pages/top-up/top-up.component copy.html	
@@ -0,0 +1,48 @@
+<div class="p-safe">
+  <div class="reduced-page-container p-4">
+    <rusbe-header [type]="HEADER_TYPE"> ADICIONAR CRÉDITOS </rusbe-header>
+  </div>
+
+  <div class="reduced-page-container">
+    <main class="grouping-cards-container my-2 sm:my-4">
+      @if (true) {
+        <section class="grouping-card">
+          <h2 class="grouping-card-title px-responsive">PELO APP</h2>
+          @for (transactionType of appTransactionTypes(); track $index) {
+            <button class="grouping-card-strip-button w-full" (click)="(null)">
+              <div class="grouping-card-strip-button-inner">
+                <ng-icon
+                  class="min-w-fit"
+                  name="lucideEraser"
+                  aria-hidden="true"
+                ></ng-icon>
+                <div class="w-full text-overlay-contrast">
+                  <h3>{{ transactionType }}</h3>
+                  <p class="my-1 text-xs font-normal sm:text-base">
+                    {{ TRANSACTION_TYPE_MESSAGES[transactionType] }}
+                  </p>
+                </div>
+                <ng-icon
+                  class="min-w-fit"
+                  name="lucideChevronRight"
+                  aria-hidden="true"
+                ></ng-icon>
+              </div>
+            </button>
+          }
+        </section>
+
+        <section class="grouping-card px-responsive">
+          <h2 class="grouping-card-title">PRESENCIALMENTE NO GUICHÊ</h2>
+        </section>
+      } @else {
+        <div
+          class="grouping-card flex h-80 flex-col items-center justify-center sm:h-96"
+        >
+          <!-- <rusbe-spinner class="h-8 w-8 text-accent"></rusbe-spinner> -->
+          <p class="pt-2 text-base sm:pt-4 sm:text-xl">Um momento...</p>
+        </div>
+      }
+    </main>
+  </div>
+</div>
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..ddae4e4
--- /dev/null
+++ b/src/app/pages/top-up/top-up.component.html
@@ -0,0 +1,42 @@
+<div class="p-safe">
+  <div class="reduced-page-container p-4">
+    <rusbe-header [type]="HEADER_TYPE"> ADICIONAR CRÉDITOS </rusbe-header>
+  </div>
+
+  <div class="reduced-page-container">
+    <main class="grouping-cards-container my-2 sm:my-4">
+      @if (true) {
+        <section rusbe-card-group [title]="'PELO APP'">
+          @for (transactionType of appTransactionTypes; track $index) {
+            <button
+              rusbe-card-button
+              [subtitle]="TRANSACTION_TYPE_MESSAGES[transactionType]"
+              (click)="(null)"
+            >
+              {{ transactionType }}
+            </button>
+          }
+        </section>
+
+        <section rusbe-card-group [title]="'PRESENCIALMENTE NO GUICHÊ'">
+          @for (transactionType of inLocoTransactionTypes; track $index) {
+            <button
+              rusbe-card-button
+              [subtitle]="'Dirija-se ao guichê para completar a compra.'"
+              (click)="(null)"
+            >
+              {{ transactionType }}
+            </button>
+          }
+        </section>
+      } @else {
+        <div
+          class="grouping-card flex h-80 flex-col items-center justify-center sm:h-96"
+        >
+          <!-- <rusbe-spinner class="h-8 w-8 text-accent"></rusbe-spinner> -->
+          <p class="pt-2 text-base sm:pt-4 sm:text-xl">Um momento...</p>
+        </div>
+      }
+    </main>
+  </div>
+</div>
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..2f30fa6
--- /dev/null
+++ b/src/app/pages/top-up/top-up.component.ts
@@ -0,0 +1,55 @@
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import {
+  lucideChevronRight,
+  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 {
+  HeaderComponent,
+  HeaderType,
+} from '@rusbe/components/header/header.component';
+
+import { GeneralGoodsTransactionType } from './../../services/general-goods/general-goods.service';
+
+@Component({
+  selector: 'rusbe-top-up',
+  imports: [HeaderComponent, CardGroupComponent, CardButtonComponent, NgIcon],
+  templateUrl: './top-up.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [
+    provideIcons({
+      lucidePalette,
+      lucideUtensils,
+      lucideListStart,
+      lucideFullscreen,
+      lucideRotateCcw,
+      lucideEraser,
+      lucideChevronRight,
+    }),
+  ],
+})
+export class TopUpComponent {
+  readonly HEADER_TYPE = HeaderType.PageNameWithBackButton;
+  appTransactionTypes = Object.values(GeneralGoodsTransactionType);
+  inLocoTransactionTypes = [
+    'Em espécie',
+    'Cartão de crédito',
+    'Cartão de débito',
+    'Pix',
+  ];
+  TRANSACTION_TYPE_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.',
+  };
+}
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',
 }

From 1c893c1005b95b7e1678f1784ef228bf5d1802db Mon Sep 17 00:00:00 2001
From: Guilherme Afonso <guilhermeafonso208@gmail.com>
Date: Wed, 19 Feb 2025 22:21:45 -0300
Subject: [PATCH 02/25] fix: remove template copy

---
 .../pages/top-up/top-up.component copy.html   | 48 -------------------
 1 file changed, 48 deletions(-)
 delete mode 100644 src/app/pages/top-up/top-up.component copy.html

diff --git a/src/app/pages/top-up/top-up.component copy.html b/src/app/pages/top-up/top-up.component copy.html
deleted file mode 100644
index 402cb5a..0000000
--- a/src/app/pages/top-up/top-up.component copy.html	
+++ /dev/null
@@ -1,48 +0,0 @@
-<div class="p-safe">
-  <div class="reduced-page-container p-4">
-    <rusbe-header [type]="HEADER_TYPE"> ADICIONAR CRÉDITOS </rusbe-header>
-  </div>
-
-  <div class="reduced-page-container">
-    <main class="grouping-cards-container my-2 sm:my-4">
-      @if (true) {
-        <section class="grouping-card">
-          <h2 class="grouping-card-title px-responsive">PELO APP</h2>
-          @for (transactionType of appTransactionTypes(); track $index) {
-            <button class="grouping-card-strip-button w-full" (click)="(null)">
-              <div class="grouping-card-strip-button-inner">
-                <ng-icon
-                  class="min-w-fit"
-                  name="lucideEraser"
-                  aria-hidden="true"
-                ></ng-icon>
-                <div class="w-full text-overlay-contrast">
-                  <h3>{{ transactionType }}</h3>
-                  <p class="my-1 text-xs font-normal sm:text-base">
-                    {{ TRANSACTION_TYPE_MESSAGES[transactionType] }}
-                  </p>
-                </div>
-                <ng-icon
-                  class="min-w-fit"
-                  name="lucideChevronRight"
-                  aria-hidden="true"
-                ></ng-icon>
-              </div>
-            </button>
-          }
-        </section>
-
-        <section class="grouping-card px-responsive">
-          <h2 class="grouping-card-title">PRESENCIALMENTE NO GUICHÊ</h2>
-        </section>
-      } @else {
-        <div
-          class="grouping-card flex h-80 flex-col items-center justify-center sm:h-96"
-        >
-          <!-- <rusbe-spinner class="h-8 w-8 text-accent"></rusbe-spinner> -->
-          <p class="pt-2 text-base sm:pt-4 sm:text-xl">Um momento...</p>
-        </div>
-      }
-    </main>
-  </div>
-</div>

From 345b874c4951f460718c2f6e3fcc4ecbad3f8275 Mon Sep 17 00:00:00 2001
From: Guilherme Afonso <guilhermeafonso208@gmail.com>
Date: Sun, 23 Feb 2025 06:27:55 -0300
Subject: [PATCH 03/25] feat: basic flow

---
 .vscode/settings.json                         |   6 +
 package-lock.json                             |  15 ++
 package.json                                  |   1 +
 public/assets/icons/bootstrapCash.svg         |   4 +
 public/assets/icons/bootstrapCreditCard.svg   |   4 +
 public/assets/icons/bootstrapDebitCard.svg    |   4 +
 public/assets/icons/pix.svg                   |   1 +
 src/app/app.config.ts                         |   8 +-
 src/app/app.routes.ts                         |   1 +
 .../card-button/card-button.component.html    |  36 ++--
 .../card-button/card-button.component.ts      |   3 +-
 .../card-group/card-group.component.html      |   4 +-
 .../back-button/back-button.component.ts      |   4 +
 .../components/header/header.component.html   |   1 +
 src/app/components/header/header.component.ts |   1 +
 .../top-up-calculator.component.html          |  49 ++++++
 .../calculator/top-up-calculator.component.ts |  87 ++++++++++
 .../top-up-credit-card.component.html         |   2 +
 .../top-up-credit-card.component.ts           |   9 +
 .../top-up-in-loco-helper.component.html      |  46 ++++++
 .../top-up-in-loco-helper.component.ts        |  49 ++++++
 .../payment-method.component.html             |  37 +++++
 .../payment-method.component.ts               |  80 +++++++++
 .../top-up/pix/top-up-pix.component.html      | 104 ++++++++++++
 .../top-up/pix/top-up-pix.component.ts        |  52 ++++++
 src/app/pages/home/home.component.html        |   9 +-
 src/app/pages/top-up/top-up.component.html    |  93 ++++++-----
 src/app/pages/top-up/top-up.component.ts      | 155 +++++++++++++-----
 src/styles.css                                |   4 +
 29 files changed, 763 insertions(+), 106 deletions(-)
 create mode 100644 public/assets/icons/bootstrapCash.svg
 create mode 100644 public/assets/icons/bootstrapCreditCard.svg
 create mode 100644 public/assets/icons/bootstrapDebitCard.svg
 create mode 100644 public/assets/icons/pix.svg
 create mode 100644 src/app/components/top-up/calculator/top-up-calculator.component.html
 create mode 100644 src/app/components/top-up/calculator/top-up-calculator.component.ts
 create mode 100644 src/app/components/top-up/credit-card/top-up-credit-card.component.html
 create mode 100644 src/app/components/top-up/credit-card/top-up-credit-card.component.ts
 create mode 100644 src/app/components/top-up/in-loco-helper/top-up-in-loco-helper.component.html
 create mode 100644 src/app/components/top-up/in-loco-helper/top-up-in-loco-helper.component.ts
 create mode 100644 src/app/components/top-up/payment-method/payment-method.component.html
 create mode 100644 src/app/components/top-up/payment-method/payment-method.component.ts
 create mode 100644 src/app/components/top-up/pix/top-up-pix.component.html
 create mode 100644 src/app/components/top-up/pix/top-up-pix.component.ts

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 1947a0d..0eb3265 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,5 +2,11 @@
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
+  },
+  "angular-schematics.schematicsDefaultOptions": {
+    "angular-*": {
+      "skipStyle": true,
+      "externalTemplate": true
+    }
   }
 }
diff --git a/package-lock.json b/package-lock.json
index 3e8f0f9..748fdcd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,7 @@
         "date-fns": "^4.1.0",
         "idb-keyval": "^6.2.1",
         "jwt-decode": "^4.0.0",
+        "ngx-currency": "^19.0.0",
         "ngx-mask": "^19.0.6",
         "rxjs": "~7.8.2",
         "superjson": "^2.2.2",
@@ -14801,6 +14802,20 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/ngx-currency": {
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/ngx-currency/-/ngx-currency-19.0.0.tgz",
+      "integrity": "sha512-N7SdB8D+ttPAf9GNiMyhChPUJs0t0mRTMiJ2UILWN83Vnx9dGc1ytjFrV7q3pCVA66svl1bpSFOfbZ2rhJ7zHA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.5.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^19.0.0",
+        "@angular/core": "^19.0.0",
+        "@angular/forms": "^19.0.0"
+      }
+    },
     "node_modules/ngx-mask": {
       "version": "19.0.6",
       "resolved": "https://registry.npmjs.org/ngx-mask/-/ngx-mask-19.0.6.tgz",
diff --git a/package.json b/package.json
index 0dc8424..c254335 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "date-fns": "^4.1.0",
     "idb-keyval": "^6.2.1",
     "jwt-decode": "^4.0.0",
+    "ngx-currency": "^19.0.0",
     "ngx-mask": "^19.0.6",
     "rxjs": "~7.8.2",
     "superjson": "^2.2.2",
diff --git a/public/assets/icons/bootstrapCash.svg b/public/assets/icons/bootstrapCash.svg
new file mode 100644
index 0000000..18cbff3
--- /dev/null
+++ b/public/assets/icons/bootstrapCash.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cash" viewBox="0 0 16 16">
+  <path d="M8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4"/>
+  <path d="M0 4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1zm3 0a2 2 0 0 1-2 2v4a2 2 0 0 1 2 2h10a2 2 0 0 1 2-2V6a2 2 0 0 1-2-2z"/>
+</svg>
\ No newline at end of file
diff --git a/public/assets/icons/bootstrapCreditCard.svg b/public/assets/icons/bootstrapCreditCard.svg
new file mode 100644
index 0000000..406233d
--- /dev/null
+++ b/public/assets/icons/bootstrapCreditCard.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-credit-card" viewBox="0 0 16 16">
+  <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v1h14V4a1 1 0 0 0-1-1zm13 4H1v5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1z"/>
+  <path d="M2 10a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z"/>
+</svg>
\ No newline at end of file
diff --git a/public/assets/icons/bootstrapDebitCard.svg b/public/assets/icons/bootstrapDebitCard.svg
new file mode 100644
index 0000000..b29419c
--- /dev/null
+++ b/public/assets/icons/bootstrapDebitCard.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-credit-card-2-back" viewBox="0 0 16 16">
+  <path d="M11 5.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5z"/>
+  <path d="M2 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm13 2v5H1V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1m-1 9H2a1 1 0 0 1-1-1v-1h14v1a1 1 0 0 1-1 1"/>
+</svg>
\ No newline at end of file
diff --git a/public/assets/icons/pix.svg b/public/assets/icons/pix.svg
new file mode 100644
index 0000000..4304e41
--- /dev/null
+++ b/public/assets/icons/pix.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" ><g><rect fill="none" height="24" width="24" y="0"/></g><g><g><path d="M15.45,16.52l-3.01-3.01c-0.11-0.11-0.24-0.13-0.31-0.13s-0.2,0.02-0.31,0.13L8.8,16.53c-0.34,0.34-0.87,0.89-2.64,0.89 l3.71,3.7c1.17,1.17,3.07,1.17,4.24,0l3.72-3.71C16.92,17.41,16.16,17.23,15.45,16.52z"/><path d="M8.8,7.47l3.02,3.02c0.08,0.08,0.2,0.13,0.31,0.13s0.23-0.05,0.31-0.13l2.99-2.99c0.71-0.74,1.52-0.91,2.43-0.91 l-3.72-3.71c-1.17-1.17-3.07-1.17-4.24,0l-3.71,3.7C7.95,6.58,8.49,7.16,8.8,7.47z"/><path d="M21.11,9.85l-2.25-2.26H17.6c-0.54,0-1.08,0.22-1.45,0.61l-3,3c-0.28,0.28-0.65,0.42-1.02,0.42 c-0.36,0-0.74-0.15-1.02-0.42L8.09,8.17c-0.38-0.38-0.9-0.6-1.45-0.6H5.17l-2.29,2.3c-1.17,1.17-1.17,3.07,0,4.24l2.29,2.3h1.48 c0.54,0,1.06-0.22,1.45-0.6l3.02-3.02c0.28-0.28,0.65-0.42,1.02-0.42c0.37,0,0.74,0.14,1.02,0.42l3.01,3.01 c0.38,0.38,0.9,0.6,1.45,0.6h1.26l2.25-2.26C22.3,12.96,22.3,11.04,21.11,9.85z"/></g></g></svg>
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index a01683b..ccc0811 100644
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -1,4 +1,4 @@
-import { provideHttpClient } from '@angular/common/http';
+import { HttpClient, provideHttpClient } from '@angular/common/http';
 import {
   ApplicationConfig,
   inject,
@@ -25,6 +25,8 @@ import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
 import { getAuth, provideAuth } from '@angular/fire/auth';
 import { getFirestore, provideFirestore } from '@angular/fire/firestore';
 
+import { provideNgIconLoader } from '@ng-icons/core';
+
 import { routes } from '@rusbe/app.routes';
 import { environment } from '@rusbe/environments/environment';
 import { version } from '@rusbe/environments/version';
@@ -69,5 +71,9 @@ export const appConfig: ApplicationConfig = {
     }),
     ScreenTrackingService,
     UserTrackingService,
+    provideNgIconLoader((name) => {
+      const http = inject(HttpClient);
+      return http.get(`/assets/icons/${name}.svg`, { responseType: 'text' });
+    }),
   ],
 };
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 73ec125..e848e42 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -88,6 +88,7 @@ export const routes: Routes = [
     path: 'top-up',
     loadComponent: () =>
       import('./pages/top-up/top-up.component').then((m) => m.TopUpComponent),
+    ...canActivate(redirectUnauthorizedToLogin),
   },
   {
     path: '404',
diff --git a/src/app/components/cards/card-button/card-button.component.html b/src/app/components/cards/card-button/card-button.component.html
index 98b7ef1..c245e7d 100644
--- a/src/app/components/cards/card-button/card-button.component.html
+++ b/src/app/components/cards/card-button/card-button.component.html
@@ -1,14 +1,22 @@
-<div class="grouping-card-strip-button-inner">
-  <ng-icon class="min-w-fit" name="lucideEraser" aria-hidden="true"></ng-icon>
-  <div class="w-full text-overlay-contrast">
-    <h3><ng-content></ng-content></h3>
-    <p class="my-1 text-xs font-normal sm:text-base">
-      {{ subtitle() }}
-    </p>
-  </div>
-  <ng-icon
-    class="min-w-fit"
-    name="lucideChevronRight"
-    aria-hidden="true"
-  ></ng-icon>
-</div>
+<div class="grouping-card-strip-button-inner">
+  @if (iconName()) {
+    <ng-icon
+      class="min-w-fit fill-accent"
+      [name]="iconName()"
+      aria-hidden="true"
+    ></ng-icon>
+  } @else {
+    <div></div>
+  }
+  <div class="w-full text-overlay-contrast">
+    <h3><ng-content></ng-content></h3>
+    <p class="my-1 text-xs font-normal sm:text-base">
+      {{ subtitle() }}
+    </p>
+  </div>
+  <ng-icon
+    class="min-w-fit"
+    name="lucideChevronRight"
+    aria-hidden="true"
+  ></ng-icon>
+</div>
diff --git a/src/app/components/cards/card-button/card-button.component.ts b/src/app/components/cards/card-button/card-button.component.ts
index 58f558a..57e8b62 100644
--- a/src/app/components/cards/card-button/card-button.component.ts
+++ b/src/app/components/cards/card-button/card-button.component.ts
@@ -8,8 +8,9 @@ import { NgIcon } from '@ng-icons/core';
   imports: [NgIcon],
   templateUrl: './card-button.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  host: { class: 'grouping-card-strip-button w-full' },
+  host: { class: 'grouping-card-strip-button w-full disabled:opacity-50' },
 })
 export class CardButtonComponent {
   subtitle = input('');
+  iconName = input('');
 }
diff --git a/src/app/components/cards/card-group/card-group.component.html b/src/app/components/cards/card-group/card-group.component.html
index e165999..5afe185 100644
--- a/src/app/components/cards/card-group/card-group.component.html
+++ b/src/app/components/cards/card-group/card-group.component.html
@@ -1,2 +1,2 @@
-<h2 class="grouping-card-title px-responsive">{{ title() }}</h2>
-<ng-content select="button[rusbe-card-button]"></ng-content>
+<h2 class="grouping-card-title px-responsive">{{ title() }}</h2>
+<ng-content></ng-content>
diff --git a/src/app/components/header/back-button/back-button.component.ts b/src/app/components/header/back-button/back-button.component.ts
index 9bdbcfc..3428331 100644
--- a/src/app/components/header/back-button/back-button.component.ts
+++ b/src/app/components/header/back-button/back-button.component.ts
@@ -15,12 +15,16 @@ import { ButtonColorScheme } from '@rusbe/components/header/button-color-scheme'
 })
 export class BackButtonComponent {
   colorScheme = input<ButtonColorScheme>(ButtonColorScheme.Page);
+  customAction = input<(() => boolean) | null>(null);
   ButtonColorScheme = ButtonColorScheme;
 
   router = inject(Router);
   location = inject(Location);
 
   goBack() {
+    const customAction = this.customAction()?.();
+    if (customAction) return;
+
     if (this.router.lastSuccessfulNavigation?.previousNavigation != null) {
       this.location.back();
     } else {
diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
index adc654a..4046a77 100644
--- a/src/app/components/header/header.component.html
+++ b/src/app/components/header/header.component.html
@@ -9,6 +9,7 @@ <h1 class="h-6 text-base sm:h-8">
 
   @if (hasBackButton()) {
     <rusbe-back-button
+      [customAction]="customAction()"
       [colorScheme]="buttonColorSchemeMap[type()]!"
     ></rusbe-back-button>
   }
diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts
index 58572d6..059c3b3 100644
--- a/src/app/components/header/header.component.ts
+++ b/src/app/components/header/header.component.ts
@@ -22,6 +22,7 @@ export class HeaderComponent {
   HeaderType = HeaderType;
 
   type = input<HeaderType>(HeaderType.LogoWithUserAccountButton);
+  customAction = input<(() => boolean) | null>(null);
 
   readonly buttonColorSchemeMap: Partial<
     Record<HeaderType, ButtonColorScheme>
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..b1f09b0
--- /dev/null
+++ b/src/app/components/top-up/calculator/top-up-calculator.component.html
@@ -0,0 +1,49 @@
+<section class="reduced-page-container flex w-full flex-grow p-4">
+  <form
+    class="relative flex w-full flex-col gap-2"
+    (ngSubmit)="onSubmitValue()"
+  >
+    <span class="absolute start-6 top-[43px] font-grotesque text-4xl">R$</span>
+    <input
+      class="block w-full rounded-lg border-transparent bg-overlay p-10 pb-4 pl-[84px] font-geometric text-4xl font-bold shadow-lg placeholder:text-transparent autofill:pb-4 autofill:pt-10 focus:border-accent focus:pb-4 focus:pt-10 focus:ring-accent disabled:pointer-events-none disabled:opacity-50"
+      inputmode="numeric"
+      type="text"
+      name="top-up-value"
+      id="top-up-calculator-currency-input"
+      aria-errormessage="currency-input-error"
+      [currencyMask]="maskConfig"
+      [formControl]="topUpValue"
+      [disabled]="inputDisabled()"
+      [(ngModel)]="value"
+    />
+    <label
+      for="top-up-calculator-currency-input"
+      class="text-md pointer-events-none absolute start-6 top-4 origin-[0_0] truncate border border-transparent transition duration-100 ease-in-out"
+      >Valor</label
+    >
+    @if (topUpValue.touched && topUpValue.hasError('lowTopUpValue')) {
+      <rusbe-warning-card class="transition-appear"
+        ><p>
+          O valor da recarga deve ser no mínimo R$ 1,00
+        </p></rusbe-warning-card
+      >
+    } @else if (topUpValue.touched && topUpValue.hasError('highTopUpValue')) {
+      <rusbe-warning-card class="transition-appear"
+        ><p>
+          O valor da recarga deve ser no máximo R$ 100,00
+        </p></rusbe-warning-card
+      >
+    }
+  </form>
+</section>
+<section *ngIf="false" class="grouping-card px-responsive">
+  <rusbe-meal-balance-breakdown></rusbe-meal-balance-breakdown>
+</section>
+<section class="reduced-page-container w-full p-4">
+  <button
+    (click)="onSubmitValue()"
+    class="button-fill button-full button-large focus:ring-offset-background"
+  >
+    Confirmar
+  </button>
+</section>
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..097045a
--- /dev/null
+++ b/src/app/components/top-up/calculator/top-up-calculator.component.ts
@@ -0,0 +1,87 @@
+import { NgIf } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  model,
+  output,
+  signal,
+} from '@angular/core';
+import {
+  AbstractControl,
+  FormControl,
+  FormsModule,
+  ReactiveFormsModule,
+  ValidationErrors,
+  ValidatorFn,
+  Validators,
+} from '@angular/forms';
+
+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';
+
+@Component({
+  selector: 'rusbe-top-up-calculator',
+  imports: [
+    NgIf,
+    MealBalanceBreakdownComponent,
+    FormsModule,
+    NgxCurrencyDirective,
+    ReactiveFormsModule,
+    WarningCardComponent,
+  ],
+  templateUrl: './top-up-calculator.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: 'flex flex-grow flex-col items-start justify-start',
+  },
+})
+export class TopUpCalculatorComponent {
+  submitted = output<boolean>();
+
+  inputDisabled = signal(false);
+  value = model.required<string>();
+
+  readonly topUpValue = new FormControl(
+    { value: '0', disabled: this.inputDisabled() },
+    {
+      validators: [Validators.required, lowTopUpValue, highTopUpValue],
+    },
+  );
+
+  readonly maskConfig = {
+    align: 'left',
+    allowNegative: true,
+    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 lowTopUpValue: ValidatorFn = (
+  control: AbstractControl,
+): ValidationErrors | null => {
+  const value = control.value;
+  return value < 1 ? { lowTopUpValue: true } : null;
+};
+
+const highTopUpValue: 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..6859037
--- /dev/null
+++ b/src/app/components/top-up/credit-card/top-up-credit-card.component.html
@@ -0,0 +1,2 @@
+<p>top-up-credit-card works!</p>
+,
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..0bfe43b
--- /dev/null
+++ b/src/app/components/top-up/in-loco-helper/top-up-in-loco-helper.component.html
@@ -0,0 +1,46 @@
+<section
+  class="reduced-page-container flex w-full flex-grow flex-col rounded-t-3xl bg-overlay-contrast p-4 pt-9 [&_p]:text-accent-contrast"
+>
+  <div class="flex flex-grow flex-col gap-10">
+    <div class="h-6 text-base text-accent-contrast sm:h-8">
+      <rusbe-logo></rusbe-logo>
+    </div>
+    <div>
+      <p class="text-base">Dados pessoais</p>
+      <p class="text-balance text-4xl">
+        <strong>{{ parsedCpf() }}</strong>
+      </p>
+      <p class="text-condensed text-2xl">
+        <strong>{{ name() }}</strong>
+      </p>
+    </div>
+    <div>
+      <p class="text-base">Valor da Recarga</p>
+      <div class="inline-flex gap-4">
+        <p class="text-4xl">R$</p>
+        <p class="font-geometric text-4xl">
+          <strong>{{ parsedValue() }}</strong>
+        </p>
+      </div>
+    </div>
+    <div>
+      <p class="text-base">Forma de pagamento</p>
+      <div class="inline-flex gap-4">
+        <p class="font-geometric text-4xl">
+          <strong>{{ paymentMethod() }}</strong>
+        </p>
+      </div>
+    </div>
+  </div>
+  <button
+    (click)="onBackClicked()"
+    class="button-large button-split px-responsive bg-accent text-accent-contrast focus:ring-offset-background"
+  >
+    Voltar
+    <ng-icon
+      class="color-accent-contrast min-w-fit"
+      name="lucideMoveRight"
+      aria-hidden="true"
+    ></ng-icon>
+  </button>
+</section>
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..971c652
--- /dev/null
+++ b/src/app/components/top-up/in-loco-helper/top-up-in-loco-helper.component.ts
@@ -0,0 +1,49 @@
+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 { 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<string>();
+  name = input.required<string>();
+  topUpValue = input.required<string>();
+  paymentMethod = input.required<PaymentMethods | null>();
+
+  parsedCpf = computed(() => {
+    const cpfNumber = this.cpf();
+    if (!cpfNumber) return '';
+    return cpfNumber.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3-$4');
+  });
+
+  parsedValue = computed(() => parseFloat(this.topUpValue()).toFixed(2));
+
+  onBackClicked(): void {
+    this.backClicked.emit();
+  }
+}
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..ced4273
--- /dev/null
+++ b/src/app/components/top-up/payment-method/payment-method.component.html
@@ -0,0 +1,37 @@
+<div class="grouping-cards-container my-2 sm:my-4">
+  @if (true) {
+    <section rusbe-card-group [title]="'PELO APP'">
+      @for (paymentMethod of inAppPaymentMethods; track $index) {
+        <button
+          rusbe-card-button
+          [iconName]="PAYMENT_METHOD_ICONS[paymentMethod]"
+          [disabled]="paymentMethod === 'Cartão de crédito'"
+          [subtitle]="PAYMENT_METHOD_MESSAGES[paymentMethod]"
+          (click)="handlePaymentMethodSelection(paymentMethod, 'InApp')"
+        >
+          {{ paymentMethod }}
+        </button>
+      }
+    </section>
+
+    <section rusbe-card-group [title]="'PRESENCIALMENTE NO GUICHÊ'">
+      @for (paymentMethod of inLocoPaymentMethods; track $index) {
+        <button
+          rusbe-card-button
+          [iconName]="PAYMENT_METHOD_ICONS[paymentMethod]"
+          [subtitle]="'Dirija-se ao guichê para completar a compra.'"
+          (click)="handlePaymentMethodSelection(paymentMethod, 'InLoco')"
+        >
+          {{ paymentMethod }}
+        </button>
+      }
+    </section>
+  } @else {
+    <div
+      class="grouping-card flex h-80 flex-col items-center justify-center sm:h-96"
+    >
+      <rusbe-spinner class="h-8 w-8 text-accent"></rusbe-spinner>
+      <p class="pt-2 text-base sm:pt-4 sm:text-xl">Um momento...</p>
+    </div>
+  }
+</div>
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..53172f2
--- /dev/null
+++ b/src/app/components/top-up/payment-method/payment-method.component.ts
@@ -0,0 +1,80 @@
+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 { SpinnerComponent } from '@rusbe/components/spinner/spinner.component';
+import { GeneralGoodsTransactionType } from '@rusbe/services/general-goods/general-goods.service';
+
+@Component({
+  selector: 'rusbe-top-up-payment-method',
+  imports: [CardGroupComponent, CardButtonComponent, SpinnerComponent],
+  templateUrl: './payment-method.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [
+    provideIcons({
+      lucidePalette,
+      lucideUtensils,
+      lucideListStart,
+      lucideFullscreen,
+      lucideRotateCcw,
+      lucideEraser,
+      lucideChevronRight,
+      lucideCreditCard,
+      lucideBanknote,
+    }),
+  ],
+})
+export class TopUpPaymentMethodComponent {
+  paymentMethodChanged = output<PaymentMethods>();
+  paymentLocationChanged = output<PaymentLocation>();
+
+  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..9234949
--- /dev/null
+++ b/src/app/components/top-up/pix/top-up-pix.component.html
@@ -0,0 +1,104 @@
+@if (false) {
+  <div class="grouping-cards-container my-2 sm:my-4">
+    <section rusbe-card-group [title]="'PAGAR COM PIX'">
+      <div class="px-responsive flex w-full flex-col gap-5">
+        <div>
+          <div class="inline-flex gap-4">
+            <p class="text-2xl">R$</p>
+            <p class="font-geometric text-2xl">
+              <strong> {{ parsedTopUpValue() }}</strong>
+            </p>
+          </div>
+        </div>
+
+        <p class="break-all">
+          {{ pixCode() }}
+        </p>
+
+        <div class="flex flex-col gap-3">
+          <button
+            (click)="(null)"
+            class="button-split px-responsive bg-accent text-accent-contrast focus:ring-offset-background"
+          >
+            Copiar código
+            <ng-icon
+              class="color-accent-contrast min-w-fit"
+              name="lucideCopy"
+              aria-hidden="true"
+            ></ng-icon>
+          </button>
+          <button
+            (click)="(null)"
+            class="button-split px-responsive bg-accent-contrast text-accent focus:ring-offset-background"
+          >
+            Mostrar código QR Pix
+            <ng-icon
+              class="color-accent-contrast min-w-fit"
+              name="lucideScanQrCode"
+              aria-hidden="true"
+            ></ng-icon>
+          </button>
+        </div>
+
+        <p>
+          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.
+        </p>
+
+        <div class="flex items-center gap-2">
+          <ng-icon
+            class="color-accent-contrast min-w-fit"
+            name="lucideCalendarDays"
+            aria-hidden="true"
+          ></ng-icon>
+          <p>
+            <strong>{{ formatedDate }}</strong>
+          </p>
+        </div>
+        <div
+          class="grid min-w-fit auto-cols-max grid-flow-col grid-rows-2 gap-x-2"
+        >
+          <div class="row-span-2 grid items-center">
+            <ng-icon
+              class="color-accent-contrast min-w-fit"
+              name="lucideUserRound"
+              aria-hidden="true"
+            ></ng-icon>
+          </div>
+          <div class="col-span-1 row-span-1 grid">
+            <p class="w-fit">
+              <strong>{{ parsedCpf() }}</strong>
+            </p>
+          </div>
+          <div class="col-span-1 row-span-1 grid">
+            <p class="w-auto">
+              <strong>{{ name() }}</strong>
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+    <div class="px-responsive flex flex-col gap-5">
+      <p>
+        <strong
+          >Sempre verifique se o destinatário do seu pagamento corresponde à
+          General Goods.</strong
+        >
+      </p>
+      <p>
+        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.
+      </p>
+    </div>
+  </div>
+} @else {
+  <div
+    class="grouping-card flex h-full w-full flex-col items-center justify-center sm:h-96"
+  >
+    <rusbe-spinner class="h-8 w-8 text-accent"></rusbe-spinner>
+    <p class="pt-2 text-base sm:pt-4 sm:text-xl">Gerando código pix...</p>
+  </div>
+}
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..853dc3d
--- /dev/null
+++ b/src/app/components/top-up/pix/top-up-pix.component.ts
@@ -0,0 +1,52 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+} from '@angular/core';
+
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import {
+  lucideCalendarDays,
+  lucideCopy,
+  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';
+
+@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,
+    }),
+  ],
+  host: {
+    class: 'flex flex-grow flex-col items-start justify-start',
+  },
+})
+export class TopUpPixComponent {
+  topUpValue = input.required<string>();
+  pixCode = input.required<string>();
+  cpf = input.required<string>();
+  name = input.required<string>();
+
+  parsedTopUpValue = computed(() => parseFloat(this.topUpValue()).toFixed(2));
+
+  parsedCpf = computed(() => {
+    const cpfNumber = this.cpf();
+    if (!cpfNumber) return '';
+    return cpfNumber.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '•••.•••.$3-$4');
+  });
+
+  readonly today = new Date();
+  readonly formatedDate = `${this.today.toLocaleDateString('pt-BR', { day: '2-digit', month: 'long', year: 'numeric' })}, ${Intl.DateTimeFormat('pt-BR', { hour: 'numeric', minute: 'numeric' }).format(this.today)}`;
+}
diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
index 8dc97d4..3efb33a 100644
--- a/src/app/pages/home/home.component.html
+++ b/src/app/pages/home/home.component.html
@@ -27,13 +27,10 @@
           <rusbe-sign-in-card class="xs:col-span-2"></rusbe-sign-in-card>
         } @else {
           <rusbe-credits-card class="xs:col-span-2"></rusbe-credits-card>
+          <rusbe-link-card destination="/top-up" iconName="lucideWallet"
+            >Adicionar créditos</rusbe-link-card
+          >
         }
-        <rusbe-link-card
-          destination="/about"
-          iconName="lucideWallet"
-          *ngIf="false"
-          >Adicionar créditos</rusbe-link-card
-        >
         <rusbe-link-card destination="/menu" iconName="lucideFolderClock"
           >Histórico de cardápios</rusbe-link-card
         >
diff --git a/src/app/pages/top-up/top-up.component.html b/src/app/pages/top-up/top-up.component.html
index ddae4e4..f578777 100644
--- a/src/app/pages/top-up/top-up.component.html
+++ b/src/app/pages/top-up/top-up.component.html
@@ -1,42 +1,51 @@
-<div class="p-safe">
-  <div class="reduced-page-container p-4">
-    <rusbe-header [type]="HEADER_TYPE"> ADICIONAR CRÉDITOS </rusbe-header>
-  </div>
-
-  <div class="reduced-page-container">
-    <main class="grouping-cards-container my-2 sm:my-4">
-      @if (true) {
-        <section rusbe-card-group [title]="'PELO APP'">
-          @for (transactionType of appTransactionTypes; track $index) {
-            <button
-              rusbe-card-button
-              [subtitle]="TRANSACTION_TYPE_MESSAGES[transactionType]"
-              (click)="(null)"
-            >
-              {{ transactionType }}
-            </button>
-          }
-        </section>
-
-        <section rusbe-card-group [title]="'PRESENCIALMENTE NO GUICHÊ'">
-          @for (transactionType of inLocoTransactionTypes; track $index) {
-            <button
-              rusbe-card-button
-              [subtitle]="'Dirija-se ao guichê para completar a compra.'"
-              (click)="(null)"
-            >
-              {{ transactionType }}
-            </button>
-          }
-        </section>
-      } @else {
-        <div
-          class="grouping-card flex h-80 flex-col items-center justify-center sm:h-96"
-        >
-          <!-- <rusbe-spinner class="h-8 w-8 text-accent"></rusbe-spinner> -->
-          <p class="pt-2 text-base sm:pt-4 sm:text-xl">Um momento...</p>
-        </div>
-      }
-    </main>
-  </div>
-</div>
+<div class="p-safe h-svh overflow-auto lg:ml-60">
+  <div class="flex h-full flex-col items-start justify-start">
+    <div class="reduced-page-container w-full p-4">
+      <rusbe-header
+        [customAction]="goToPreviousStage.bind(this)"
+        [type]="HEADER_TYPE"
+      >
+        ADICIONAR CRÉDITOS
+      </rusbe-header>
+    </div>
+
+    @if (STAGE_MESSAGE[currentStage()]) {
+      <div class="reduced-page-container w-full p-4">
+        <p class="text-balance text-2xl sm:text-3xl">
+          <strong>{{ STAGE_MESSAGE[currentStage()] }}</strong>
+        </p>
+      </div>
+    }
+
+    <main class="reduced-page-container flex w-full flex-grow">
+      @if (!valueSubmitted()) {
+        <rusbe-top-up-calculator
+          [(value)]="value"
+          (submitted)="onCalculatorConfirm($event)"
+        ></rusbe-top-up-calculator>
+      } @else if (!paymentLocation() && !paymentMethod()) {
+        <rusbe-top-up-payment-method
+          (paymentMethodChanged)="onPaymentMethodChange($event)"
+          (paymentLocationChanged)="onPaymentLocaltionChange($event)"
+        ></rusbe-top-up-payment-method>
+      } @else if (paymentLocation() !== 'InApp' && paymentMethod()) {
+        <rusbe-top-up-in-loco-helper
+          [cpf]="cpf()"
+          [name]="name()"
+          [topUpValue]="value()"
+          [paymentMethod]="paymentMethod()"
+          (backClicked)="goToHome()"
+        ></rusbe-top-up-in-loco-helper>
+      } @else if (paymentMethod() === 'Pix') {
+        <rusbe-top-up-pix
+          [cpf]="cpf()"
+          [name]="name()"
+          [topUpValue]="value()"
+          [pixCode]="pixCode"
+        ></rusbe-top-up-pix>
+      } @else if (paymentMethod() === 'Cartão de crédito') {
+        <rusbe-top-up-credit-card></rusbe-top-up-credit-card>
+      }
+    </main>
+  </div>
+</div>
diff --git a/src/app/pages/top-up/top-up.component.ts b/src/app/pages/top-up/top-up.component.ts
index 2f30fa6..a0ae923 100644
--- a/src/app/pages/top-up/top-up.component.ts
+++ b/src/app/pages/top-up/top-up.component.ts
@@ -1,55 +1,130 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-
-import { NgIcon, provideIcons } from '@ng-icons/core';
+import { CommonModule } from '@angular/common';
 import {
-  lucideChevronRight,
-  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';
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  signal,
+  viewChild,
+} from '@angular/core';
+import { Router } from '@angular/router';
+
 import {
   HeaderComponent,
   HeaderType,
 } from '@rusbe/components/header/header.component';
-
-import { GeneralGoodsTransactionType } from './../../services/general-goods/general-goods.service';
+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 { AuthStateService } from '@rusbe/services/auth-state/auth-state.service';
 
 @Component({
   selector: 'rusbe-top-up',
-  imports: [HeaderComponent, CardGroupComponent, CardButtonComponent, NgIcon],
+  imports: [
+    HeaderComponent,
+    CommonModule,
+    TopUpPaymentMethodComponent,
+    TopUpCalculatorComponent,
+    TopUpPixComponent,
+    TopUpCreditCardComponent,
+    TopUpInLocoHelperComponent,
+  ],
   templateUrl: './top-up.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  viewProviders: [
-    provideIcons({
-      lucidePalette,
-      lucideUtensils,
-      lucideListStart,
-      lucideFullscreen,
-      lucideRotateCcw,
-      lucideEraser,
-      lucideChevronRight,
-    }),
-  ],
 })
 export class TopUpComponent {
   readonly HEADER_TYPE = HeaderType.PageNameWithBackButton;
-  appTransactionTypes = Object.values(GeneralGoodsTransactionType);
-  inLocoTransactionTypes = [
-    'Em espécie',
-    'Cartão de crédito',
-    'Cartão de débito',
-    'Pix',
-  ];
-  TRANSACTION_TYPE_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 STAGE_MESSAGE = {
+    [TopUpStages.Calculator]: 'Quanto você quer adicionar?',
+    [TopUpStages.PaymentMethod]: 'Como você deseja adicionar créditos?',
+    [TopUpStages.InLocoHelper]: 'No guichê, mostre essas informações',
+    [TopUpStages.Pix]: '',
+    [TopUpStages.CreditCard]: '',
   };
+
+  calculatorComponent = viewChild(TopUpCalculatorComponent);
+  paymentMethodComponent = viewChild(TopUpPaymentMethodComponent);
+  inLocoHelperComponent = viewChild(TopUpInLocoHelperComponent);
+  creditCardComponent = viewChild(TopUpCreditCardComponent);
+  pixComponent = viewChild(TopUpPixComponent);
+
+  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 'calculator';
+  });
+
+  valueSubmitted = signal(false);
+  value = signal('0');
+  paymentMethod = signal<PaymentMethods | null>(null);
+  paymentLocation = signal<PaymentLocation | null>(null);
+  pixCode =
+    '00020126580014br.gov.bcb.pix0136bee05743-4291-4f3c-9259-595df1307ba1520400005303986540510.005802BR5914AlexandreLima6019Presidente Prudente62180514Um-Id-Qualquer6304D475';
+
+  name = computed(
+    () => this.authStateService.generalGoodsAccountData()?.fullName ?? '',
+  );
+
+  private readonly router = inject(Router);
+  private readonly authStateService = inject(AuthStateService);
+  cpf = computed(
+    () => this.authStateService.generalGoodsAccountData()?.cpfNumber ?? '',
+  );
+
+  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;
+      default:
+        return false;
+    }
+  }
+
+  goToHome() {
+    this.router.navigate(['/']);
+  }
+
+  onPaymentMethodChange(paymentMethod: PaymentMethods) {
+    this.paymentMethod.set(paymentMethod);
+  }
+
+  onPaymentLocaltionChange(paymentLocation: PaymentLocation) {
+    this.paymentLocation.set(paymentLocation);
+  }
+
+  onCalculatorConfirm(value: boolean) {
+    this.valueSubmitted.set(value);
+  }
+}
+
+export enum TopUpStages {
+  Calculator = 'calculator',
+  PaymentMethod = 'payment-method',
+  Pix = 'pix',
+  CreditCard = 'credit-card',
+  InLocoHelper = 'in-loco-helper',
 }
diff --git a/src/styles.css b/src/styles.css
index 6c10808..b0c931c 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;
   }

From 30813f2cf88ff36e89f20baca8ee7e695d4c0029 Mon Sep 17 00:00:00 2001
From: Guilherme Afonso <guilhermeafonso208@gmail.com>
Date: Fri, 28 Feb 2025 21:12:02 -0300
Subject: [PATCH 04/25] feat: pix transaction data

---
 .../top-up/pix/top-up-pix.component.html      |  4 ++--
 .../top-up/pix/top-up-pix.component.ts        |  4 +++-
 src/app/pages/top-up/top-up.component.html    |  2 +-
 src/app/pages/top-up/top-up.component.ts      | 20 +++++++++++++++++++
 4 files changed, 26 insertions(+), 4 deletions(-)

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
index 9234949..0f9b7fa 100644
--- a/src/app/components/top-up/pix/top-up-pix.component.html
+++ b/src/app/components/top-up/pix/top-up-pix.component.html
@@ -1,4 +1,4 @@
-@if (false) {
+@if (pixTransactionData()) {
   <div class="grouping-cards-container my-2 sm:my-4">
     <section rusbe-card-group [title]="'PAGAR COM PIX'">
       <div class="px-responsive flex w-full flex-col gap-5">
@@ -12,7 +12,7 @@
         </div>
 
         <p class="break-all">
-          {{ pixCode() }}
+          {{ pixTransactionData()?.qrCodeString }}
         </p>
 
         <div class="flex flex-col gap-3">
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
index 853dc3d..ac70f91 100644
--- a/src/app/components/top-up/pix/top-up-pix.component.ts
+++ b/src/app/components/top-up/pix/top-up-pix.component.ts
@@ -15,6 +15,7 @@ import {
 
 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';
 
 @Component({
   selector: 'rusbe-top-up-pix',
@@ -35,10 +36,11 @@ import { SpinnerComponent } from '@rusbe/components/spinner/spinner.component';
 })
 export class TopUpPixComponent {
   topUpValue = input.required<string>();
-  pixCode = input.required<string>();
   cpf = input.required<string>();
   name = input.required<string>();
 
+  pixTransactionData = input<GeneralGoodsPixTransactionData | null>();
+
   parsedTopUpValue = computed(() => parseFloat(this.topUpValue()).toFixed(2));
 
   parsedCpf = computed(() => {
diff --git a/src/app/pages/top-up/top-up.component.html b/src/app/pages/top-up/top-up.component.html
index f578777..487cba0 100644
--- a/src/app/pages/top-up/top-up.component.html
+++ b/src/app/pages/top-up/top-up.component.html
@@ -41,7 +41,7 @@
           [cpf]="cpf()"
           [name]="name()"
           [topUpValue]="value()"
-          [pixCode]="pixCode"
+          [pixTransactionData]="pixTransactionData()"
         ></rusbe-top-up-pix>
       } @else if (paymentMethod() === 'Cartão de crédito') {
         <rusbe-top-up-credit-card></rusbe-top-up-credit-card>
diff --git a/src/app/pages/top-up/top-up.component.ts b/src/app/pages/top-up/top-up.component.ts
index a0ae923..148a9fa 100644
--- a/src/app/pages/top-up/top-up.component.ts
+++ b/src/app/pages/top-up/top-up.component.ts
@@ -3,6 +3,7 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
+  effect,
   inject,
   signal,
   viewChild,
@@ -23,6 +24,11 @@ import {
 } from '@rusbe/components/top-up/payment-method/payment-method.component';
 import { TopUpPixComponent } from '@rusbe/components/top-up/pix/top-up-pix.component';
 import { AuthStateService } from '@rusbe/services/auth-state/auth-state.service';
+import {
+  GeneralGoodsPixTransactionData,
+  GeneralGoodsService,
+} from '@rusbe/services/general-goods/general-goods.service';
+import { BrlCurrency } from '@rusbe/types/brl-currency';
 
 @Component({
   selector: 'rusbe-top-up',
@@ -75,17 +81,31 @@ export class TopUpComponent {
   paymentLocation = signal<PaymentLocation | null>(null);
   pixCode =
     '00020126580014br.gov.bcb.pix0136bee05743-4291-4f3c-9259-595df1307ba1520400005303986540510.005802BR5914AlexandreLima6019Presidente Prudente62180514Um-Id-Qualquer6304D475';
+  pixTransactionData = signal<GeneralGoodsPixTransactionData | null>(null);
 
   name = computed(
     () => this.authStateService.generalGoodsAccountData()?.fullName ?? '',
   );
 
   private readonly router = inject(Router);
+  private readonly generalGoodsService = inject(GeneralGoodsService);
   private readonly authStateService = inject(AuthStateService);
   cpf = computed(
     () => this.authStateService.generalGoodsAccountData()?.cpfNumber ?? '',
   );
 
+  constructor() {
+    effect(async () => {
+      if (this.pixComponent()) {
+        const pixData =
+          await this.generalGoodsService.startAddCreditsTransactionUsingPix(
+            BrlCurrency.fromNumber(parseFloat(this.value())),
+          );
+        this.pixTransactionData.set(pixData);
+      }
+    });
+  }
+
   goToPreviousStage(): boolean {
     switch (this.currentStage()) {
       case 'calculator':

From 6fed8035883b43da275b6891f7fec538d68c0600 Mon Sep 17 00:00:00 2001
From: Guilherme Afonso <guilhermeafonso208@gmail.com>
Date: Tue, 4 Mar 2025 03:26:56 -0300
Subject: [PATCH 05/25] feat: add error handling and pix timer

---
 src/app/app.routes.ts                         |  2 +-
 .../card-button/card-button.component.html    |  7 ++
 .../card-button/card-button.component.ts      |  1 +
 .../payment-method.component.html             |  1 +
 .../top-up/pix/top-up-pix.component.html      | 45 ++++++++-
 .../top-up/pix/top-up-pix.component.ts        | 15 ++-
 src/app/pages/home/home.component.html        |  6 +-
 src/app/pages/top-up/top-up.component.html    | 23 +++--
 src/app/pages/top-up/top-up.component.ts      | 98 ++++++++++++++-----
 9 files changed, 162 insertions(+), 36 deletions(-)

diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index e848e42..0cf88c1 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -88,7 +88,7 @@ export const routes: Routes = [
     path: 'top-up',
     loadComponent: () =>
       import('./pages/top-up/top-up.component').then((m) => m.TopUpComponent),
-    ...canActivate(redirectUnauthorizedToLogin),
+    ...canActivate(redirectFirebaseUnauthorizedToLogin),
   },
   {
     path: '404',
diff --git a/src/app/components/cards/card-button/card-button.component.html b/src/app/components/cards/card-button/card-button.component.html
index c245e7d..0f5d132 100644
--- a/src/app/components/cards/card-button/card-button.component.html
+++ b/src/app/components/cards/card-button/card-button.component.html
@@ -14,6 +14,13 @@ <h3><ng-content></ng-content></h3>
       {{ subtitle() }}
     </p>
   </div>
+  @if (badgeText()) {
+    <p
+      class="transition-appear whitespace-pre rounded-md bg-accent px-2 py-1 font-geometric text-xs font-bold uppercase text-accent-contrast sm:mx-6 sm:mt-6"
+    >
+      {{ badgeText() }}
+    </p>
+  }
   <ng-icon
     class="min-w-fit"
     name="lucideChevronRight"
diff --git a/src/app/components/cards/card-button/card-button.component.ts b/src/app/components/cards/card-button/card-button.component.ts
index 57e8b62..d8cfd5e 100644
--- a/src/app/components/cards/card-button/card-button.component.ts
+++ b/src/app/components/cards/card-button/card-button.component.ts
@@ -13,4 +13,5 @@ import { NgIcon } from '@ng-icons/core';
 export class CardButtonComponent {
   subtitle = input('');
   iconName = input('');
+  badgeText = input('');
 }
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
index ced4273..6fc1d7a 100644
--- a/src/app/components/top-up/payment-method/payment-method.component.html
+++ b/src/app/components/top-up/payment-method/payment-method.component.html
@@ -6,6 +6,7 @@
           rusbe-card-button
           [iconName]="PAYMENT_METHOD_ICONS[paymentMethod]"
           [disabled]="paymentMethod === 'Cartão de crédito'"
+          [badgeText]="paymentMethod === 'Cartão de crédito' ? 'Vem aí!' : ''"
           [subtitle]="PAYMENT_METHOD_MESSAGES[paymentMethod]"
           (click)="handlePaymentMethodSelection(paymentMethod, 'InApp')"
         >
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
index 0f9b7fa..a80f0c8 100644
--- a/src/app/components/top-up/pix/top-up-pix.component.html
+++ b/src/app/components/top-up/pix/top-up-pix.component.html
@@ -1,4 +1,30 @@
-@if (pixTransactionData()) {
+@if (pixErrorMessage()) {
+  <div class="grouping-card flex h-full w-full flex-grow flex-col p-4">
+    <div
+      class="flex h-full w-full flex-grow flex-col items-center justify-center gap-3"
+    >
+      <ng-icon
+        class="text-accent"
+        [size]="'16px'"
+        name="lucideInfo"
+        aria-hidden="true"
+      ></ng-icon>
+      <p class="pt-2 text-base sm:pt-4 sm:text-xl">{{ pixErrorMessage() }}</p>
+    </div>
+
+    <button
+      (click)="(null)"
+      class="button-large button-split px-responsive bg-accent text-accent-contrast focus:ring-offset-background"
+    >
+      Tentar novamente
+      <ng-icon
+        class="color-accent-contrast min-w-fit"
+        name="lucideMoveRight"
+        aria-hidden="true"
+      ></ng-icon>
+    </button>
+  </div>
+} @else if (pixTransactionData()) {
   <div class="grouping-cards-container my-2 sm:my-4">
     <section rusbe-card-group [title]="'PAGAR COM PIX'">
       <div class="px-responsive flex w-full flex-col gap-5">
@@ -15,6 +41,10 @@
           {{ pixTransactionData()?.qrCodeString }}
         </p>
 
+        <p class="text-xs">
+          Tempo restante para pagamento: <strong>{{ timeLeft() }}</strong>
+        </p>
+
         <div class="flex flex-col gap-3">
           <button
             (click)="(null)"
@@ -28,10 +58,11 @@
             ></ng-icon>
           </button>
           <button
-            (click)="(null)"
+            (click)="showPixQrCode.set(!showPixQrCode())"
+            [disabled]="!pixQrCodeSource()"
             class="button-split px-responsive bg-accent-contrast text-accent focus:ring-offset-background"
           >
-            Mostrar código QR Pix
+            {{ showPixQrCode() ? 'Esconder' : 'Mostrar' }} código QR Pix
             <ng-icon
               class="color-accent-contrast min-w-fit"
               name="lucideScanQrCode"
@@ -40,6 +71,14 @@
           </button>
         </div>
 
+        @if (showPixQrCode()) {
+          <img
+            class="w-full rounded-3xl"
+            [src]="pixQrCodeSource()"
+            alt="Código QR Pix"
+          />
+        }
+
         <p>
           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
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
index ac70f91..38c3454 100644
--- a/src/app/components/top-up/pix/top-up-pix.component.ts
+++ b/src/app/components/top-up/pix/top-up-pix.component.ts
@@ -3,12 +3,15 @@ import {
   Component,
   computed,
   input,
+  signal,
 } from '@angular/core';
 
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import {
   lucideCalendarDays,
   lucideCopy,
+  lucideInfo,
+  lucideMoveRight,
   lucideScanQrCode,
   lucideUserRound,
 } from '@ng-icons/lucide';
@@ -28,6 +31,8 @@ import { GeneralGoodsPixTransactionData } from '@rusbe/services/general-goods/ge
       lucideScanQrCode,
       lucideCalendarDays,
       lucideUserRound,
+      lucideMoveRight,
+      lucideInfo,
     }),
   ],
   host: {
@@ -38,17 +43,25 @@ export class TopUpPixComponent {
   topUpValue = input.required<string>();
   cpf = input.required<string>();
   name = input.required<string>();
+  timeLeft = input.required<string>();
 
   pixTransactionData = input<GeneralGoodsPixTransactionData | null>();
+  pixErrorMessage = input<string>('');
 
+  pixQrCodeSource = computed(() => {
+    const pixTransactionData = this.pixTransactionData();
+    if (!pixTransactionData) return '';
+    return `data:image/png;base64, ${pixTransactionData.qrCodeBase64Image}`;
+  });
   parsedTopUpValue = computed(() => parseFloat(this.topUpValue()).toFixed(2));
-
   parsedCpf = computed(() => {
     const cpfNumber = this.cpf();
     if (!cpfNumber) return '';
     return cpfNumber.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '•••.•••.$3-$4');
   });
 
+  showPixQrCode = signal(false);
+
   readonly today = new Date();
   readonly formatedDate = `${this.today.toLocaleDateString('pt-BR', { day: '2-digit', month: 'long', year: 'numeric' })}, ${Intl.DateTimeFormat('pt-BR', { hour: 'numeric', minute: 'numeric' }).format(this.today)}`;
 }
diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
index 3efb33a..92530ad 100644
--- a/src/app/pages/home/home.component.html
+++ b/src/app/pages/home/home.component.html
@@ -27,10 +27,10 @@
           <rusbe-sign-in-card class="xs:col-span-2"></rusbe-sign-in-card>
         } @else {
           <rusbe-credits-card class="xs:col-span-2"></rusbe-credits-card>
-          <rusbe-link-card destination="/top-up" iconName="lucideWallet"
-            >Adicionar créditos</rusbe-link-card
-          >
         }
+        <rusbe-link-card destination="/top-up" iconName="lucideWallet"
+          >Adicionar créditos</rusbe-link-card
+        >
         <rusbe-link-card destination="/menu" iconName="lucideFolderClock"
           >Histórico de cardápios</rusbe-link-card
         >
diff --git a/src/app/pages/top-up/top-up.component.html b/src/app/pages/top-up/top-up.component.html
index 487cba0..4fa69e5 100644
--- a/src/app/pages/top-up/top-up.component.html
+++ b/src/app/pages/top-up/top-up.component.html
@@ -9,7 +9,7 @@
       </rusbe-header>
     </div>
 
-    @if (STAGE_MESSAGE[currentStage()]) {
+    @if (!topUpUnavailable() && STAGE_MESSAGE[currentStage()]) {
       <div class="reduced-page-container w-full p-4">
         <p class="text-balance text-2xl sm:text-3xl">
           <strong>{{ STAGE_MESSAGE[currentStage()] }}</strong>
@@ -18,7 +18,16 @@
     }
 
     <main class="reduced-page-container flex w-full flex-grow">
-      @if (!valueSubmitted()) {
+      @if (topUpUnavailable()) {
+        <div
+          class="transition-appear flex h-full w-full flex-col items-center justify-center gap-2 p-4 sm:gap-4"
+        >
+          <p class="text-base sm:text-xl">
+            Infelizmente, o sistema da General Goods está fora do ar.
+          </p>
+          <p>Por favor, tente novamente mais tarde.</p>
+        </div>
+      } @else if (!valueSubmitted()) {
         <rusbe-top-up-calculator
           [(value)]="value"
           (submitted)="onCalculatorConfirm($event)"
@@ -30,18 +39,20 @@
         ></rusbe-top-up-payment-method>
       } @else if (paymentLocation() !== 'InApp' && paymentMethod()) {
         <rusbe-top-up-in-loco-helper
-          [cpf]="cpf()"
-          [name]="name()"
+          [cpf]="accountData().cpfNumber"
+          [name]="accountData().fullName"
           [topUpValue]="value()"
           [paymentMethod]="paymentMethod()"
           (backClicked)="goToHome()"
         ></rusbe-top-up-in-loco-helper>
       } @else if (paymentMethod() === 'Pix') {
         <rusbe-top-up-pix
-          [cpf]="cpf()"
-          [name]="name()"
+          [cpf]="accountData().cpfNumber"
+          [name]="accountData().fullName"
           [topUpValue]="value()"
+          [timeLeft]="remainingTimeString()"
           [pixTransactionData]="pixTransactionData()"
+          [pixErrorMessage]="pixErrorMessage()"
         ></rusbe-top-up-pix>
       } @else if (paymentMethod() === 'Cartão de crédito') {
         <rusbe-top-up-credit-card></rusbe-top-up-credit-card>
diff --git a/src/app/pages/top-up/top-up.component.ts b/src/app/pages/top-up/top-up.component.ts
index 148a9fa..b62c6b2 100644
--- a/src/app/pages/top-up/top-up.component.ts
+++ b/src/app/pages/top-up/top-up.component.ts
@@ -10,6 +10,8 @@ import {
 } from '@angular/core';
 import { Router } from '@angular/router';
 
+import { interval, takeUntil, timer } from 'rxjs';
+
 import {
   HeaderComponent,
   HeaderType,
@@ -23,12 +25,16 @@ import {
   TopUpPaymentMethodComponent,
 } from '@rusbe/components/top-up/payment-method/payment-method.component';
 import { TopUpPixComponent } from '@rusbe/components/top-up/pix/top-up-pix.component';
-import { AuthStateService } from '@rusbe/services/auth-state/auth-state.service';
+import {
+  AccountAuthState,
+  AuthStateService,
+} from '@rusbe/services/auth-state/auth-state.service';
 import {
   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',
@@ -53,6 +59,7 @@ export class TopUpComponent {
     [TopUpStages.Pix]: '',
     [TopUpStages.CreditCard]: '',
   };
+  readonly FIFHTEEEN_MINUTES = 15 * 1000;
 
   calculatorComponent = viewChild(TopUpCalculatorComponent);
   paymentMethodComponent = viewChild(TopUpPaymentMethodComponent);
@@ -60,6 +67,24 @@ export class TopUpComponent {
   creditCardComponent = viewChild(TopUpCreditCardComponent);
   pixComponent = viewChild(TopUpPixComponent);
 
+  valueSubmitted = signal(false);
+  value = signal('0');
+  paymentMethod = signal<PaymentMethods | null>(null);
+  paymentLocation = signal<PaymentLocation | null>(null);
+  pixTransactionData = signal<GeneralGoodsPixTransactionData | null>(null);
+  pixErrorMessage = signal('');
+  remainingTimeString = signal(this.parseRemainingTime(0));
+
+  accountData = computed(() => {
+    const accountData = this.authStateService.generalGoodsAccountData();
+    if (!accountData) return { fullName: '', cpfNumber: '' };
+
+    return {
+      fullName: accountData.fullName,
+      cpfNumber: accountData.cpfNumber,
+    };
+  });
+
   currentStage = computed(() => {
     if (this.calculatorComponent()) {
       return 'calculator';
@@ -75,34 +100,19 @@ export class TopUpComponent {
     return 'calculator';
   });
 
-  valueSubmitted = signal(false);
-  value = signal('0');
-  paymentMethod = signal<PaymentMethods | null>(null);
-  paymentLocation = signal<PaymentLocation | null>(null);
-  pixCode =
-    '00020126580014br.gov.bcb.pix0136bee05743-4291-4f3c-9259-595df1307ba1520400005303986540510.005802BR5914AlexandreLima6019Presidente Prudente62180514Um-Id-Qualquer6304D475';
-  pixTransactionData = signal<GeneralGoodsPixTransactionData | null>(null);
+  topUpUnavailable = computed(() => {
+    const accountAuthState = this.authStateService.accountAuthState();
 
-  name = computed(
-    () => this.authStateService.generalGoodsAccountData()?.fullName ?? '',
-  );
+    return accountAuthState === AccountAuthState.GeneralGoodsServiceUnavailable;
+  });
 
   private readonly router = inject(Router);
   private readonly generalGoodsService = inject(GeneralGoodsService);
   private readonly authStateService = inject(AuthStateService);
-  cpf = computed(
-    () => this.authStateService.generalGoodsAccountData()?.cpfNumber ?? '',
-  );
 
   constructor() {
-    effect(async () => {
-      if (this.pixComponent()) {
-        const pixData =
-          await this.generalGoodsService.startAddCreditsTransactionUsingPix(
-            BrlCurrency.fromNumber(parseFloat(this.value())),
-          );
-        this.pixTransactionData.set(pixData);
-      }
+    effect(() => {
+      if (this.pixComponent()) this.startPixTransaction();
     });
   }
 
@@ -139,6 +149,50 @@ export class TopUpComponent {
   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.pixErrorMessage.set(
+          'Ocorreu um erro ao tentar gerar o código pix.',
+        );
+        return;
+      }
+      this.pixErrorMessage.set(
+        'Ocorreu um erro desconhecido. Por favor, tente novamente.',
+      );
+    }
+  }
+
+  private startPixTimer() {
+    const source = interval(1000);
+
+    const result = source.pipe(takeUntil(timer(this.FIFHTEEEN_MINUTES)));
+
+    result.subscribe({
+      next: (timeSpent) => {
+        this.remainingTimeString.set(this.parseRemainingTime(timeSpent));
+      },
+      complete: () => {
+        this.router.navigate(['/']);
+      },
+    });
+  }
+
+  private parseRemainingTime(timeSpent: number): string {
+    const remainingTime = this.FIFHTEEEN_MINUTES - timeSpent * 1000;
+    const minutes = Math.floor(remainingTime / 60000);
+    const seconds = Math.floor((remainingTime % 60000) / 1000);
+    return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+  }
 }
 
 export enum TopUpStages {

From e540bab08673fa5f7e6c9cd04170a3d47d8237ad Mon Sep 17 00:00:00 2001
From: Guilherme Afonso <guilhermeafonso208@gmail.com>
Date: Tue, 4 Mar 2025 03:30:29 -0300
Subject: [PATCH 06/25] fix: default timeout

---
 src/app/pages/top-up/top-up.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/pages/top-up/top-up.component.ts b/src/app/pages/top-up/top-up.component.ts
index b62c6b2..f4d6b51 100644
--- a/src/app/pages/top-up/top-up.component.ts
+++ b/src/app/pages/top-up/top-up.component.ts
@@ -59,7 +59,7 @@ export class TopUpComponent {
     [TopUpStages.Pix]: '',
     [TopUpStages.CreditCard]: '',
   };
-  readonly FIFHTEEEN_MINUTES = 15 * 1000;
+  readonly FIFHTEEEN_MINUTES = 15 * 60 * 1000;
 
   calculatorComponent = viewChild(TopUpCalculatorComponent);
   paymentMethodComponent = viewChild(TopUpPaymentMethodComponent);

From 1c4e13354b88d9175ceb28d73165a7fc7cd506da Mon Sep 17 00:00:00 2001
From: Guilherme Afonso <guilhermeafonso208@gmail.com>
Date: Tue, 4 Mar 2025 14:03:14 -0300
Subject: [PATCH 07/25] refactor: cleanup of unnecessary code

---
 .../top-up/credit-card/top-up-credit-card.component.html        | 2 --
 src/app/pages/top-up/top-up.component.html                      | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

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
index 6859037..e69de29 100644
--- 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
@@ -1,2 +0,0 @@
-<p>top-up-credit-card works!</p>
-,
diff --git a/src/app/pages/top-up/top-up.component.html b/src/app/pages/top-up/top-up.component.html
index 4fa69e5..319b987 100644
--- a/src/app/pages/top-up/top-up.component.html
+++ b/src/app/pages/top-up/top-up.component.html
@@ -37,7 +37,7 @@
           (paymentMethodChanged)="onPaymentMethodChange($event)"
           (paymentLocationChanged)="onPaymentLocaltionChange($event)"
         ></rusbe-top-up-payment-method>
-      } @else if (paymentLocation() !== 'InApp' && paymentMethod()) {
+      } @else if (paymentLocation() === 'InLoco') {
         <rusbe-top-up-in-loco-helper
           [cpf]="accountData().cpfNumber"
           [name]="accountData().fullName"

From c6a457252b02512455e3202bdb29f2c93f028a10 Mon Sep 17 00:00:00 2001
From: Guilherme Afonso <guilhermeafonso208@gmail.com>
Date: Tue, 4 Mar 2025 14:05:16 -0300
Subject: [PATCH 08/25] refactor: remove unused import

---
 .../components/jumbo-text-input/jumbo-text-input.component.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/components/jumbo-text-input/jumbo-text-input.component.ts b/src/app/components/jumbo-text-input/jumbo-text-input.component.ts
index 5317e89..ea64564 100644
--- a/src/app/components/jumbo-text-input/jumbo-text-input.component.ts
+++ b/src/app/components/jumbo-text-input/jumbo-text-input.component.ts
@@ -1,11 +1,11 @@
 import { Component, computed, input, model } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
-import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
+import { provideNgxMask } from 'ngx-mask';
 
 @Component({
   selector: 'rusbe-jumbo-text-input',
-  imports: [NgxMaskDirective, FormsModule],
+  imports: [FormsModule],
   providers: [provideNgxMask()],
   templateUrl: './jumbo-text-input.component.html',
 })

From c59d0b1101377321ff51d0252ebc7eb583e487d9 Mon Sep 17 00:00:00 2001
From: Guilherme Afonso <guilhermeafonso208@gmail.com>
Date: Tue, 4 Mar 2025 14:39:43 -0300
Subject: [PATCH 09/25] refactor: code structure and naming

---
 .../calculator/top-up-calculator.component.ts   | 15 ++++++++++-----
 .../top-up-in-loco-helper.component.ts          | 13 +++++++------
 .../top-up/pix/top-up-pix.component.html        |  2 +-
 .../top-up/pix/top-up-pix.component.ts          | 17 +++++++++++++++--
 4 files changed, 33 insertions(+), 14 deletions(-)

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
index 097045a..904e266 100644
--- a/src/app/components/top-up/calculator/top-up-calculator.component.ts
+++ b/src/app/components/top-up/calculator/top-up-calculator.component.ts
@@ -40,19 +40,24 @@ import { WarningCardComponent } from '@rusbe/components/warning-card/warning-car
 export class TopUpCalculatorComponent {
   submitted = output<boolean>();
 
-  inputDisabled = signal(false);
   value = model.required<string>();
 
+  inputDisabled = signal(false);
+
   readonly topUpValue = new FormControl(
     { value: '0', disabled: this.inputDisabled() },
     {
-      validators: [Validators.required, lowTopUpValue, highTopUpValue],
+      validators: [
+        Validators.required,
+        lowTopUpValueValidator,
+        highTopUpValueValidator,
+      ],
     },
   );
 
   readonly maskConfig = {
     align: 'left',
-    allowNegative: true,
+    allowNegative: false,
     allowZero: true,
     decimal: ',',
     precision: 2,
@@ -72,14 +77,14 @@ export class TopUpCalculatorComponent {
   }
 }
 
-const lowTopUpValue: ValidatorFn = (
+const lowTopUpValueValidator: ValidatorFn = (
   control: AbstractControl,
 ): ValidationErrors | null => {
   const value = control.value;
   return value < 1 ? { lowTopUpValue: true } : null;
 };
 
-const highTopUpValue: ValidatorFn = (
+const highTopUpValueValidator: ValidatorFn = (
   control: AbstractControl,
 ): ValidationErrors | null => {
   const value = control.value;
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
index 971c652..e8262c4 100644
--- 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
@@ -35,15 +35,16 @@ export class TopUpInLocoHelperComponent {
   topUpValue = input.required<string>();
   paymentMethod = input.required<PaymentMethods | null>();
 
-  parsedCpf = computed(() => {
-    const cpfNumber = this.cpf();
-    if (!cpfNumber) return '';
-    return cpfNumber.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3-$4');
-  });
-
+  parsedCpf = computed(this.parseCpfNumber.bind(this));
   parsedValue = computed(() => parseFloat(this.topUpValue()).toFixed(2));
 
   onBackClicked(): void {
     this.backClicked.emit();
   }
+
+  private parseCpfNumber(): string {
+    const cpfNumber = this.cpf();
+    if (!cpfNumber) return '';
+    return cpfNumber.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3-$4');
+  }
 }
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
index a80f0c8..9b926d0 100644
--- a/src/app/components/top-up/pix/top-up-pix.component.html
+++ b/src/app/components/top-up/pix/top-up-pix.component.html
@@ -92,7 +92,7 @@
             aria-hidden="true"
           ></ng-icon>
           <p>
-            <strong>{{ formatedDate }}</strong>
+            <strong>{{ LOCALIZED_CURRENT_DATE }}</strong>
           </p>
         </div>
         <div
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
index 38c3454..f057444 100644
--- a/src/app/components/top-up/pix/top-up-pix.component.ts
+++ b/src/app/components/top-up/pix/top-up-pix.component.ts
@@ -40,6 +40,9 @@ import { GeneralGoodsPixTransactionData } from '@rusbe/services/general-goods/ge
   },
 })
 export class TopUpPixComponent {
+  readonly CURRENT_DATE = new Date();
+  readonly LOCALIZED_CURRENT_DATE = this.parseCurrentDate();
+
   topUpValue = input.required<string>();
   cpf = input.required<string>();
   name = input.required<string>();
@@ -62,6 +65,16 @@ export class TopUpPixComponent {
 
   showPixQrCode = signal(false);
 
-  readonly today = new Date();
-  readonly formatedDate = `${this.today.toLocaleDateString('pt-BR', { day: '2-digit', month: 'long', year: 'numeric' })}, ${Intl.DateTimeFormat('pt-BR', { hour: 'numeric', minute: 'numeric' }).format(this.today)}`;
+  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}`;
+  }
 }

From 4f18b24bf29218c1307e66a529055977cb66e0d3 Mon Sep 17 00:00:00 2001
From: Guilherme Afonso <guilhermeafonso208@gmail.com>
Date: Tue, 4 Mar 2025 14:43:29 -0300
Subject: [PATCH 10/25] refactor: code structure and naming

---
 .../top-up-in-loco-helper.component.ts        |  2 +-
 .../top-up/pix/top-up-pix.component.ts        | 24 +++++++++++--------
 2 files changed, 15 insertions(+), 11 deletions(-)

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
index e8262c4..509be5a 100644
--- 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
@@ -35,7 +35,7 @@ export class TopUpInLocoHelperComponent {
   topUpValue = input.required<string>();
   paymentMethod = input.required<PaymentMethods | null>();
 
-  parsedCpf = computed(this.parseCpfNumber.bind(this));
+  parsedCpf = computed(() => this.parseCpfNumber());
   parsedValue = computed(() => parseFloat(this.topUpValue()).toFixed(2));
 
   onBackClicked(): void {
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
index f057444..ca04867 100644
--- a/src/app/components/top-up/pix/top-up-pix.component.ts
+++ b/src/app/components/top-up/pix/top-up-pix.component.ts
@@ -51,17 +51,9 @@ export class TopUpPixComponent {
   pixTransactionData = input<GeneralGoodsPixTransactionData | null>();
   pixErrorMessage = input<string>('');
 
-  pixQrCodeSource = computed(() => {
-    const pixTransactionData = this.pixTransactionData();
-    if (!pixTransactionData) return '';
-    return `data:image/png;base64, ${pixTransactionData.qrCodeBase64Image}`;
-  });
+  pixQrCodeSource = computed(() => this.parseBase64ImageSource());
   parsedTopUpValue = computed(() => parseFloat(this.topUpValue()).toFixed(2));
-  parsedCpf = computed(() => {
-    const cpfNumber = this.cpf();
-    if (!cpfNumber) return '';
-    return cpfNumber.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '•••.•••.$3-$4');
-  });
+  parsedCpf = computed(() => this.parseCpfNumber());
 
   showPixQrCode = signal(false);
 
@@ -77,4 +69,16 @@ export class TopUpPixComponent {
     }).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 '';
+    return cpfNumber.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '•••.•••.$3-$4');
+  }
 }

From 35c3ddcc1ae95f979122f738e5e5fab8abdf4ae4 Mon Sep 17 00:00:00 2001
From: Guilherme Afonso <guilhermeafonso208@gmail.com>
Date: Tue, 4 Mar 2025 17:42:28 -0300
Subject: [PATCH 11/25] feat: ui improvements

---
 .../payment-method.component.html             |  61 ++++-----
 .../payment-method.component.ts               |   3 +-
 .../top-up/pix/top-up-pix.component.html      |  69 ++++------
 .../top-up/pix/top-up-pix.component.ts        |  17 ++-
 src/app/pages/top-up/top-up.component.html    | 118 +++++++++++-------
 src/app/pages/top-up/top-up.component.ts      |  75 ++++++++---
 src/styles.css                                |   2 +-
 7 files changed, 198 insertions(+), 147 deletions(-)

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
index 6fc1d7a..e0c9f18 100644
--- a/src/app/components/top-up/payment-method/payment-method.component.html
+++ b/src/app/components/top-up/payment-method/payment-method.component.html
@@ -1,38 +1,29 @@
 <div class="grouping-cards-container my-2 sm:my-4">
-  @if (true) {
-    <section rusbe-card-group [title]="'PELO APP'">
-      @for (paymentMethod of inAppPaymentMethods; track $index) {
-        <button
-          rusbe-card-button
-          [iconName]="PAYMENT_METHOD_ICONS[paymentMethod]"
-          [disabled]="paymentMethod === 'Cartão de crédito'"
-          [badgeText]="paymentMethod === 'Cartão de crédito' ? 'Vem aí!' : ''"
-          [subtitle]="PAYMENT_METHOD_MESSAGES[paymentMethod]"
-          (click)="handlePaymentMethodSelection(paymentMethod, 'InApp')"
-        >
-          {{ paymentMethod }}
-        </button>
-      }
-    </section>
+  <section rusbe-card-group [title]="'PELO APP'">
+    @for (paymentMethod of inAppPaymentMethods; track $index) {
+      <button
+        rusbe-card-button
+        [iconName]="PAYMENT_METHOD_ICONS[paymentMethod]"
+        [disabled]="paymentMethod === 'Cartão de crédito'"
+        [badgeText]="paymentMethod === 'Cartão de crédito' ? 'Vem aí!' : ''"
+        [subtitle]="PAYMENT_METHOD_MESSAGES[paymentMethod]"
+        (click)="handlePaymentMethodSelection(paymentMethod, 'InApp')"
+      >
+        {{ paymentMethod }}
+      </button>
+    }
+  </section>
 
-    <section rusbe-card-group [title]="'PRESENCIALMENTE NO GUICHÊ'">
-      @for (paymentMethod of inLocoPaymentMethods; track $index) {
-        <button
-          rusbe-card-button
-          [iconName]="PAYMENT_METHOD_ICONS[paymentMethod]"
-          [subtitle]="'Dirija-se ao guichê para completar a compra.'"
-          (click)="handlePaymentMethodSelection(paymentMethod, 'InLoco')"
-        >
-          {{ paymentMethod }}
-        </button>
-      }
-    </section>
-  } @else {
-    <div
-      class="grouping-card flex h-80 flex-col items-center justify-center sm:h-96"
-    >
-      <rusbe-spinner class="h-8 w-8 text-accent"></rusbe-spinner>
-      <p class="pt-2 text-base sm:pt-4 sm:text-xl">Um momento...</p>
-    </div>
-  }
+  <section rusbe-card-group [title]="'PRESENCIALMENTE NO GUICHÊ'">
+    @for (paymentMethod of inLocoPaymentMethods; track $index) {
+      <button
+        rusbe-card-button
+        [iconName]="PAYMENT_METHOD_ICONS[paymentMethod]"
+        [subtitle]="'Dirija-se ao guichê para completar a compra.'"
+        (click)="handlePaymentMethodSelection(paymentMethod, 'InLoco')"
+      >
+        {{ paymentMethod }}
+      </button>
+    }
+  </section>
 </div>
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
index 53172f2..97d930a 100644
--- a/src/app/components/top-up/payment-method/payment-method.component.ts
+++ b/src/app/components/top-up/payment-method/payment-method.component.ts
@@ -15,12 +15,11 @@ import {
 
 import { CardButtonComponent } from '@rusbe/components/cards/card-button/card-button.component';
 import { CardGroupComponent } from '@rusbe/components/cards/card-group/card-group.component';
-import { SpinnerComponent } from '@rusbe/components/spinner/spinner.component';
 import { GeneralGoodsTransactionType } from '@rusbe/services/general-goods/general-goods.service';
 
 @Component({
   selector: 'rusbe-top-up-payment-method',
-  imports: [CardGroupComponent, CardButtonComponent, SpinnerComponent],
+  imports: [CardGroupComponent, CardButtonComponent],
   templateUrl: './payment-method.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   viewProviders: [
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
index 9b926d0..e6675f1 100644
--- a/src/app/components/top-up/pix/top-up-pix.component.html
+++ b/src/app/components/top-up/pix/top-up-pix.component.html
@@ -1,30 +1,4 @@
-@if (pixErrorMessage()) {
-  <div class="grouping-card flex h-full w-full flex-grow flex-col p-4">
-    <div
-      class="flex h-full w-full flex-grow flex-col items-center justify-center gap-3"
-    >
-      <ng-icon
-        class="text-accent"
-        [size]="'16px'"
-        name="lucideInfo"
-        aria-hidden="true"
-      ></ng-icon>
-      <p class="pt-2 text-base sm:pt-4 sm:text-xl">{{ pixErrorMessage() }}</p>
-    </div>
-
-    <button
-      (click)="(null)"
-      class="button-large button-split px-responsive bg-accent text-accent-contrast focus:ring-offset-background"
-    >
-      Tentar novamente
-      <ng-icon
-        class="color-accent-contrast min-w-fit"
-        name="lucideMoveRight"
-        aria-hidden="true"
-      ></ng-icon>
-    </button>
-  </div>
-} @else if (pixTransactionData()) {
+@if (pixTransactionData()) {
   <div class="grouping-cards-container my-2 sm:my-4">
     <section rusbe-card-group [title]="'PAGAR COM PIX'">
       <div class="px-responsive flex w-full flex-col gap-5">
@@ -41,21 +15,23 @@
           {{ pixTransactionData()?.qrCodeString }}
         </p>
 
-        <p class="text-xs">
-          Tempo restante para pagamento: <strong>{{ timeLeft() }}</strong>
-        </p>
-
         <div class="flex flex-col gap-3">
           <button
-            (click)="(null)"
+            (click)="copyPasswordToClipboard()"
             class="button-split px-responsive bg-accent text-accent-contrast focus:ring-offset-background"
           >
-            Copiar código
-            <ng-icon
-              class="color-accent-contrast min-w-fit"
-              name="lucideCopy"
-              aria-hidden="true"
-            ></ng-icon>
+            <span> Copiar código </span>
+            <div class="flex flex-row items-center gap-2">
+              @if (copiedToClipboard()) {
+                <span class="font-light"> Copiado! </span>
+              }
+              <ng-icon
+                class="color-accent-contrast min-w-fit"
+                name="lucideCopy"
+                aria-hidden="true"
+              >
+              </ng-icon>
+            </div>
           </button>
           <button
             (click)="showPixQrCode.set(!showPixQrCode())"
@@ -106,16 +82,19 @@
             ></ng-icon>
           </div>
           <div class="col-span-1 row-span-1 grid">
-            <p class="w-fit">
+            <p class="w-fit font-geometric tabular-nums">
               <strong>{{ parsedCpf() }}</strong>
             </p>
           </div>
           <div class="col-span-1 row-span-1 grid">
-            <p class="w-auto">
-              <strong>{{ name() }}</strong>
+            <p class="text-condensed w-auto">
+              {{ name() }}
             </p>
           </div>
         </div>
+        <p class="text-xs">
+          Tempo restante para pagamento: <strong>{{ timeLeft() }}</strong>
+        </p>
       </div>
     </section>
     <div class="px-responsive flex flex-col gap-5">
@@ -135,9 +114,11 @@
   </div>
 } @else {
   <div
-    class="grouping-card flex h-full w-full flex-col items-center justify-center sm:h-96"
+    class="flex h-full w-full flex-col items-center justify-center gap-4 py-4 sm:gap-8"
   >
-    <rusbe-spinner class="h-8 w-8 text-accent"></rusbe-spinner>
-    <p class="pt-2 text-base sm:pt-4 sm:text-xl">Gerando código pix...</p>
+    <div class="h-12 w-12 sm:h-16 sm:w-16">
+      <rusbe-spinner></rusbe-spinner>
+    </div>
+    <p class="text-balance text-xl sm:text-3xl">Gerando código pix...</p>
   </div>
 }
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
index ca04867..75adc1b 100644
--- a/src/app/components/top-up/pix/top-up-pix.component.ts
+++ b/src/app/components/top-up/pix/top-up-pix.component.ts
@@ -1,7 +1,9 @@
+import { Clipboard } from '@angular/cdk/clipboard';
 import {
   ChangeDetectionStrategy,
   Component,
   computed,
+  inject,
   input,
   signal,
 } from '@angular/core';
@@ -49,13 +51,22 @@ export class TopUpPixComponent {
   timeLeft = input.required<string>();
 
   pixTransactionData = input<GeneralGoodsPixTransactionData | null>();
-  pixErrorMessage = input<string>('');
 
   pixQrCodeSource = computed(() => this.parseBase64ImageSource());
   parsedTopUpValue = computed(() => parseFloat(this.topUpValue()).toFixed(2));
   parsedCpf = computed(() => this.parseCpfNumber());
 
-  showPixQrCode = signal(false);
+  showPixQrCode = signal<boolean>(false);
+  copiedToClipboard = signal<boolean>(false);
+
+  private readonly clipboard = inject(Clipboard);
+
+  copyPasswordToClipboard() {
+    const pixTransactionData = this.pixTransactionData();
+    if (!pixTransactionData) return;
+    this.clipboard.copy(pixTransactionData.qrCodeString);
+    this.copiedToClipboard.set(true);
+  }
 
   private parseCurrentDate(): string {
     const dateString = this.CURRENT_DATE.toLocaleDateString('pt-BR', {
@@ -79,6 +90,6 @@ export class TopUpPixComponent {
   private parseCpfNumber(): string {
     const cpfNumber = this.cpf();
     if (!cpfNumber) return '';
-    return cpfNumber.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '•••.•••.$3-$4');
+    return cpfNumber.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '•••.$2.$3-••');
   }
 }
diff --git a/src/app/pages/top-up/top-up.component.html b/src/app/pages/top-up/top-up.component.html
index 319b987..f48b9c9 100644
--- a/src/app/pages/top-up/top-up.component.html
+++ b/src/app/pages/top-up/top-up.component.html
@@ -8,55 +8,89 @@
         ADICIONAR CRÉDITOS
       </rusbe-header>
     </div>
+    @let currentErrorValue = currentError();
 
-    @if (!topUpUnavailable() && STAGE_MESSAGE[currentStage()]) {
-      <div class="reduced-page-container w-full p-4">
-        <p class="text-balance text-2xl sm:text-3xl">
-          <strong>{{ STAGE_MESSAGE[currentStage()] }}</strong>
-        </p>
+    @if (accountAuthState() === undefined) {
+      <div
+        class="flex h-full w-full flex-grow flex-col items-center justify-center gap-4 py-4 sm:gap-8"
+      >
+        <div class="h-12 w-12 sm:h-16 sm:w-16">
+          <rusbe-spinner></rusbe-spinner>
+        </div>
+        <p class="text-balance text-xl sm:text-3xl">Um momento...</p>
       </div>
-    }
+    } @else if (currentErrorValue) {
+      <div class="flex h-full w-full flex-grow flex-col p-4">
+        <div
+          class="flex h-full w-full flex-grow flex-col items-center justify-center gap-4"
+        >
+          <ng-icon
+            class="text-2xl text-accent sm:text-3xl"
+            name="lucideInfo"
+            aria-hidden="true"
+          ></ng-icon>
+
+          <p class="text-center text-xl sm:text-3xl">
+            <strong>{{ ERROR_MESSAGES[currentErrorValue] }}</strong>
+          </p>
+        </div>
 
-    <main class="reduced-page-container flex w-full flex-grow">
-      @if (topUpUnavailable()) {
         <div
-          class="transition-appear flex h-full w-full flex-col items-center justify-center gap-2 p-4 sm:gap-4"
+          class="flex min-h-[30%] flex-col items-center justify-end gap-2 py-4 sm:gap-4 sm:pb-16"
         >
-          <p class="text-base sm:text-xl">
-            Infelizmente, o sistema da General Goods está fora do ar.
+          <button
+            (click)="goToHome()"
+            class="button-text button-full button-large focus:ring-offset-background"
+          >
+            Voltar
+          </button>
+          <button
+            (click)="retry()"
+            class="button-fill button-full button-large focus:ring-offset-background"
+          >
+            Tentar novamente
+          </button>
+        </div>
+      </div>
+    } @else {
+      @if (STAGE_MESSAGE[currentStage()]) {
+        <div class="reduced-page-container w-full p-4">
+          <p class="text-balance text-2xl sm:text-3xl">
+            <strong>{{ STAGE_MESSAGE[currentStage()] }}</strong>
           </p>
-          <p>Por favor, tente novamente mais tarde.</p>
         </div>
-      } @else if (!valueSubmitted()) {
-        <rusbe-top-up-calculator
-          [(value)]="value"
-          (submitted)="onCalculatorConfirm($event)"
-        ></rusbe-top-up-calculator>
-      } @else if (!paymentLocation() && !paymentMethod()) {
-        <rusbe-top-up-payment-method
-          (paymentMethodChanged)="onPaymentMethodChange($event)"
-          (paymentLocationChanged)="onPaymentLocaltionChange($event)"
-        ></rusbe-top-up-payment-method>
-      } @else if (paymentLocation() === 'InLoco') {
-        <rusbe-top-up-in-loco-helper
-          [cpf]="accountData().cpfNumber"
-          [name]="accountData().fullName"
-          [topUpValue]="value()"
-          [paymentMethod]="paymentMethod()"
-          (backClicked)="goToHome()"
-        ></rusbe-top-up-in-loco-helper>
-      } @else if (paymentMethod() === 'Pix') {
-        <rusbe-top-up-pix
-          [cpf]="accountData().cpfNumber"
-          [name]="accountData().fullName"
-          [topUpValue]="value()"
-          [timeLeft]="remainingTimeString()"
-          [pixTransactionData]="pixTransactionData()"
-          [pixErrorMessage]="pixErrorMessage()"
-        ></rusbe-top-up-pix>
-      } @else if (paymentMethod() === 'Cartão de crédito') {
-        <rusbe-top-up-credit-card></rusbe-top-up-credit-card>
       }
-    </main>
+      <main class="reduced-page-container flex w-full flex-grow">
+        @if (!valueSubmitted()) {
+          <rusbe-top-up-calculator
+            [(value)]="value"
+            (submitted)="onCalculatorConfirm($event)"
+          ></rusbe-top-up-calculator>
+        } @else if (!paymentLocation() && !paymentMethod()) {
+          <rusbe-top-up-payment-method
+            (paymentMethodChanged)="onPaymentMethodChange($event)"
+            (paymentLocationChanged)="onPaymentLocaltionChange($event)"
+          ></rusbe-top-up-payment-method>
+        } @else if (paymentLocation() === 'InLoco') {
+          <rusbe-top-up-in-loco-helper
+            [cpf]="accountData().cpfNumber"
+            [name]="accountData().fullName"
+            [topUpValue]="value()"
+            [paymentMethod]="paymentMethod()"
+            (backClicked)="goToHome()"
+          ></rusbe-top-up-in-loco-helper>
+        } @else if (paymentMethod() === 'Pix') {
+          <rusbe-top-up-pix
+            [cpf]="accountData().cpfNumber"
+            [name]="accountData().fullName"
+            [topUpValue]="value()"
+            [timeLeft]="remainingTimeString()"
+            [pixTransactionData]="pixTransactionData()"
+          ></rusbe-top-up-pix>
+        } @else if (paymentMethod() === 'Cartão de crédito') {
+          <rusbe-top-up-credit-card></rusbe-top-up-credit-card>
+        }
+      </main>
+    }
   </div>
 </div>
diff --git a/src/app/pages/top-up/top-up.component.ts b/src/app/pages/top-up/top-up.component.ts
index f4d6b51..7ed0833 100644
--- a/src/app/pages/top-up/top-up.component.ts
+++ b/src/app/pages/top-up/top-up.component.ts
@@ -12,10 +12,14 @@ import { Router } from '@angular/router';
 
 import { 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';
@@ -46,18 +50,34 @@ import { RusbeError } from '@rusbe/types/error-handling';
     TopUpPixComponent,
     TopUpCreditCardComponent,
     TopUpInLocoHelperComponent,
+    SpinnerComponent,
+    NgIcon,
   ],
   templateUrl: './top-up.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [
+    provideIcons({
+      lucideInfo,
+    }),
+  ],
 })
 export class TopUpComponent {
   readonly HEADER_TYPE = HeaderType.PageNameWithBackButton;
   readonly STAGE_MESSAGE = {
-    [TopUpStages.Calculator]: 'Quanto você quer adicionar?',
-    [TopUpStages.PaymentMethod]: 'Como você deseja adicionar créditos?',
-    [TopUpStages.InLocoHelper]: 'No guichê, mostre essas informações',
-    [TopUpStages.Pix]: '',
-    [TopUpStages.CreditCard]: '',
+    [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 FIFHTEEEN_MINUTES = 15 * 60 * 1000;
 
@@ -72,7 +92,7 @@ export class TopUpComponent {
   paymentMethod = signal<PaymentMethods | null>(null);
   paymentLocation = signal<PaymentLocation | null>(null);
   pixTransactionData = signal<GeneralGoodsPixTransactionData | null>(null);
-  pixErrorMessage = signal('');
+  currentError = signal<TopUpError | null>(null);
   remainingTimeString = signal(this.parseRemainingTime(0));
 
   accountData = computed(() => {
@@ -84,7 +104,6 @@ export class TopUpComponent {
       cpfNumber: accountData.cpfNumber,
     };
   });
-
   currentStage = computed(() => {
     if (this.calculatorComponent()) {
       return 'calculator';
@@ -97,14 +116,10 @@ export class TopUpComponent {
     } else if (this.pixComponent()) {
       return 'pix';
     }
-    return 'calculator';
+    return 'error';
   });
 
-  topUpUnavailable = computed(() => {
-    const accountAuthState = this.authStateService.accountAuthState();
-
-    return accountAuthState === AccountAuthState.GeneralGoodsServiceUnavailable;
-  });
+  accountAuthState = computed(() => this.authStateService.accountAuthState());
 
   private readonly router = inject(Router);
   private readonly generalGoodsService = inject(GeneralGoodsService);
@@ -114,6 +129,14 @@ export class TopUpComponent {
     effect(() => {
       if (this.pixComponent()) this.startPixTransaction();
     });
+
+    effect(() => {
+      if (this.accountAuthState() === AccountAuthState.LoggedIn) {
+        this.currentError.set(null);
+      } else {
+        this.currentError.set(TopUpError.GeneralGoodsUnavailable);
+      }
+    });
   }
 
   goToPreviousStage(): boolean {
@@ -129,6 +152,8 @@ export class TopUpComponent {
         this.paymentLocation.set(null);
         this.paymentMethod.set(null);
         return true;
+      case 'error':
+        return false;
       default:
         return false;
     }
@@ -138,6 +163,14 @@ export class TopUpComponent {
     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);
   }
@@ -161,14 +194,10 @@ export class TopUpComponent {
       this.startPixTimer();
     } catch (error) {
       if (error instanceof RusbeError) {
-        this.pixErrorMessage.set(
-          'Ocorreu um erro ao tentar gerar o código pix.',
-        );
+        this.currentError.set(TopUpError.PixUnavailable);
         return;
       }
-      this.pixErrorMessage.set(
-        'Ocorreu um erro desconhecido. Por favor, tente novamente.',
-      );
+      this.currentError.set(TopUpError.Generic);
     }
   }
 
@@ -195,10 +224,16 @@ export class TopUpComponent {
   }
 }
 
-export enum TopUpStages {
+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/styles.css b/src/styles.css
index b0c931c..3c0deb8 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -224,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 {

From 89b4adc78700c3825e43cddf941e51cefa48fefa Mon Sep 17 00:00:00 2001
From: Guilherme Afonso <guilhermeafonso208@gmail.com>
Date: Wed, 5 Mar 2025 00:37:59 -0300
Subject: [PATCH 12/25] feat: ui improvements

---
 .../top-up-calculator.component.html          |  9 +++--
 .../calculator/top-up-calculator.component.ts |  8 +++++
 .../top-up-in-loco-helper.component.html      |  4 +--
 .../top-up-in-loco-helper.component.ts        |  5 ++-
 .../top-up/pix/top-up-pix.component.html      | 33 +++++++++++++++----
 .../top-up/pix/top-up-pix.component.ts        | 14 +++++++-
 src/app/pages/top-up/top-up.component.html    |  5 +--
 src/app/pages/top-up/top-up.component.ts      | 24 +++++++++++---
 8 files changed, 83 insertions(+), 19 deletions(-)

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
index b1f09b0..a04f148 100644
--- a/src/app/components/top-up/calculator/top-up-calculator.component.html
+++ b/src/app/components/top-up/calculator/top-up-calculator.component.html
@@ -39,11 +39,16 @@
 <section *ngIf="false" class="grouping-card px-responsive">
   <rusbe-meal-balance-breakdown></rusbe-meal-balance-breakdown>
 </section>
-<section class="reduced-page-container w-full p-4">
+<section class="reduced-page-container px-responsive w-full p-4">
   <button
     (click)="onSubmitValue()"
-    class="button-fill button-full button-large focus:ring-offset-background"
+    class="button-large button-split bg-accent text-accent-contrast focus:ring-offset-background"
   >
     Confirmar
+    <ng-icon
+      class="color-accent-contrast min-w-fit"
+      name="lucideMoveRight"
+      aria-hidden="true"
+    ></ng-icon>
   </button>
 </section>
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
index 904e266..0fcd35f 100644
--- a/src/app/components/top-up/calculator/top-up-calculator.component.ts
+++ b/src/app/components/top-up/calculator/top-up-calculator.component.ts
@@ -16,6 +16,8 @@ import {
   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';
@@ -30,12 +32,18 @@ import { WarningCardComponent } from '@rusbe/components/warning-card/warning-car
     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<boolean>();
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
index 0bfe43b..33d12ac 100644
--- 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
@@ -16,7 +16,7 @@
     </div>
     <div>
       <p class="text-base">Valor da Recarga</p>
-      <div class="inline-flex gap-4">
+      <div class="inline-flex gap-2">
         <p class="text-4xl">R$</p>
         <p class="font-geometric text-4xl">
           <strong>{{ parsedValue() }}</strong>
@@ -36,7 +36,7 @@
     (click)="onBackClicked()"
     class="button-large button-split px-responsive bg-accent text-accent-contrast focus:ring-offset-background"
   >
-    Voltar
+    Finalizar
     <ng-icon
       class="color-accent-contrast min-w-fit"
       name="lucideMoveRight"
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
index 509be5a..af5c730 100644
--- 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
@@ -10,6 +10,7 @@ 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';
 
@@ -36,7 +37,9 @@ export class TopUpInLocoHelperComponent {
   paymentMethod = input.required<PaymentMethods | null>();
 
   parsedCpf = computed(() => this.parseCpfNumber());
-  parsedValue = computed(() => parseFloat(this.topUpValue()).toFixed(2));
+  parsedValue = computed(() =>
+    BrlCurrency.fromNumber(parseFloat(this.topUpValue())),
+  );
 
   onBackClicked(): void {
     this.backClicked.emit();
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
index e6675f1..c0a9ff8 100644
--- a/src/app/components/top-up/pix/top-up-pix.component.html
+++ b/src/app/components/top-up/pix/top-up-pix.component.html
@@ -1,9 +1,9 @@
 @if (pixTransactionData()) {
-  <div class="grouping-cards-container my-2 sm:my-4">
+  <div class="grouping-cards-container my-2 h-full sm:my-4">
     <section rusbe-card-group [title]="'PAGAR COM PIX'">
       <div class="px-responsive flex w-full flex-col gap-5">
         <div>
-          <div class="inline-flex gap-4">
+          <div class="inline-flex gap-2">
             <p class="text-2xl">R$</p>
             <p class="font-geometric text-2xl">
               <strong> {{ parsedTopUpValue() }}</strong>
@@ -11,7 +11,7 @@
           </div>
         </div>
 
-        <p class="break-all">
+        <p class="break-all font-geometric">
           {{ pixTransactionData()?.qrCodeString }}
         </p>
 
@@ -92,9 +92,17 @@
             </p>
           </div>
         </div>
-        <p class="text-xs">
-          Tempo restante para pagamento: <strong>{{ timeLeft() }}</strong>
-        </p>
+        <div class="flex items-center gap-2">
+          <ng-icon
+            class="color-accent-contrast min-w-fit"
+            name="lucideAlarmClock"
+            aria-hidden="true"
+          ></ng-icon>
+          <p class="text-xs">
+            Você tem <strong>{{ timeLeft() }}</strong> para completar o
+            pagamento
+          </p>
+        </div>
       </div>
     </section>
     <div class="px-responsive flex flex-col gap-5">
@@ -111,6 +119,19 @@
         e recarga mostradas.
       </p>
     </div>
+    <div class="px-responsive flex flex-grow flex-col justify-end">
+      <button
+        (click)="onFinish()"
+        class="button-large button-split bg-accent text-accent-contrast focus:ring-offset-background"
+      >
+        Finalizar
+        <ng-icon
+          class="color-accent-contrast min-w-fit"
+          name="lucideMoveRight"
+          aria-hidden="true"
+        ></ng-icon>
+      </button>
+    </div>
   </div>
 } @else {
   <div
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
index 75adc1b..bd57bbf 100644
--- a/src/app/components/top-up/pix/top-up-pix.component.ts
+++ b/src/app/components/top-up/pix/top-up-pix.component.ts
@@ -5,11 +5,13 @@ import {
   computed,
   inject,
   input,
+  output,
   signal,
 } from '@angular/core';
 
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import {
+  lucideAlarmClock,
   lucideCalendarDays,
   lucideCopy,
   lucideInfo,
@@ -21,6 +23,7 @@ import {
 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',
@@ -35,6 +38,7 @@ import { GeneralGoodsPixTransactionData } from '@rusbe/services/general-goods/ge
       lucideUserRound,
       lucideMoveRight,
       lucideInfo,
+      lucideAlarmClock,
     }),
   ],
   host: {
@@ -42,6 +46,8 @@ import { GeneralGoodsPixTransactionData } from '@rusbe/services/general-goods/ge
   },
 })
 export class TopUpPixComponent {
+  finished = output();
+
   readonly CURRENT_DATE = new Date();
   readonly LOCALIZED_CURRENT_DATE = this.parseCurrentDate();
 
@@ -53,7 +59,9 @@ export class TopUpPixComponent {
   pixTransactionData = input<GeneralGoodsPixTransactionData | null>();
 
   pixQrCodeSource = computed(() => this.parseBase64ImageSource());
-  parsedTopUpValue = computed(() => parseFloat(this.topUpValue()).toFixed(2));
+  parsedTopUpValue = computed(() =>
+    BrlCurrency.fromNumber(parseFloat(this.topUpValue())).toString(),
+  );
   parsedCpf = computed(() => this.parseCpfNumber());
 
   showPixQrCode = signal<boolean>(false);
@@ -68,6 +76,10 @@ export class TopUpPixComponent {
     this.copiedToClipboard.set(true);
   }
 
+  onFinish() {
+    this.finished.emit();
+  }
+
   private parseCurrentDate(): string {
     const dateString = this.CURRENT_DATE.toLocaleDateString('pt-BR', {
       day: '2-digit',
diff --git a/src/app/pages/top-up/top-up.component.html b/src/app/pages/top-up/top-up.component.html
index f48b9c9..c2c89ec 100644
--- a/src/app/pages/top-up/top-up.component.html
+++ b/src/app/pages/top-up/top-up.component.html
@@ -1,9 +1,9 @@
-<div class="p-safe h-svh overflow-auto lg:ml-60">
+<div class="p-safe h-svh overflow-auto">
   <div class="flex h-full flex-col items-start justify-start">
     <div class="reduced-page-container w-full p-4">
       <rusbe-header
         [customAction]="goToPreviousStage.bind(this)"
-        [type]="HEADER_TYPE"
+        [type]="headerType()"
       >
         ADICIONAR CRÉDITOS
       </rusbe-header>
@@ -86,6 +86,7 @@
             [topUpValue]="value()"
             [timeLeft]="remainingTimeString()"
             [pixTransactionData]="pixTransactionData()"
+            (finished)="goToHome()"
           ></rusbe-top-up-pix>
         } @else if (paymentMethod() === 'Cartão de crédito') {
           <rusbe-top-up-credit-card></rusbe-top-up-credit-card>
diff --git a/src/app/pages/top-up/top-up.component.ts b/src/app/pages/top-up/top-up.component.ts
index 7ed0833..b24546a 100644
--- a/src/app/pages/top-up/top-up.component.ts
+++ b/src/app/pages/top-up/top-up.component.ts
@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
+  OnDestroy,
   computed,
   effect,
   inject,
@@ -10,7 +11,7 @@ import {
 } from '@angular/core';
 import { Router } from '@angular/router';
 
-import { interval, takeUntil, timer } from 'rxjs';
+import { Subscription, interval, takeUntil, timer } from 'rxjs';
 
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideInfo } from '@ng-icons/lucide';
@@ -61,8 +62,7 @@ import { RusbeError } from '@rusbe/types/error-handling';
     }),
   ],
 })
-export class TopUpComponent {
-  readonly HEADER_TYPE = HeaderType.PageNameWithBackButton;
+export class TopUpComponent implements OnDestroy {
   readonly STAGE_MESSAGE = {
     [TopUpStage.Calculator]: 'Quanto você quer adicionar?',
     [TopUpStage.PaymentMethod]: 'Como você deseja adicionar créditos?',
@@ -95,6 +95,15 @@ export class TopUpComponent {
   currentError = signal<TopUpError | null>(null);
   remainingTimeString = signal(this.parseRemainingTime(0));
 
+  headerType = computed(() => {
+    if (
+      this.currentStage() === 'calculator' ||
+      this.currentStage() === 'payment-method'
+    ) {
+      return HeaderType.PageNameWithBackButton;
+    }
+    return HeaderType.PageNameWithCloseButton;
+  });
   accountData = computed(() => {
     const accountData = this.authStateService.generalGoodsAccountData();
     if (!accountData) return { fullName: '', cpfNumber: '' };
@@ -118,9 +127,10 @@ export class TopUpComponent {
     }
     return 'error';
   });
-
   accountAuthState = computed(() => this.authStateService.accountAuthState());
 
+  pixTimerSubscription?: Subscription;
+
   private readonly router = inject(Router);
   private readonly generalGoodsService = inject(GeneralGoodsService);
   private readonly authStateService = inject(AuthStateService);
@@ -139,6 +149,10 @@ export class TopUpComponent {
     });
   }
 
+  ngOnDestroy(): void {
+    this.pixTimerSubscription?.unsubscribe();
+  }
+
   goToPreviousStage(): boolean {
     switch (this.currentStage()) {
       case 'calculator':
@@ -206,7 +220,7 @@ export class TopUpComponent {
 
     const result = source.pipe(takeUntil(timer(this.FIFHTEEEN_MINUTES)));
 
-    result.subscribe({
+    this.pixTimerSubscription = result.subscribe({
       next: (timeSpent) => {
         this.remainingTimeString.set(this.parseRemainingTime(timeSpent));
       },

From 1313f9782205eb20a319c45107aafe548d64cb3a Mon Sep 17 00:00:00 2001
From: Guilherme Afonso <guilhermeafonso208@gmail.com>
Date: Wed, 5 Mar 2025 02:08:09 -0300
Subject: [PATCH 13/25] feat: add balance preview on calculator

---
 .../calculator/top-up-calculator.component.html       |  9 ++++++++-
 .../top-up/calculator/top-up-calculator.component.ts  | 11 +++++++++++
 src/app/pages/top-up/top-up.component.html            |  1 +
 src/app/pages/top-up/top-up.component.ts              |  6 ++++++
 4 files changed, 26 insertions(+), 1 deletion(-)

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
index a04f148..f233357 100644
--- a/src/app/components/top-up/calculator/top-up-calculator.component.html
+++ b/src/app/components/top-up/calculator/top-up-calculator.component.html
@@ -39,7 +39,14 @@
 <section *ngIf="false" class="grouping-card px-responsive">
   <rusbe-meal-balance-breakdown></rusbe-meal-balance-breakdown>
 </section>
-<section class="reduced-page-container px-responsive w-full p-4">
+<section
+  class="reduced-page-container px-responsive flex w-full flex-grow flex-col justify-end gap-5 p-4"
+>
+  <p>
+    Você tem R$ <strong>{{ currentBalance().value }} </strong> de saldo. Após a
+    transação, você ficará com R$ <strong> {{ newBalance() }}</strong
+    >.
+  </p>
   <button
     (click)="onSubmitValue()"
     class="button-large button-split bg-accent text-accent-contrast focus:ring-offset-background"
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
index 0fcd35f..9cd8cf3 100644
--- a/src/app/components/top-up/calculator/top-up-calculator.component.ts
+++ b/src/app/components/top-up/calculator/top-up-calculator.component.ts
@@ -2,6 +2,8 @@ import { NgIf } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
+  computed,
+  input,
   model,
   output,
   signal,
@@ -22,6 +24,8 @@ 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',
@@ -49,9 +53,16 @@ export class TopUpCalculatorComponent {
   submitted = output<boolean>();
 
   value = model.required<string>();
+  currentBalance = input.required<GeneralGoodsPartialGrantBalance>();
 
   inputDisabled = signal(false);
 
+  newBalance = computed(() =>
+    this.currentBalance().value.add(
+      BrlCurrency.fromNumber(parseFloat(this.value())),
+    ),
+  );
+
   readonly topUpValue = new FormControl(
     { value: '0', disabled: this.inputDisabled() },
     {
diff --git a/src/app/pages/top-up/top-up.component.html b/src/app/pages/top-up/top-up.component.html
index c2c89ec..836b9b3 100644
--- a/src/app/pages/top-up/top-up.component.html
+++ b/src/app/pages/top-up/top-up.component.html
@@ -64,6 +64,7 @@
         @if (!valueSubmitted()) {
           <rusbe-top-up-calculator
             [(value)]="value"
+            [currentBalance]="accountBalance()"
             (submitted)="onCalculatorConfirm($event)"
           ></rusbe-top-up-calculator>
         } @else if (!paymentLocation() && !paymentMethod()) {
diff --git a/src/app/pages/top-up/top-up.component.ts b/src/app/pages/top-up/top-up.component.ts
index b24546a..4e8dd40 100644
--- a/src/app/pages/top-up/top-up.component.ts
+++ b/src/app/pages/top-up/top-up.component.ts
@@ -35,6 +35,7 @@ import {
   AuthStateService,
 } from '@rusbe/services/auth-state/auth-state.service';
 import {
+  GeneralGoodsPartialGrantBalance,
   GeneralGoodsPixTransactionData,
   GeneralGoodsService,
 } from '@rusbe/services/general-goods/general-goods.service';
@@ -113,6 +114,11 @@ export class TopUpComponent implements OnDestroy {
       cpfNumber: accountData.cpfNumber,
     };
   });
+  accountBalance = computed(
+    () =>
+      this.authStateService.generalGoodsAccountData()
+        ?.balance as GeneralGoodsPartialGrantBalance,
+  );
   currentStage = computed(() => {
     if (this.calculatorComponent()) {
       return 'calculator';

From 02e8f14ac2fe7504ced6c280279d3982e10f2ad1 Mon Sep 17 00:00:00 2001
From: Guilherme Afonso <guilhermeafonso208@gmail.com>
Date: Wed, 5 Mar 2025 02:21:13 -0300
Subject: [PATCH 14/25] feat: remove top up card for full grant students

---
 src/app/pages/home/home.component.html | 8 +++++---
 src/app/pages/home/home.component.ts   | 6 ++++++
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
index 92530ad..4f4db1a 100644
--- a/src/app/pages/home/home.component.html
+++ b/src/app/pages/home/home.component.html
@@ -28,9 +28,11 @@
         } @else {
           <rusbe-credits-card class="xs:col-span-2"></rusbe-credits-card>
         }
-        <rusbe-link-card destination="/top-up" iconName="lucideWallet"
-          >Adicionar créditos</rusbe-link-card
-        >
+        @if (showAddCreditsCard()) {
+          <rusbe-link-card destination="/top-up" iconName="lucideWallet"
+            >Adicionar créditos</rusbe-link-card
+          >
+        }
         <rusbe-link-card destination="/menu" iconName="lucideFolderClock"
           >Histórico de cardápios</rusbe-link-card
         >
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,
+  );
 }

From 10ebb795626e0197d052379eebc2517c6600fd5e Mon Sep 17 00:00:00 2001
From: Guilherme Afonso <guilhermeafonso208@gmail.com>
Date: Wed, 5 Mar 2025 22:06:46 -0300
Subject: [PATCH 15/25] fix: use explicit types and required

---
 .../components/cards/card-button/card-button.component.ts   | 6 +++---
 src/app/components/cards/card-group/card-group.component.ts | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/components/cards/card-button/card-button.component.ts b/src/app/components/cards/card-button/card-button.component.ts
index d8cfd5e..b5ddc11 100644
--- a/src/app/components/cards/card-button/card-button.component.ts
+++ b/src/app/components/cards/card-button/card-button.component.ts
@@ -11,7 +11,7 @@ import { NgIcon } from '@ng-icons/core';
   host: { class: 'grouping-card-strip-button w-full disabled:opacity-50' },
 })
 export class CardButtonComponent {
-  subtitle = input('');
-  iconName = input('');
-  badgeText = input('');
+  subtitle = input.required<string>();
+  iconName = input.required<string>();
+  badgeText = input<string | undefined>();
 }
diff --git a/src/app/components/cards/card-group/card-group.component.ts b/src/app/components/cards/card-group/card-group.component.ts
index dcdc5d6..235d88b 100644
--- a/src/app/components/cards/card-group/card-group.component.ts
+++ b/src/app/components/cards/card-group/card-group.component.ts
@@ -8,5 +8,5 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
   host: { class: 'grouping-card' },
 })
 export class CardGroupComponent {
-  title = input('');
+  title = input.required();
 }

From 343bbcf6277c438daa3e34b8bdfd74a0322dd6f7 Mon Sep 17 00:00:00 2001
From: Guilherme Afonso <guilhermeafonso208@gmail.com>
Date: Wed, 5 Mar 2025 22:08:04 -0300
Subject: [PATCH 16/25] fix: add back mask directive

---
 .../components/jumbo-text-input/jumbo-text-input.component.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/components/jumbo-text-input/jumbo-text-input.component.ts b/src/app/components/jumbo-text-input/jumbo-text-input.component.ts
index ea64564..5317e89 100644
--- a/src/app/components/jumbo-text-input/jumbo-text-input.component.ts
+++ b/src/app/components/jumbo-text-input/jumbo-text-input.component.ts
@@ -1,11 +1,11 @@
 import { Component, computed, input, model } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
-import { provideNgxMask } from 'ngx-mask';
+import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
 
 @Component({
   selector: 'rusbe-jumbo-text-input',
-  imports: [FormsModule],
+  imports: [NgxMaskDirective, FormsModule],
   providers: [provideNgxMask()],
   templateUrl: './jumbo-text-input.component.html',
 })

From 730be177d5e41cff4ad3b214013e1ba7d3d894bb Mon Sep 17 00:00:00 2001
From: Guilherme Afonso <guilhermeafonso208@gmail.com>
Date: Wed, 5 Mar 2025 22:14:59 -0300
Subject: [PATCH 17/25] fix: check for NaN in calculator preview

---
 .../calculator/top-up-calculator.component.ts       | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

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
index 9cd8cf3..80d012d 100644
--- a/src/app/components/top-up/calculator/top-up-calculator.component.ts
+++ b/src/app/components/top-up/calculator/top-up-calculator.component.ts
@@ -57,11 +57,14 @@ export class TopUpCalculatorComponent {
 
   inputDisabled = signal(false);
 
-  newBalance = computed(() =>
-    this.currentBalance().value.add(
-      BrlCurrency.fromNumber(parseFloat(this.value())),
-    ),
-  );
+  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() },

From eb3f5ad1917db9323febca7a885dd63f75988b39 Mon Sep 17 00:00:00 2001
From: Guilherme Afonso <guilhermeafonso208@gmail.com>
Date: Wed, 5 Mar 2025 22:19:54 -0300
Subject: [PATCH 18/25] fix: parse cpf only if it has 11 digits

---
 .../in-loco-helper/top-up-in-loco-helper.component.html   | 8 +++++---
 .../in-loco-helper/top-up-in-loco-helper.component.ts     | 3 +++
 2 files changed, 8 insertions(+), 3 deletions(-)

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
index 33d12ac..6873d44 100644
--- 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
@@ -7,9 +7,11 @@
     </div>
     <div>
       <p class="text-base">Dados pessoais</p>
-      <p class="text-balance text-4xl">
-        <strong>{{ parsedCpf() }}</strong>
-      </p>
+      @if (parsedCpf()) {
+        <p class="text-balance text-4xl">
+          <strong>{{ parsedCpf() }}</strong>
+        </p>
+      }
       <p class="text-condensed text-2xl">
         <strong>{{ name() }}</strong>
       </p>
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
index af5c730..66b2284 100644
--- 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
@@ -47,7 +47,10 @@ export class TopUpInLocoHelperComponent {
 
   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');
   }
 }

From 1cbbc14c5d7566fe874e70e8d736eeed2b3e5cbc Mon Sep 17 00:00:00 2001
From: Guilherme Afonso <guilhermeafonso208@gmail.com>
Date: Wed, 5 Mar 2025 22:28:51 -0300
Subject: [PATCH 19/25] fix: remove on push from top up page

---
 src/app/pages/top-up/top-up.component.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/app/pages/top-up/top-up.component.ts b/src/app/pages/top-up/top-up.component.ts
index 4e8dd40..da47823 100644
--- a/src/app/pages/top-up/top-up.component.ts
+++ b/src/app/pages/top-up/top-up.component.ts
@@ -1,6 +1,5 @@
 import { CommonModule } from '@angular/common';
 import {
-  ChangeDetectionStrategy,
   Component,
   OnDestroy,
   computed,
@@ -56,7 +55,6 @@ import { RusbeError } from '@rusbe/types/error-handling';
     NgIcon,
   ],
   templateUrl: './top-up.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
   viewProviders: [
     provideIcons({
       lucideInfo,

From 80545084772069c8353549ef078115721c6db567 Mon Sep 17 00:00:00 2001
From: Guilherme Afonso <guilhermeafonso208@gmail.com>
Date: Wed, 5 Mar 2025 22:29:36 -0300
Subject: [PATCH 20/25] refactor: title text case

---
 src/app/pages/top-up/top-up.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/pages/top-up/top-up.component.html b/src/app/pages/top-up/top-up.component.html
index 836b9b3..af62ce9 100644
--- a/src/app/pages/top-up/top-up.component.html
+++ b/src/app/pages/top-up/top-up.component.html
@@ -5,7 +5,7 @@
         [customAction]="goToPreviousStage.bind(this)"
         [type]="headerType()"
       >
-        ADICIONAR CRÉDITOS
+        Adicionar créditos
       </rusbe-header>
     </div>
     @let currentErrorValue = currentError();

From 2ff628498ce33710036a1b0df4037b59e9180373 Mon Sep 17 00:00:00 2001
From: Guilherme Afonso <guilhermeafonso208@gmail.com>
Date: Wed, 5 Mar 2025 22:32:18 -0300
Subject: [PATCH 21/25] fix: correct spelling of FIFTEEN_MINUTES constant

---
 src/app/pages/top-up/top-up.component.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/pages/top-up/top-up.component.ts b/src/app/pages/top-up/top-up.component.ts
index da47823..b0d91e5 100644
--- a/src/app/pages/top-up/top-up.component.ts
+++ b/src/app/pages/top-up/top-up.component.ts
@@ -78,7 +78,7 @@ export class TopUpComponent implements OnDestroy {
     [TopUpError.Generic]:
       'Ocorreu um erro desconhecido. Por favor, tente novamente.',
   };
-  readonly FIFHTEEEN_MINUTES = 15 * 60 * 1000;
+  readonly FIFTEEN_MINUTES = 15 * 60 * 1000;
 
   calculatorComponent = viewChild(TopUpCalculatorComponent);
   paymentMethodComponent = viewChild(TopUpPaymentMethodComponent);
@@ -222,7 +222,7 @@ export class TopUpComponent implements OnDestroy {
   private startPixTimer() {
     const source = interval(1000);
 
-    const result = source.pipe(takeUntil(timer(this.FIFHTEEEN_MINUTES)));
+    const result = source.pipe(takeUntil(timer(this.FIFTEEN_MINUTES)));
 
     this.pixTimerSubscription = result.subscribe({
       next: (timeSpent) => {
@@ -235,7 +235,7 @@ export class TopUpComponent implements OnDestroy {
   }
 
   private parseRemainingTime(timeSpent: number): string {
-    const remainingTime = this.FIFHTEEEN_MINUTES - timeSpent * 1000;
+    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}`;

From 6e34d275799d6137739013fc8685e4d973a7b870 Mon Sep 17 00:00:00 2001
From: Guilherme Afonso <18534480+Guilhermeasper@users.noreply.github.com>
Date: Wed, 5 Mar 2025 22:34:33 -0300
Subject: [PATCH 22/25] fix: use enum instead of hardcoded values

Co-authored-by: Erick Almeida <Erick2280@users.noreply.github.com>
---
 src/app/pages/top-up/top-up.component.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/pages/top-up/top-up.component.ts b/src/app/pages/top-up/top-up.component.ts
index b0d91e5..2285a76 100644
--- a/src/app/pages/top-up/top-up.component.ts
+++ b/src/app/pages/top-up/top-up.component.ts
@@ -96,8 +96,8 @@ export class TopUpComponent implements OnDestroy {
 
   headerType = computed(() => {
     if (
-      this.currentStage() === 'calculator' ||
-      this.currentStage() === 'payment-method'
+      this.currentStage() === TopUpStage.Calculator ||
+      this.currentStage() === TopUpStage.PaymentMethod
     ) {
       return HeaderType.PageNameWithBackButton;
     }

From 19918fab69ed6ad93834a0d5d4c0868d3512f222 Mon Sep 17 00:00:00 2001
From: Guilherme Afonso <18534480+Guilhermeasper@users.noreply.github.com>
Date: Wed, 5 Mar 2025 22:34:50 -0300
Subject: [PATCH 23/25] refactor: pix spelling

Co-authored-by: Erick Almeida <Erick2280@users.noreply.github.com>
---
 src/app/pages/top-up/top-up.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/pages/top-up/top-up.component.ts b/src/app/pages/top-up/top-up.component.ts
index 2285a76..fa8aa19 100644
--- a/src/app/pages/top-up/top-up.component.ts
+++ b/src/app/pages/top-up/top-up.component.ts
@@ -74,7 +74,7 @@ export class TopUpComponent implements OnDestroy {
     [TopUpError.GeneralGoodsUnavailable]:
       'Infelizmente, o sistema da General Goods está fora do ar.',
     [TopUpError.PixUnavailable]:
-      'Ocorreu um erro ao tentar gerar o código pix.',
+      'Ocorreu um erro ao tentar gerar o código Pix.',
     [TopUpError.Generic]:
       'Ocorreu um erro desconhecido. Por favor, tente novamente.',
   };

From 0dd088ca8cf211bab2a725ebb7cd3cce5dd09927 Mon Sep 17 00:00:00 2001
From: Guilherme Afonso <guilhermeafonso208@gmail.com>
Date: Wed, 5 Mar 2025 22:43:28 -0300
Subject: [PATCH 24/25] fix: check cpf length before parsing

---
 src/app/components/top-up/pix/top-up-pix.component.ts | 3 +++
 1 file changed, 3 insertions(+)

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
index bd57bbf..67e5271 100644
--- a/src/app/components/top-up/pix/top-up-pix.component.ts
+++ b/src/app/components/top-up/pix/top-up-pix.component.ts
@@ -101,7 +101,10 @@ export class TopUpPixComponent {
 
   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-••');
   }
 }

From 225a023c7e09290a44ddbf52771836c5252d1918 Mon Sep 17 00:00:00 2001
From: Guilherme Afonso <guilhermeafonso208@gmail.com>
Date: Wed, 5 Mar 2025 23:30:04 -0300
Subject: [PATCH 25/25] fix: enhance balance preview

---
 .../calculator/top-up-calculator.component.html  | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

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
index f233357..7d21b36 100644
--- a/src/app/components/top-up/calculator/top-up-calculator.component.html
+++ b/src/app/components/top-up/calculator/top-up-calculator.component.html
@@ -42,11 +42,17 @@
 <section
   class="reduced-page-container px-responsive flex w-full flex-grow flex-col justify-end gap-5 p-4"
 >
-  <p>
-    Você tem R$ <strong>{{ currentBalance().value }} </strong> de saldo. Após a
-    transação, você ficará com R$ <strong> {{ newBalance() }}</strong
-    >.
-  </p>
+  @if (currentBalance().value.toString() !== newBalance().toString()) {
+    <p>
+      Você tem R$ <strong>{{ currentBalance().value }} </strong> de saldo. Após
+      a transação, você ficará com R$ <strong> {{ newBalance() }}</strong
+      >.
+    </p>
+  } @else {
+    <p>
+      Você tem R$ <strong>{{ currentBalance().value }} </strong> de saldo.
+    </p>
+  }
   <button
     (click)="onSubmitValue()"
     class="button-large button-split bg-accent text-accent-contrast focus:ring-offset-background"