Feature in app referral program

src/app/app-routing.module.ts

@@ -75,6 +75,13 @@ const routes: Routes = [
         m => m.WalletsPageModule
       ),
   },
+  {
+    path: 'invitation',
+    loadChildren: () =>
+      import('./features/invitation/invitation.module').then(
+        m => m.InvitationPageModule
+      ),
+  },
 ];
 @NgModule({
   imports: [

src/app/features/home/home.page.html

@@ -33,6 +33,11 @@
             CaptureClub
           </a>
         </mat-list-item>
+        <mat-list-item>
+          <a routerLink="/invitation" (click)="sidenav.close()" mat-list-item>
+            {{ t('invitation.invitation') }}
+          </a>
+        </mat-list-item>
         <mat-list-item>
           <a routerLink="/privacy" (click)="sidenav.close()" mat-list-item>
             {{ t('privacy') }}

src/app/features/invitation/invitation-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { InvitationPage } from './invitation.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: InvitationPage,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class InvitationPageRoutingModule {}

src/app/features/invitation/invitation.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../shared/shared.module';
+import { InvitationPageRoutingModule } from './invitation-routing.module';
+import { InvitationPage } from './invitation.page';
+
+@NgModule({
+  imports: [SharedModule, InvitationPageRoutingModule],
+  declarations: [InvitationPage],
+})
+export class InvitationPageModule {}

src/app/features/invitation/invitation.page.html

@@ -0,0 +1,44 @@
+<mat-toolbar *transloco="let t">
+  <button routerLink=".." routerDirection="back" mat-icon-button>
+    <mat-icon>arrow_back</mat-icon>
+  </button>
+  <span>{{ t('invitation.invitation') }}</span>
+</mat-toolbar>
+
+<ion-content *transloco="let t">
+  <ng-container *ngIf="referralCode$ | ngrxPush as referralCode">
+    <ion-card>
+      <ion-grid>
+        <ion-row>
+          <ion-col sizeMd="6" offsetMd="3" sizeXs="10" offsetXs="1">
+            <div class="title">Share invitation code</div>
+            <div class="subtitle">Share to get rewarded</div>
+
+            <div class="social-icons-container">
+              <ion-avatar>
+                <img src="/assets/images/share-icons/share-fb.png" />
+              </ion-avatar>
+              <ion-avatar>
+                <img src="/assets/images/share-icons/share-line.png" />
+              </ion-avatar>
+              <ion-avatar>
+                <img src="/assets/images/share-icons/share-email.jpg" />
+              </ion-avatar>
+              <div class="share-more">更多</div>
+            </div>
+
+            <div class="title">{{ referralCode }}</div>
+
+            <div class="spacer-12"></div>
+
+            <ion-button (click)="shareReferralCode()" expand="block">
+              Share
+            </ion-button>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+    </ion-card>
+  </ng-container>
+
+  <div class="spacer-24"></div>
+</ion-content>

src/app/features/invitation/invitation.page.scss

@@ -0,0 +1,62 @@
+ion-card {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  background: white;
+  border-radius: 15px;
+}
+
+.title {
+  text-align: center;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 24px;
+  color: black;
+}
+
+.subtitle {
+  text-align: center;
+  font-size: 14px;
+  margin-bottom: 12px;
+  color: black;
+}
+
+.social-icons-container {
+  display: flex;
+  justify-content: center;
+  margin: 24px 8px 32px;
+}
+
+ion-avatar {
+  width: 42px;
+  height: 42px;
+  margin: 0 6px;
+}
+
+.share-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 42px;
+  width: 42px;
+  background-color: #fcecd4;
+  border-radius: 50%;
+  margin: 0 6px;
+}
+
+ion-button {
+  --border-radius: 15px;
+  --color: white;
+  --background: #00c9ff;
+
+  font-style: normal;
+  font-weight: 500;
+  font-size: 18px;
+}
+
+.spacer-12 {
+  height: 12px;
+}
+
+.spacer-24 {
+  height: 24px;
+}

src/app/features/invitation/invitation.page.spec.ts

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+import { SharedTestingModule } from '../../shared/shared-testing.module';
+import { InvitationPage } from './invitation.page';
+
+describe('InvitationPage', () => {
+  let component: InvitationPage;
+  let fixture: ComponentFixture<InvitationPage>;
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [InvitationPage],
+        imports: [IonicModule.forRoot(), SharedTestingModule],
+      }).compileComponents();
+
+      fixture = TestBed.createComponent(InvitationPage);
+      component = fixture.componentInstance;
+      fixture.detectChanges();
+    })
+  );
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/features/invitation/invitation.page.ts

@@ -0,0 +1,32 @@
+import { Component, OnInit } from '@angular/core';
+import { DiaBackendAuthService } from '../../shared/dia-backend/auth/dia-backend-auth.service';
+import { ShareService } from '../../shared/share/share.service';
+
+@Component({
+  selector: 'app-invitation',
+  templateUrl: './invitation.page.html',
+  styleUrls: ['./invitation.page.scss'],
+})
+export class InvitationPage implements OnInit {
+  readonly referralCode$ = this.diaBackendAuthService.referralCode$;
+
+  constructor(
+    private readonly diaBackendAuthService: DiaBackendAuthService,
+    private readonly shareService: ShareService
+  ) {}
+
+  ngOnInit(): void {
+    this.refetchReferralCode();
+  }
+
+  async refetchReferralCode() {
+    // return;
+    const referralCode = await this.diaBackendAuthService.getReferralCode();
+    if (!referralCode) this.diaBackendAuthService.syncProfile$().toPromise();
+  }
+
+  async shareReferralCode() {
+    const referralCode = await this.diaBackendAuthService.getReferralCode();
+    this.shareService.shareReferralCode(referralCode);
+  }
+}

src/app/features/signup/signup.page.ts

@@ -26,6 +26,7 @@ export class SignupPage {
     username: '',
     password: '',
     confirmPassword: '',
+    referralCodeOptional: '',
   };
 
   fields: FormlyFieldConfig[] = [];
@@ -42,6 +43,7 @@ export class SignupPage {
       this.translocoService.selectTranslate('username'),
       this.translocoService.selectTranslate('password'),
       this.translocoService.selectTranslate('confirmPassword'),
+      this.translocoService.selectTranslate('referralCodeOptional'),
     ])
       .pipe(
         tap(
@@ -50,12 +52,14 @@ export class SignupPage {
             usernameTranlation,
             passwordTranslation,
             confirmPasswordTranslation,
+            referralCodeOptionalTranslation,
           ]) =>
             this.createFormFields(
               emailTranslation,
               usernameTranlation,
               passwordTranslation,
-              confirmPasswordTranslation
+              confirmPasswordTranslation,
+              referralCodeOptionalTranslation
             )
         ),
         untilDestroyed(this)
@@ -67,7 +71,8 @@ export class SignupPage {
     emailTranslation: string,
     usernameTranlation: string,
     passwordTranslation: string,
-    confirmPasswordTranslation: string
+    confirmPasswordTranslation: string,
+    referralCodeOptionalTranslation: string
   ) {
     this.fields = [
       {
@@ -87,6 +92,21 @@ export class SignupPage {
             ),
             errorPath: 'confirmPassword',
           },
+          referralCodeValidator: {
+            expression: (control: FormGroup) => {
+              const alphanumeric = /^[A-Z0-9]{6}$/g;
+              const { referralCodeOptional } = control.value;
+
+              if (referralCodeOptional?.length === 0) return true;
+              if (referralCodeOptional?.match(alphanumeric)) return true;
+
+              return false;
+            },
+            message: this.translocoService.translate(
+              'message.invalidReferralCode'
+            ),
+            errorPath: 'referralCodeOptional',
+          },
         },
         fieldGroup: [
           {
@@ -152,14 +172,29 @@ export class SignupPage {
               hideRequiredMarker: true,
             },
           },
+          {
+            key: 'referralCodeOptional',
+            type: 'input',
+            templateOptions: {
+              type: 'text',
+              placeholder: referralCodeOptionalTranslation,
+              required: false,
+              hideRequiredMarker: true,
+            },
+          },
         ],
       },
     ];
   }
 
   onSubmit() {
     const action$ = this.diaBackendAuthService
-      .createUser$(this.model.username, this.model.email, this.model.password)
+      .createUser$(
+        this.model.username,
+        this.model.email,
+        this.model.password,
+        this.model.referralCodeOptional
+      )
       .pipe(
         first(),
         concatMapTo(
@@ -174,6 +209,14 @@ export class SignupPage {
           )
         ),
         catchError((err: unknown) => {
+          // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+          if (err instanceof HttpErrorResponse && err.status === 400) {
+            return this.errorService.toastError$(
+              this.translocoService.translate(
+                'error.diaBackend.invalid_referral_code'
+              )
+            );
+          }
           // eslint-disable-next-line @typescript-eslint/no-magic-numbers
           if (err instanceof HttpErrorResponse && err.status === 401)
             return this.errorService.toastError$(
@@ -197,4 +240,5 @@ interface SignupFormModel {
   username: string;
   password: string;
   confirmPassword: string;
+  referralCodeOptional: string;
 }