feat: receive screen

client/src/app/screens/screen-receive/screen-receive.html

@@ -0,0 +1,53 @@
+<div class="container py-5">
+  <div class="row justify-content-center">
+    <div class="col-lg-6 col-md-8">
+      <div class="card shadow-sm">
+        <div class="card-header bg-success text-white">
+          <h3 class="mb-0">Receive Money</h3>
+        </div>
+        <div class="card-body p-4 text-center">
+          <!-- Large Amount Display -->
+          <div class="mb-4">
+            <label class="form-label h5">Amount to Receive</label>
+            <div class="input-group input-group-lg mb-3">
+              <span class="input-group-text">$</span>
+              <input
+                type="number"
+                class="form-control text-center fs-2"
+                placeholder="0.00"
+                [(ngModel)]="amount"
+              />
+            </div>
+          </div>
+
+          <!-- Shareable Link -->
+          <div class="mb-4">
+            <p class="text-muted">Share this link to receive money:</p>
+            <div class="input-group mb-3">
+              <input
+                type="text"
+                class="form-control"
+                [value]="shareableLink"
+                readonly
+              />
+              <button class="btn btn-outline-secondary" (click)="copyLink()">
+                Copy
+              </button>
+            </div>
+          </div>
+
+          <!-- Share Buttons -->
+          <div class="d-grid gap-2">
+            <button class="btn btn-primary btn-lg" (click)="shareViaEmail()">
+              <i class="bi bi-envelope me-2"></i> Share via Email
+            </button>
+            <button class="btn btn-outline-primary btn-lg" (click)="shareViaLink()">
+              <i class="bi bi-link me-2"></i> Copy Link
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+

client/src/app/screens/screen-receive/screen-receive.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ScreenReceive } from './screen-receive';
+
+describe('ScreenReceive', () => {
+  let component: ScreenReceive;
+  let fixture: ComponentFixture<ScreenReceive>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ScreenReceive],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ScreenReceive);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

client/src/app/screens/screen-receive/screen-receive.ts

@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-screen-receive',
+  imports: [FormsModule],
+  templateUrl: './screen-receive.html',
+  styleUrl: './screen-receive.less',
+})
+export class ScreenReceive {
+  me = 'DemoUser';
+  amount: number = 0;
+  shareableLink: string = 'https://yourapp.com/receive?amount=0';
+
+  copyLink() {
+    navigator.clipboard.writeText(this.shareableLink);
+    alert('Link copied to clipboard!');
+  }
+
+  shareViaEmail() {
+    const email = `mailto:?subject=Request Money&body=Please send me $${this.amount} via ${this.shareableLink}`;
+    window.location.href = email;
+  }
+
+  shareViaLink() {
+    this.copyLink();
+  }
+}