Reward Snackbar

reward-snackbar.component.js

import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
import { MAT_SNACK_BAR_DATA, MatSnackBarRef } from '@angular/material';
import { DOCUMENT } from '@angular/common';
import { DefaultSnackbarComponent } from './default-snackbar.component';

@Component({
    template: `
    <span class="snack">
        <span class="reward-snack">
            {{rewardMessage}}
        </span>
        <span class="reward-snack-action ml-4">
		<button mat-button (click)="action()">{{safetyPointsAction}}</button>
        </span>
    </span>
  `
})
export class RewardSnackbarComponent extends DefaultSnackbarComponent implements OnInit, OnDestroy {

    rewardMessage: string;
    safetyPointsAction: string;

    constructor(@Inject(MAT_SNACK_BAR_DATA) data: any,
        @Inject(DOCUMENT) document: Document,
        snackBar: MatSnackBarRef<any>) {
        super(data, document, snackBar);
        this.rewardMessage = data[0];
        this.safetyPointsAction = data[1];
    }

    /**
     * Emits an event if the user clicks on the safety rewards action
     * Should take them to see their safety rewards, but handled in parent
     */
    action() {
        this.snackBar.afterDismissed().subscribe(() => {
            // TODO: Take to rewards points page:
            alert('TODO: Take to rewards points page');
        });
    }
}