merchandising/fare-upsell-success

Generic


Saver to Main

Custom Perks Your itinerary has been upgraded from Saver to Main.
  • Earlier boarding and overhead bin access
  • Flight changes and cancellations
  • Elite Mileage Plan™ benefits
    •
    Your itinerary has been upgraded from Saver to Main.

    Main to First

    Custom Perks and Custom Icons: Your itinerary has been upgraded from Main to First Class.
  • Perk A
  • Perk B
  • Perk C
    •
    Your itinerary has been upgraded from Main to First Class.

    # 🏠 Properties

    Name Type
    slimBoolean

    # 🎰 Slots

    Name Default value
    headerYou've been upgraded!
    iconA
    iconB
    iconC
    perk
  • Earlier Boarding
  • More Flexibility
  • Better Seats
    •  
                
    Show  Code
    
            
<script src="/components/shared/component-base.js"></script>
<script src="/components/fare-upsell-success/main.js"></script>
<link rel="stylesheet" href="/components/shared/component-base.css" />
<style>
  h1 {
    font-size: 2rem;
    padding: 1rem;
  }
</style>

<h1>Generic</h1>
<fare-upsell-success></fare-upsell-success>

<br/>

<fare-upsell-success slim></fare-upsell-success>


<h1>Saver to Main</h1>
Custom Perks
<fare-upsell-success>
  <span slot="header">Your itinerary has been upgraded from Saver to Main.</span>
  <li slot="perk">Earlier boarding and overhead bin access</li>
  <li slot="perk">Flight changes and cancellations</li>
  <li slot="perk">Elite Mileage Plan™ benefits</li>
</fare-upsell-success>

<br/>

<fare-upsell-success slim>
  <span slot="header">Your itinerary has been upgraded from Saver to Main.</span>
</fare-upsell-success>


<h1>Main to First</h1>
Custom Perks and Custom Icons:
<fare-upsell-success>
  <span slot="header">Your itinerary has been upgraded from Main to First Class.</span>
  <auro-icon slot="iconA" category="in-flight" name="boarding" customSize></auro-icon>
  <auro-icon slot="iconB" category="in-flight" name="wine-and-spirits" customSize></auro-icon>
  <auro-icon slot="iconC" category="in-flight" name="first-class-legroom" customSize></auro-icon>
  <li slot="perk">Perk A</li>
  <li slot="perk">Perk B</li>
  <li slot="perk">Perk C</li>
</fare-upsell-success>

<br/>

<fare-upsell-success slim>
  <span slot="header">Your itinerary has been upgraded from Main to First Class.</span>
</fare-upsell-success>
    🕹️   Component Editor