com.sabre.redapp.example3.web.nudge Sample

As a Red App developer, you are able to display Nudge through typescript Nudge API.

Typescript Nudge Introduction

To add nudge you have to register 'nudge' configuration through 'ExtensionPointService':

class NudgeConfig {
        readonly icon: string;
        readonly text: string;
        readonly actions: INudgeAction[];
        readonly filter: (entries: NgvNudgeEntry[]) => boolean;
}

  • icon - defines icon displayed in Nudge, types:

    • "info"

    • "warning"

    • "danger"

    • png icon in BASE64

  • text - defines nudge message

  • actions - defines action buttons

  • filter - function for inserting nudge only to the entries for which it returns true

interface INudgeAction {
    readonly id: string;
    readonly label: string;
    readonly action?: (entries: NgvNudgeEntry[]) => void;
}

  • id - defines action id

  • label - defines action button label

  • action - function called on action button click

Sample Code

The sample code snippets below demonstrate an example of how to add Nudge to Air Availability and Hotel Shopping with specific filtering.

  1. Import ExtensionPointService.

    import {ExtensionPointService} from 'sabre-ngv-xp/services/ExtensionPointService';

const xp: ExtensionPointService = getService(ExtensionPointService);

  2. In the initialization method of the Main.ts:

    init(): void {
        super.init();

        const CUSTOM_ICON_IN_BASE64: string = 'iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABJ0lEQVRYR83XsQ3CMBAFUG'
            + 'caRkqBWIGWJgUFDS0rIApGYht00lmyHPvu37cCoSEI7P+I7Ys9pT+/psH8Rdvf2H5GABJ+'
            + '1WB5pxAsIIcfFfBSTBjBAMrwtwLmlBKFiAJa4Xn4KUQEYIXTCBSAhFMIBGCFnzX1US1DeD'
            + 'g8gPfPnxp8atQBCGEBvHDJtADyvYvoAZBwBOAiWgA0HAWYiBoQCY8AuogSEA2PApqIDGDC'
            + 'GcAKsRuAyJi74C3DujysluWuJmHWRu7EXRtdnB1RtyCNFiJkJ2ZWw9FSfFDBpyOhSzE6HJ'
            + 's+jBDE5o9jBOEuNWuiePuBsi2yOtwxrzERgFeswuHSYRTQQ1DhLKBGyGfqTDACKBFy/fOj'
            + 'Wbk65Dp8JMsdMHMAKb/wb756N3sh+j5jAgAAAABJRU5ErkJggg==';

        xp.addConfig('nudge', new NudgeConfig(
            CUSTOM_ICON_IN_BASE64,
            'Redapp Web Nudge with action for AirAvailability',
            [{
                id: 'RedappActionId',
                label: 'Click me!',
                action: (entries: NgvNudgeEntry[]) => {
                    console.log('Entries for this nudge:');
                    console.log(entries);
                    getService(LayerService).showInModal(new NudgeEntryView({
                        model: {entries: {entries}}
                    }), {title: 'Nudge entries'}, {display: 'areaView'});
                }
            }],
            this.filterNudgeForAirAvailability)
        );

        xp.addConfig('nudge', new NudgeConfig(
            'info',
            'Redapp Web Nudge for Hotel Shopping in KRK',
            [],
            this.filterNudgeForHotelShopping)
        );
    }

  3. Filters for Nudges:

        filterNudgeForAirAvailability(entries: NgvNudgeEntry[]): boolean {
        return entries.filter(
            (entry) =>
                (
                    ((entry.location === 'AIR_AVAILABILITY' || entry.location === 'SHOPPING')
                        && ((entry.origin !== 'JFK' && entry.destination === 'LAX')
                            || (entry.origin === 'JFK' && entry.destination === 'DFW')))
                )
        ).length > 0;
    }

    filterNudgeForHotelShopping(entries: NgvNudgeEntry[]): boolean {
        return entries.filter((entry) => (entry.location === 'HOTEL' && entry.destination === 'KRK')).length > 0;
    }