JavaScript

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function LoginToAccount() {
    window.open("LogIn/LoginForm.html", "","width=350,height=150")
}
//-->
</SCRIPT>

[Route("api/PeakTimeRebate")]
public class PeakTimeRebateController : Controller
{
    [HttpGet("GetTransactionStatus")]
    [DecryptoFilter]
    public IActionResult GetTransactionStatus(string EncryptedAccountNumber)
    {
        this.Response.ContentType = "text/html";
        int randVal = new Random().Next(0, 10);

        if ((randVal == 1) || (randVal == 2) || (randVal == 3) || (randVal == 5) || (randVal == 7))
            return new ObjectResult("Prime");
        if (randVal % 2 == 0)
        {
            return new ObjectResult("Even");
        }
        else
        {
            return new ObjectResult("Odd");
        }
    }
}

@Injectable()
export class PeakTimeRebatesService extends ServiceBase {
    private _peaktimerebateTransactionStatusUrl: string = '/api/PeakTimeRebate/GetTransactionStatus';

    constructor(public _http: PgeCustomHttp) {
        super(_http);
    }

    public peakTimeRebateTransactionStatus(encryptedAccountNumber: string): Observable<string> {
        debugger;
        const params: URLSearchParams = new URLSearchParams(); //'EncryptedAccountNumber', new PgeCustomQueryEncoder()
        params.set('EncryptedAccountNumber', encryptedAccountNumber);

        const options = new RequestOptions({ search: params });

        return this._http.get(this._peaktimerebateTransactionStatusUrl, options)
            .map(this.extractBoolean)
            .catch(this.handleError);
    };
};

import { PeakTimeRebatesService } from '../peakTimeRebates/peakTimeRebates.service'; //Importing my Service


@Component({
    selector: 'transactionSuccessful-message',
    templateUrl: 'transactionSuccessful.component.html'
})

export class TransactionSuccessfulComponent extends ComponentBase {
    @Input()
    public TransactionMessage: string = '';
    public TransactionSuccessStatus = false;
    public TransactionExceptionStatus = false;
    private max: number = 10; private min: number = 0; private randVal: number; private checkStatMessage: string;

    @Input()
    public get EncryptedAccountNumber() {
        debugger;
        return this._encryptedAccountNumber;
    }

    public set EncryptedAccountNumber(value: string) {
        debugger;
        if ((value == null) || (value == '')) {
            value = 'XYZ'
        }
        this._encryptedAccountNumber = value;
        if (this.EncryptedAccountNumber !== '') {
            this.peakTimeRebateTransactionStatus(this.EncryptedAccountNumber);            
        }
    }

    private _encryptedAccountNumber: string = '';

    public constructor(
        private _service: PeakTimeRebatesService       
    ) {        
        super();
        debugger;
    }


    private peakTimeRebateTransactionStatus(encryptedAccountNumber: string): void {
        debugger;
        this._service.peakTimeRebateTransactionStatus(encryptedAccountNumber).subscribe((peakTimeRebateTransactionStatus: any) => {
            this.TransactionMessage = peakTimeRebateTransactionStatus;           
        });
    }


    ngOnInit(): void {
        debugger;
        this.EncryptedAccountNumber = '';      
        if (this.TransactionMessage == "Prime")
        {
            this.TransactionSuccessStatus = true;
        }
        else if (this.TransactionMessage == "Even")
        {
            this.TransactionSuccessStatus = false;
        }
        else
        {
            this.TransactionExceptionStatus = true;
        }
    }
}	

<div class="layout-two-column">
    <section class="layout-primary">
        <form #payBillSuccessForm="ngForm" id="payBillSuccessForm" name="payBillSuccessForm" novalidate>

            <div *ngIf="TransactionSuccessStatus">
                <h2 id="transactionSucessfulText">{{ 'Common.EnrollmentSuccessful' | Translate }}</h2>
            </div>

            <div *ngIf="!TransactionSuccessStatus">
                <h2 id="transactionFailedText">{{ 'PeakTimeRebatesView.EnrollmentSuccessMessage' | Translate }}</h2>
            </div>

            <div *ngIf="TransactionExceptionStatus">
                <h2 id="transactionExceptionText">{{ 'PeakTimeRebatesView.PeakTimeRebatesHeader' | Translate }}</h2>
            </div>

            <div class="divider-invisible text-right">
                <a class="btn" routerLink="/AccountInformation" id="doneButton">{{ 'Common.Done' | Translate }}</a>
            </div>
        </form>
    </section>
</div>
<browser-back [lastpage]="true"></browser-back>

<style>

body {font-family: Arial;}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
</style>

<h2>Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

<div id="injection"></div>

<script>
    $(document).ready(function () {
       PageInjector('targetURL');
    });

    function PageInjector(url) {
        $("#injection").html('');
        $.ajax({
            url: url,
            method: "get",
            success: function (data) {
                $("#injection").html(data);
            }
        });
    }
</script>

<div id="area49253971_6938" class="component interaction-component float-none clear-none  interaction_booted">
    <div role="status" class="int-prep hidden"></div>
    <div>
        <div class="data-field interaction-type">RevealContent</div>
        <div class="interaction_title"></div>
        <div class="interaction_content RevealContent" style="min-height: 400px; width: 400px;">
            <div class="pointer">
                <td>
                    <div id="area49253971_6940" class="component image-component float-left clear-none  booted"><img src="somelink" height="50" width="30" title="" alt="" style="padding-right: 10px;"></div>
                    <p class="body" id="area49253971_6941">^__em>^__strong><a href="#">Some question</a></p>
                </td>
            </div>
            <div style="display: block;">
                <td>
                    <p class="body" id="area49253971_6942">^__strong>Some answer</p>
                </td>
            </div>
        </div>
        <div class="interaction_data" style="display: none;">
            <div id="area49253971_6939" class="component table-component float-none clear-none ">
                <div class="component_caption"></div>
            </div>
        </div>
    </div>
</div>

define("site/mixins/interactions/reveal_content", ["exports", "jquery"], function (exports, _jquery) {

  function RevealContent($el) {
    this.el = $el;

    this.interactionData = $el.find(".interaction_data");
    this.container = $el.find(".interaction_content");
  }

  RevealContent.prototype = {
    init: function init() {
      var contentToReveal = (0, _jquery["default"])('<div />').append((0, _jquery["default"])(this.interactionData.find('td')[1]).detach());
      var initialContent = (0, _jquery["default"])('<div class="pointer" />').append((0, _jquery["default"])(this.interactionData.find('td')[0]).detach());

      this.container = this.container.parent().find('.RevealContent');

      this.container.append(initialContent);
      this.container.append(contentToReveal.hide());

      initialContent.click(function () {
        (0, _jquery["default"])(contentToReveal).slideToggle('slow');
      });

      // prevent any links within initialContent from navigating anywhere
      initialContent.find('a').click(function (e) {
        e.preventDefault();
      });
    }
  };

  exports["default"] = RevealContent;
});

$(document).ready(function() {
    $(this).on('click', '.interaction_booted', function () {
    //console.log('made it here');
     
        interactionData = $(this).find(".interaction_data");
        this.container = $(this).find(".interaction_content");
        
        var contentToReveal = $('<div />').append($(interactionData.find('tdd')[1]).detach());
        var initialContent = $('<div class="pointer" />').append($(interactionData.find('tdd')[0]).detach());

        this.container = this.container.parent().find('.RevealContent');

        this.container.append(initialContent);
        this.container.append(contentToReveal.hide());

        initialContent.click(function () {
            $(contentToReveal).slideToggle('slow');
        });

    });
  
    
});

var contentToReveal = $('<div />').append($(interactionData.find('tdd')[1]).detach());
var initialContent = $('<div class="pointer" />').append($(interactionData.find('tdd')[0]).detach());

var contentToReveal = (0, _jquery["default"])('<div />').append((0, _jquery["default"])(this.interactionData.find('td')[1]).detach());
var initialContent = (0, _jquery["default"])('<div class="pointer" />').append((0, _jquery["default"])(this.interactionData.find('td')[0]).detach());