Versions Compared

Old Version 3

changes.mady.by.user Nick Jensen

Saved on

compared with

New Version Current

changes.mady.by.user Nick Jensen

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Code Block
languagehtml
<body>
    <!-- Page body, including Rubiq Web Components, go here -->
    <rs-lottery-countdown loading-message="Please wait...">
        Please wait...
    </rs-lottery-countdown>

    <!-- Load/activate Web Components -->
    <script defer src="https://testapiapi.dialogportal.com/v1/components/lottery.js"></script>
</body>

...

lottery: All Lottery web components except <rs-lottery-purchase-failure> have a lottery event, which contains an object describing the active Lottery, or (in the case of <rs-lottery-purchase-success>) the Lottery that has just been purchased. The event contains these properties:

  • name: Lottery name

  • startDate

  • endDate

  • drawDate

  • quickdrawDeadline

  • quickdrawPrize

...

When there is no active Lottery available, this message is displayed (in addition to the standard noActiveLottery event being raised):

Der findes ingen aktiv lotteri

Inputs:

loading-message: The message displayed while the active Lottery is being fetched from the API

<rs-lottery-countdown-upcoming>

Fetches the next Lottery to start (the next future lottery which has not yet begun) and displays a self-updating countdown to the lottery’s start date:

Lotteri <Lottery name> begynder om 56 dage, 11 timer og 30 minutter

When there is no upcoming Lottery available, a custom message can be displayed (in addition to the noUpcomingLottery event being raised). Use an HTML element with the upcomingNone attribute, like this:

Code Block
languagehtml
<rs-lottery-countdown-upcoming loading-message="søger efter kommende lotterier...">
    <div upcomingNone class="rs-lottery-countdown-upcoming-none" style="display:none;">
        Lotteriet er afsluttet. Et nyt lotteri starter snart.
        <a href="https://lotteries.com/check-winners/">Se om du har vundet her</a>
    </div>
</rs-lottery-countdown-upcoming>
Inputs:

loading-message: The message displayed while the active Lottery is being fetched from the API

Outputs:

lottery: The same as the standard lottery event

noUpcomingLottery: Similar to the standard noActiveLottery event

<rs-lottery-quickdraw>

Fetches the currently active Lottery and if the quickdraw deadline has not passed, displays a message, e.g.:

...

The package is reserved for a limited time, and the component displays a running countdown to the reservation expiry.

Inputs:

loading-image: The URL of an image to display while numbers are being fetched from the server. Note that when a loading-image is present, the loading-message is hidden.

loading-message: The message text to display while numbers are being fetched from the server

packageSize: Reservation package size, used to determine which package is being reserved. Setting this value triggers the reservation. Setting it to 0 cancels the current reservation.

...

Code Block
languagejs
var cmpNumbers = document.querySelector('rs-lottery-package-numbers');
console.log("ReservationID: " + cmpNumbers.reservation.id);
Outputs:

expired: Emitted with when the reservation expires

numbersReceived: Emitted when a batch of numbers is available

<rs-lottery-purchase-details>

...

Once the form is validated and submitted, the browser will be redirected to a payment portal site. The successUrl and failureUrl properties are used to tell the payment portal where to go on successful/unsuccessful completion of the payment.

Inputs:

confirmLabel: The text displayed on the “submit” button

loading-image: The URL of an image to display while the reservation is being pre-approved. Note that when a loading-image is present, the loading-message is hidden.

loading-message: The message text to display while the reservation is being pre-approved

reservationID: The ID of the reserved package that is being purchased. This should be retrieved from the <rs-lottery-package-numbers> component.

...

failureUrl: The URL that the user should be redirected to after they cancel a purchase (should contain an <rs-lottery-purchase-failure> component).

Outputs:

lotteryExpired: Emitted when a user attempts to purchase an expired package reservation.

...

This component does not display anything.

Outputs:

lottery: Similar to the lottery standard lottery event, this event contains the details of the lottery that has just been purchased. The event contains the following properties:

...