import { Component , OnDestroy , OnInit , ViewChild } from '@angular/core' ; import { BehaviorSubject , Observable , Subscription } from 'rxjs' ; import { map } from 'rxjs/operators' ; import { ConfigsService } from '../../../common/services/configs.service' ; import { OnboardingStepName } from '../onboarding-v3.service' ; import { OnboardingV3PanelService } from '../panel/onboarding-panel.service' ; import { OnboardingV3ModalProgressService } from '../modal/onboarding-modal-progress.service' ; import { OnboardingV3ChannelComponent } from '../panel/channel/channel.component' ; /**
 * Onboarding modal component; core function as a connector,
 * and to switch between child panels.
 */ @ Component ( { selector : 'm-onboardingProgress' , templateUrl : './onboarding-modal.component.html' , styleUrls : [ './onboarding-modal.component.ng.scss' ] , } ) export class OnboardingV3ModalComponent implements OnDestroy , OnInit { private subscriptions : Subscription [ ] = [ ] ; public cdnAssetsUrl : string ; /**
     * Dismiss intent.
     */ onDismissIntent : ( ) => void = ( ) => { } ; /**
     * Save intent.
     */ onSaveIntent : ( step : OnboardingStepName ) => void = ( ) => { } ; /**
     * Panel with an async save function that can be called before resuming modal dismissal.
     */ @ ViewChild ( 'awaitablePanel' ) awaitablePanel : OnboardingV3ChannelComponent ; constructor ( private panel , private inProgressService , private configs ) { this . cdnAssetsUrl = configs . get ( 'cdn_assets_url' ) ; } ngOnInit ( ) { this . subscriptions . push ( this . panel . forceComplete$ . subscribe ( ( step ) => { if ( this . currentStep$ . getValue ( ) ) this . onSaveIntent ( step ) ; } ) , this . panel . dismiss$ . subscribe ( dismiss => { if ( this . currentStep$ . getValue ( ) ) this . onDismissIntent ( ) ; } ) ) ; } ngOnDestroy ( ) { for ( let subscription of this . subscriptions ) { subscription . unsubscribe ( ) ; } } param onDismissIntent set opts ( { onDismissIntent , onSaveIntent } ) { this . onDismissIntent = onDismissIntent || ( ( ) => { } ) ; this . onSaveIntent = onSaveIntent || ( ( ) => { } ) ; } /**
     * Subject containing true if in progress
     */ get inProgress$ ( ) : BehaviorSubject < boolean > { return this . inProgressService . inProgress$ ; } returns { BehaviorSubject < OnboardingStepName > } get currentStep$ ( ) : BehaviorSubject < OnboardingStepName > { return this . panel . currentStep$ ; } returns { Observable < object > } get bannerSrc$ ( ) : Observable < object > { return this . currentStep$ . pipe ( map ( ( currentStep ) : object => { return currentStep === 'SuggestedHashtagsStep' || currentStep === 'WelcomeStep' ? { backgroundImage : `url('${ this . cdnAssetsUrl }assets/photos/confetti-concert-colors.jpg')` , } : { height : '100px' , } ; } ) ) ; } returns { Observable < boolean > } get showBanner$ ( ) : Observable < boolean > { return this . currentStep$ . pipe ( map ( ( currentStep ) : boolean => { return ( currentStep === 'SuggestedHashtagsStep' || currentStep === 'WelcomeStep' ) ; } ) ) ; } returns { Observable < boolean > } get showFooter$ ( ) : Observable < boolean > { return this . currentStep$ . pipe ( map ( ( currentStep ) : boolean => { return ( currentStep !== 'VerifyUniquenessStep' && currentStep !== 'VerifyPhoneStep' && currentStep !== 'VerifyBankStep' ) ; } ) ) ; } returns { Observable < boolean > } get disabled$ ( ) : Observable < boolean > { return this . panel . disableProgress$ ; } returns { Promise < void > } public async nextClicked ( ) { try { if ( this . awaitablePanel && typeof this . awaitablePanel . saveAsync === 'function' ) { await this . awaitablePanel . saveAsync ( ) ; } if ( ! this . inProgressService . inProgress$ . getValue ( ) ) { this . onSaveIntent ( this . currentStep$ . getValue ( ) ) ; this . panel . nextStep ( ) ; } } catch ( e ) { console . error ( e ) ; } } }