diff --git a/src/app/fyle/fyle-routing.module.ts b/src/app/fyle/fyle-routing.module.ts index fcbbe2fb45..314f8ed86e 100644 --- a/src/app/fyle/fyle-routing.module.ts +++ b/src/app/fyle/fyle-routing.module.ts @@ -45,6 +45,11 @@ const routes: Routes = [ path: 'add_edit_expense', loadChildren: () => import('./add-edit-expense/add-edit-expense.module').then((m) => m.AddEditExpensePageModule), }, + { + path: 'spender_onboarding', + loadChildren: () => + import('./spender-onboarding/spender-onboarding.module').then((m) => m.SpenderOnboardingPageModule), + }, { path: 'team_reports', loadChildren: () => import('./team-reports/team-reports.module').then((m) => m.TeamReportsPageModule), diff --git a/src/app/fyle/spender-onboarding/spender-onboarding-routing.module.ts b/src/app/fyle/spender-onboarding/spender-onboarding-routing.module.ts new file mode 100644 index 0000000000..bfb053b216 --- /dev/null +++ b/src/app/fyle/spender-onboarding/spender-onboarding-routing.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; +import { SpenderOnboardingPage } from './spender-onboarding.page'; + +const routes: Routes = [ + { + path: '', + component: SpenderOnboardingPage, + }, +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class SpenderOnboardingRoutingModule {} diff --git a/src/app/fyle/spender-onboarding/spender-onboarding.module.ts b/src/app/fyle/spender-onboarding/spender-onboarding.module.ts new file mode 100644 index 0000000000..9f64b3b718 --- /dev/null +++ b/src/app/fyle/spender-onboarding/spender-onboarding.module.ts @@ -0,0 +1,14 @@ +import { NgModule } from '@angular/core'; +import { SharedModule } from 'src/app/shared/shared.module'; +import { SpenderOnboardingPage } from './spender-onboarding.page'; +import { IonicModule } from '@ionic/angular'; +import { FormsModule } from '@angular/forms'; +import { CommonModule } from '@angular/common'; +import { SpenderOnboardingRoutingModule } from './spender-onboarding-routing.module'; +import { MatButtonModule } from '@angular/material/button'; + +@NgModule({ + imports: [SharedModule, CommonModule, FormsModule, IonicModule, MatButtonModule, SpenderOnboardingRoutingModule], + declarations: [SpenderOnboardingPage], +}) +export class SpenderOnboardingPageModule {} diff --git a/src/app/fyle/spender-onboarding/spender-onboarding.page.html b/src/app/fyle/spender-onboarding/spender-onboarding.page.html new file mode 100644 index 0000000000..6127034901 --- /dev/null +++ b/src/app/fyle/spender-onboarding/spender-onboarding.page.html @@ -0,0 +1,29 @@ +
+ + + +
+
👋
+
+
Hello {{userFullName}},
+
Let’s get started!
+
+
+
+
+
+ + +
+
Skip
+
+
+
diff --git a/src/app/fyle/spender-onboarding/spender-onboarding.page.scss b/src/app/fyle/spender-onboarding/spender-onboarding.page.scss new file mode 100644 index 0000000000..5c241bf2f7 --- /dev/null +++ b/src/app/fyle/spender-onboarding/spender-onboarding.page.scss @@ -0,0 +1,104 @@ +@import '../../../theme/colors.scss'; +$item-border-color: #e0e0e0; +$background-color: #fff; +$menu-botton-color: #000; +$toolbar-border: #ababab6b; + +.spender-onboarding { + background: $border-info-lighter; + height: 100%; + + &__progress-bar { + width: 50px; + } + + &__progress-bar-right { + margin-left: 4px; + } + + &__menu-icon-container { + padding: 20px 16px; + } + + &__step-tracker { + padding: 24px; + border-radius: 32px 32px 0px 0px; + border: 1px solid $border-info-lighter; + background: $pure-white; + box-shadow: -14px -6px 24px 0px #00000008; + } + + &__stepper-container { + display: flex; + justify-content: space-between; + align-items: center; + } + + &__user-greeting { + display: flex; + gap: 12px; + align-items: flex-start; + color: $dark-grey; + line-height: 1.4; + padding: 0 24px; + margin: 12px 0 32px 0; + height: 42px; + } + + &__wave { + font-size: 32px; + align-self: center; + } + + &__user-name { + font-size: 16px; + font-weight: 500; + } + + &__content { + font-size: 14px; + font-weight: 400; + } + + &__menubutton { + color: $menu-botton-color; + } + + &__title { + line-height: 1.3; + color: $menu-botton-color; + } + + &__zero-state { + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + &__option { + font-weight: normal; + color: #0077ee; + font-size: 16px; + } + + &__select-state { + display: flex; + justify-content: flex-start; + align-items: center; + min-width: 120px; + } + + &__select-state-checkbox { + margin-right: 8px; + } + + &__skip-cta { + color: $blue-black; + text-align: center; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 1.3; + } +} diff --git a/src/app/fyle/spender-onboarding/spender-onboarding.page.spec.ts b/src/app/fyle/spender-onboarding/spender-onboarding.page.spec.ts new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/app/fyle/spender-onboarding/spender-onboarding.page.ts b/src/app/fyle/spender-onboarding/spender-onboarding.page.ts new file mode 100644 index 0000000000..4b5e848f05 --- /dev/null +++ b/src/app/fyle/spender-onboarding/spender-onboarding.page.ts @@ -0,0 +1,32 @@ +import { Component } from '@angular/core'; +import { from, map, switchMap } from 'rxjs'; +import { ExtendedOrgUser } from 'src/app/core/models/extended-org-user.model'; +import { LoaderService } from 'src/app/core/services/loader.service'; +import { OrgUserService } from 'src/app/core/services/org-user.service'; + +@Component({ + selector: 'app-spender-onboarding', + templateUrl: './spender-onboarding.page.html', + styleUrls: ['./spender-onboarding.page.scss'], +}) +export class SpenderOnboardingPage { + isLoading = true; + + userFullName: string; + + constructor(private loaderService: LoaderService, private orgUserService: OrgUserService) {} + + ionViewWillEnter(): void { + this.isLoading = true; + from(this.loaderService.showLoader()) + .pipe( + switchMap(() => this.orgUserService.getCurrent()), + map((eou: ExtendedOrgUser) => { + this.userFullName = eou.us.full_name; + this.isLoading = false; + this.loaderService.hideLoader(); + }) + ) + .subscribe(); + } +} diff --git a/src/assets/svg/progress-bar.svg b/src/assets/svg/progress-bar.svg new file mode 100644 index 0000000000..97a83d3ca9 --- /dev/null +++ b/src/assets/svg/progress-bar.svg @@ -0,0 +1,5 @@ + + + + +