File
Implements
Metadata
| selector |
cx-asm-main-ui |
| templateUrl |
./asm-main-ui.component.html |
Index
Properties
|
|
|
Methods
|
|
|
HostBindings
|
|
|
HostBindings
|
class.hidden
|
Type : boolean
|
Default value : false
|
|
|
Methods
|
Protected
handleCustomerSessionStartRedirection
|
handleCustomerSessionStartRedirection()
|
|
|
|
|
|
loginCustomerSupportAgent
|
loginCustomerSupportAgent(undefined: literal type)
|
|
|
Parameters :
| Name |
Type |
Optional |
literal type
|
No
|
|
|
startCustomerEmulationSession
|
startCustomerEmulationSession(undefined: literal type)
|
|
|
Parameters :
| Name |
Type |
Optional |
literal type
|
No
|
|
|
csAgentTokenLoading$
|
Type : Observable<boolean>
|
|
|
|
customerSupportAgentLoggedIn$
|
Type : Observable<boolean>
|
|
|
|
disabled
|
Default value : false
|
Decorators :
@HostBinding('class.hidden')
|
|
|
|
isCollapsed$
|
Type : Observable<boolean>
|
|
|
|
Protected
startingCustomerSession
|
Default value : false
|
|
|
import { Component, HostBinding, OnInit } from '@angular/core';
import { AsmService, AsmUi } from '@spartacus/asm/core';
import { CsAgentAuthService } from '@spartacus/asm/root';
import {
AuthService,
GlobalMessageService,
GlobalMessageType,
RoutingService,
User,
UserService,
} from '@spartacus/core';
import { Observable, of } from 'rxjs';
import { map, switchMap, take } from 'rxjs/operators';
import { AsmComponentService } from '../services/asm-component.service';
@Component({
selector: 'cx-asm-main-ui',
templateUrl: './asm-main-ui.component.html',
})
export class AsmMainUiComponent implements OnInit {
customerSupportAgentLoggedIn$: Observable<boolean>;
csAgentTokenLoading$: Observable<boolean>;
customer$: Observable<User | undefined>;
isCollapsed$: Observable<boolean>;
@HostBinding('class.hidden') disabled = false;
protected startingCustomerSession = false;
constructor(
protected authService: AuthService,
protected csAgentAuthService: CsAgentAuthService,
protected userService: UserService,
protected asmComponentService: AsmComponentService,
protected globalMessageService: GlobalMessageService,
protected routingService: RoutingService,
protected asmService: AsmService
) {}
ngOnInit(): void {
this.customerSupportAgentLoggedIn$ =
this.csAgentAuthService.isCustomerSupportAgentLoggedIn();
this.csAgentTokenLoading$ =
this.csAgentAuthService.getCustomerSupportAgentTokenLoading();
this.customer$ = this.authService.isUserLoggedIn().pipe(
switchMap((isLoggedIn) => {
if (isLoggedIn) {
this.handleCustomerSessionStartRedirection();
return this.userService.get();
} else {
return of(undefined);
}
})
);
this.isCollapsed$ = this.asmService
.getAsmUiState()
.pipe(
map((uiState: AsmUi) =>
uiState.collapsed === undefined ? false : uiState.collapsed
)
);
}
protected handleCustomerSessionStartRedirection(): void {
this.asmComponentService
.isCustomerEmulationSessionInProgress()
.pipe(take(1))
.subscribe((isCustomerEmulated) => {
if (this.startingCustomerSession && isCustomerEmulated) {
this.startingCustomerSession = false;
this.globalMessageService.remove(GlobalMessageType.MSG_TYPE_ERROR);
this.routingService.go('/');
}
});
}
loginCustomerSupportAgent({
userId,
password,
}: {
userId: string;
password: string;
}): void {
this.csAgentAuthService.authorizeCustomerSupportAgent(userId, password);
}
logout(): void {
this.asmComponentService.logoutCustomerSupportAgentAndCustomer();
}
startCustomerEmulationSession({ customerId }: { customerId?: string }): void {
if (customerId) {
this.csAgentAuthService.startCustomerEmulationSession(customerId);
this.startingCustomerSession = true;
} else {
this.globalMessageService.add(
{ key: 'asm.error.noCustomerId' },
GlobalMessageType.MSG_TYPE_ERROR
);
}
}
hideUi(): void {
this.disabled = true;
this.asmComponentService.unload();
}
}
<div class="asm-bar">
<div class="asm-bar-branding">
<img
class="logo"
src="data:image/png;base64,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"
width="48"
height="24"
alt="{{ 'asm.mainLogoLabel' | cxTranslate }}"
/>
<div class="asm-title">
{{ 'asm.mainTitle' | cxTranslate }}
</div>
</div>
<div class="asm-bar-actions">
<cx-asm-toggle-ui></cx-asm-toggle-ui>
<cx-asm-session-timer
*ngIf="customerSupportAgentLoggedIn$ | async"
></cx-asm-session-timer>
<button
class="close"
title="{{ 'asm.hideUi' | cxTranslate }}"
*ngIf="
!(customerSupportAgentLoggedIn$ | async) &&
!(csAgentTokenLoading$ | async)
"
(click)="hideUi()"
></button>
<button
class="logout"
title="{{ 'asm.logout' | cxTranslate }}"
*ngIf="customerSupportAgentLoggedIn$ | async"
(click)="logout()"
></button>
</div>
</div>
<ng-container *ngIf="!(isCollapsed$ | async) as notCollapsed">
<ng-container
*ngIf="customerSupportAgentLoggedIn$ | async; else showLoginForm"
>
<ng-container *ngIf="customer$ | async; else showCustomerSelection">
<cx-customer-emulation *ngIf="notCollapsed"></cx-customer-emulation>
</ng-container>
<ng-template #showCustomerSelection>
<cx-customer-selection
*ngIf="notCollapsed"
(submitEvent)="startCustomerEmulationSession($event)"
></cx-customer-selection>
</ng-template>
</ng-container>
<ng-template #showLoginForm>
<cx-csagent-login-form
*ngIf="notCollapsed"
(submitEvent)="loginCustomerSupportAgent($event)"
[csAgentTokenLoading]="csAgentTokenLoading$ | async"
></cx-csagent-login-form>
</ng-template>
</ng-container>
Legend
Html element with directive