before seatmapXML
This commit is contained in:
zino
@@ -1,11 +1,20 @@
|
||||
import $ from 'jquery';
|
||||
// import $, { Callbacks } from 'jquery';
|
||||
var $ = require("jquery");
|
||||
import 'jquery-ui';
|
||||
import * as I from "./types";
|
||||
import Utils from './utils';
|
||||
var parseString = require('xml2js').parseString;
|
||||
import axios from 'axios';
|
||||
import * as communication from "./communication";
|
||||
// import { getEventInfo } from './xml';
|
||||
// var parseString = require('xml2js').parseString;
|
||||
// import axios, { AxiosPromise, AxiosResponse, Method } from 'axios';
|
||||
// import axios, { AxiosResponse } from 'axios';
|
||||
// import * as xml from "./xml";
|
||||
// import { parseStringPromise } from 'xml2js';
|
||||
// const xml2js = require('xml2js');
|
||||
// const util = require('util');
|
||||
// var xml2jsParser = require('xml2js').parseString;
|
||||
|
||||
const config: I.config = {
|
||||
const config: I.Config = {
|
||||
debug: true,
|
||||
branch: "staging",
|
||||
urlSeatmapStaging: "https://staging.tickets.zinomedia.de",
|
||||
@@ -13,100 +22,112 @@ const config: I.config = {
|
||||
cssSeatmapMaster: "https://tickets.zinomedia.de/dist/style.css",
|
||||
cssSeatmapStaging: "https://staging.tickets.zinomedia.de/dist/style.css",
|
||||
}
|
||||
let inputsWithValue: I.InputsWithValue;
|
||||
|
||||
const checkoutParams: string[] = [
|
||||
'APPTE', 'age_consent_is_checked', 'agency', 'cancelAndRedirectTrxState', 'cogid', 'coids', 'discount=A=IE', 'discount=A=IV', 'discountdesc=A=IE', 'discountdesc=A=IV', 'discountfees=A=IE', 'discountfees=A=IV', 'discountprice=A=IE', 'discountprice=A=IV', 'dpa_selection', 'etpgcode', 'flashDetected', 'gid', 'hbx_discount_prices', 'hbx_discounts', 'hbx_offered_pg', 'hbx_perf_codes', 'hbx_perf_sub_codes', 'hbx_pids', 'hbx_requested_pg', 'hbx_selected_tixx', 'hbx_upsell_flag', 'request_type', 'invalid_seats', 'inventory_filtering_action', 'inventory_month', 'inventory_year', 'isCapEnabled', 'is_availability_switch_from_map', 'is_ticket_exchange_request', 'ism_map_current_state_json_data', 'jcarousel_auto_off_val', 'listing_type', 'mainEventPID', 'map_coupon_code', 'mlbamsp', 'oid', 'ooids', 'orderkey', 'orgid', 'p_orgid', 'package_pids', 'parent_offer_id', 'pay_pal_token', 'pid', 'prevtrxstate', 'recapToken', 'redeem_voucher_data_event_mapping', 'replay_request', 'request_action', 's_mem_tkt_ren_retrieval', 'schedule', 'secure_trxn_enabled', 'selected_seat_indexes', 'selected_upsell_option', 'supplierCode', 'supplier_code', 'target_name_value', 'target_prev_trxstate', 'target_trxstate', 'target_url', 'timeout_seconds', 'trxstate', 'upsell_selected', 'user_context', 'valid_coupon_code_message'
|
||||
];
|
||||
// const checkoutParams: string[] = [
|
||||
// 'APPTE', 'age_consent_is_checked', 'agency', 'cancelAndRedirectTrxState', 'cogid', 'coids', 'discount=A=IE', 'discount=A=IV', 'discountdesc=A=IE', 'discountdesc=A=IV', 'discountfees=A=IE', 'discountfees=A=IV', 'discountprice=A=IE', 'discountprice=A=IV', 'dpa_selection', 'etpgcode', 'flashDetected', 'gid', 'hbx_discount_prices', 'hbx_discounts', 'hbx_offered_pg', 'hbx_perf_codes', 'hbx_perf_sub_codes', 'hbx_pids', 'hbx_requested_pg', 'hbx_selected_tixx', 'hbx_upsell_flag', 'request_type', 'invalid_seats', 'inventory_filtering_action', 'inventory_month', 'inventory_year', 'isCapEnabled', 'is_availability_switch_from_map', 'is_ticket_exchange_request', 'ism_map_current_state_json_data', 'jcarousel_auto_off_val', 'listing_type', 'mainEventPID', 'map_coupon_code', 'mlbamsp', 'oid', 'ooids', 'orderkey', 'orgid', 'p_orgid', 'package_pids', 'parent_offer_id', 'pay_pal_token', 'pid', 'prevtrxstate', 'recapToken', 'redeem_voucher_data_event_mapping', 'replay_request', 'request_action', 's_mem_tkt_ren_retrieval', 'schedule', 'secure_trxn_enabled', 'selected_seat_indexes', 'selected_upsell_option', 'supplierCode', 'supplier_code', 'target_name_value', 'target_prev_trxstate', 'target_trxstate', 'target_url', 'timeout_seconds', 'trxstate', 'upsell_selected', 'user_context', 'valid_coupon_code_message'
|
||||
// ];
|
||||
// const checkoutParamSerialized = encodeURIComponent(JSON.stringify(checkoutParams))
|
||||
|
||||
const checkoutParamSerialized = encodeURIComponent(JSON.stringify(checkoutParams))
|
||||
let inputsWithValue: I.inputsWithValue;
|
||||
|
||||
window.addEventListener('load', function () {
|
||||
const content: string = new XMLSerializer().serializeToString(document);
|
||||
inputsWithValue = getInputs(content);
|
||||
getInputs(content);
|
||||
|
||||
console.log(inputsWithValue["trxstate"]);
|
||||
console.log(/posturl:"(.+?)"/.test(content));
|
||||
|
||||
// posturl absent if pvmapse === false
|
||||
if (inputsWithValue["trxstate"] !== "20" || /posturl:"(.+?)"/.test(content) === false)
|
||||
return;
|
||||
|
||||
Utils.inject(config.cssSeatmapStaging, "css", "body");
|
||||
generateSeatmapUrl(content);
|
||||
communication.listenToMessages(messagesHandler);
|
||||
getAdditionalInputs(content);
|
||||
console.log(inputsWithValue);
|
||||
checkTrxState();
|
||||
getImportantNote();
|
||||
modifySeatmapButton();
|
||||
createDialog();
|
||||
|
||||
|
||||
jQuery("#getVenueXML").on("click", () => {
|
||||
getVenueXML();
|
||||
jQuery("#getVenueXML").on("click", () => {
|
||||
// const message: I.Message = {
|
||||
// message: inputsWithValue,
|
||||
// from: "parent",
|
||||
// event: "sendInputsWithValue",
|
||||
// date: Date.now()
|
||||
// };
|
||||
// communication.sendMessage(message, "iframeSeatmap")
|
||||
// communication.sendXML(inputsWithValue["posturl"], "iframeSeatmap", "getEventInfo", "child");
|
||||
});
|
||||
|
||||
jQuery("#foobarParent").on("click", () => {
|
||||
Utils.sendMessage({ message: "Hello from parent", date: Date.now() }, "iframeSeatmap");
|
||||
communication.sendEventToChild("parent_init_venue");
|
||||
});
|
||||
});
|
||||
|
||||
function getVenueXML() {
|
||||
axios.get(inputsWithValue["posturl"])
|
||||
.then(function (response) {
|
||||
// handle success
|
||||
console.log(response);
|
||||
function messagesHandler(e: any) {
|
||||
if (typeof (e.data) !== 'string')
|
||||
return;
|
||||
|
||||
if (response.status === 200 && response.headers["content-type"] === "text/xml;charset=utf-8") {
|
||||
console.log("looks good");
|
||||
const data: I.Message = JSON.parse(e.data);
|
||||
console.log(`parent: received from ${data.from}`);
|
||||
console.log(data);
|
||||
|
||||
parseString(response.data,
|
||||
{ normalizeTags: true, normalize: true, mergeAttrs: true },
|
||||
function (err: any, result: any) {
|
||||
if (err)
|
||||
console.log(err);
|
||||
else {
|
||||
// console.log(result)
|
||||
Utils.sendMessage(result, "iframeSeatmap");
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
})
|
||||
.catch(function (error) {
|
||||
// handle error
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
|
||||
function getInputs(inContent: string): I.inputsWithValue {
|
||||
let inputsWithValue: I.inputsWithValue = {};
|
||||
const parsedHTML: Node[] = $.parseHTML(inContent);
|
||||
|
||||
$(parsedHTML).find('input').each(function () {
|
||||
if (this.value !== '' && checkoutParams.includes(this.name))
|
||||
inputsWithValue[this.name] = this.value;
|
||||
});
|
||||
|
||||
return inputsWithValue;
|
||||
}
|
||||
|
||||
function generateSeatmapUrl(inContent: string): void {
|
||||
inputsWithValue["event"] = inContent.match(/event:"(.+?)"/)![1];
|
||||
inputsWithValue["holdcode"] = inContent.match(/holdcode:"(.+?)"/)![1];
|
||||
inputsWithValue["posturl"] = inContent.match(/posturl:"(.+?)"/)![1];
|
||||
inputsWithValue["posturl"] = decodeURIComponent(`${inputsWithValue["posturl"]}&event=${inputsWithValue["event"]}&holdcode=${inputsWithValue["holdcode"]}&nocache=0&inclpkg=Y&incloffer=Y&inclcartdetails=Y&inclCart=Y&inclvenue=Y`);
|
||||
inputsWithValue["seatmapUrl"] = (config.branch == "staging" ? config.urlSeatmapStaging : config.urlSeatmapMaster) + `?posturl=${encodeURIComponent(inputsWithValue["posturl"])}&checkoutParams=${checkoutParamSerialized}`;
|
||||
console.log(inputsWithValue["seatmapUrl"]);
|
||||
}
|
||||
|
||||
function checkTrxState(): void {
|
||||
if (!$.isEmptyObject(inputsWithValue)) {
|
||||
if (inputsWithValue.hasOwnProperty("trxstate") && inputsWithValue["trxstate"] === "20") {
|
||||
console.log(inputsWithValue["posturl"]);
|
||||
getImportantNote();
|
||||
modifySeatmapButton();
|
||||
createDialog();
|
||||
switch (data.event) {
|
||||
case "child_init_needInputsWithValue": {
|
||||
const message: I.Message = {
|
||||
message: inputsWithValue,
|
||||
from: "parent",
|
||||
event: "parent_init_sendInputsWithValue",
|
||||
date: Date.now()
|
||||
};
|
||||
communication.sendMessage(message, "iframeSeatmap")
|
||||
break;
|
||||
}
|
||||
case "child_init_needVenueXML": {
|
||||
communication.sendXML(inputsWithValue["posturl"], "iframeSeatmap", "parent_init_sendVenueXML", "parent");
|
||||
break;
|
||||
}
|
||||
case "child_needSeatmapXML": {
|
||||
const seatmapUrl: string = generateSeatmapUrl(data.message);
|
||||
communication.sendXML(seatmapUrl, "iframeSeatmap", "parent_sendSeatmapXML", "parent");
|
||||
break;
|
||||
}
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function generateSeatmapUrl(seatmapId : string): string {
|
||||
return `${inputsWithValue["posturlRawDecoded"]}&inclseatmap=Y&seatmap=${seatmapId}`;
|
||||
}
|
||||
|
||||
|
||||
function getVenueLocation(): string {
|
||||
let span: string[] = [];
|
||||
jQuery(".venue span").each(function () {
|
||||
span.push(jQuery(this).text());
|
||||
});
|
||||
|
||||
return span.join(", ");
|
||||
}
|
||||
|
||||
function getInputs(inContent: string): void {
|
||||
const parsedHTML: Node[] = $.parseHTML(inContent);
|
||||
let inputs: { [key: string]: string } = {};
|
||||
|
||||
$(parsedHTML).find('input').each(function (this: any) {
|
||||
const name: string = this.name;
|
||||
const value: string = this.value;
|
||||
if (value !== '')
|
||||
inputs[name] = value;
|
||||
});
|
||||
|
||||
inputsWithValue = { ...inputsWithValue, ...inputs };
|
||||
}
|
||||
|
||||
|
||||
// todo: check with different venues
|
||||
function getImportantNote(): void {
|
||||
const importantNote: string | null = $(".important_note")[0].textContent;
|
||||
@@ -139,36 +160,6 @@ function createDialog(): void {
|
||||
});
|
||||
}
|
||||
|
||||
// $(window).on('resize', function(): void{
|
||||
// console.log("resizing");
|
||||
// var win = $(this); //this = window
|
||||
|
||||
// let dlg = $("#dialogSeatmap"); // Get the dialog container.
|
||||
// var width: number = <number>win.width();
|
||||
// var height: number = <number>win.height();
|
||||
|
||||
// // Provide some space between the window edges.
|
||||
// width = width - 50;
|
||||
// height = height - 100; // iframe height will need to be even less to account for space taken up by dialog title bar, buttons, etc.
|
||||
|
||||
// // Set the iframe height.
|
||||
// $(dlg.children("iframe").get(0)).css({"height": `${height}px`, "width": `${width}px`});
|
||||
|
||||
// });
|
||||
|
||||
window.addEventListener('message', function (e) {
|
||||
console.log("Parent: Received");
|
||||
|
||||
// Get the sent data
|
||||
const data = e.data;
|
||||
console.log(data);
|
||||
|
||||
// If you encode the message in JSON before sending them,
|
||||
// then decode here
|
||||
// const decoded = JSON.parse(data);
|
||||
});
|
||||
|
||||
|
||||
function modifySeatmapButton(): void {
|
||||
$(".flash_seat_map_box").remove();
|
||||
$('#flash_seat_map_box_id').css({
|
||||
@@ -192,4 +183,39 @@ function modifySeatmapButton(): void {
|
||||
<div id="dialogSeatmap" hidden="hidden"></div>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
// $(window).on('resize', function(): void{
|
||||
// console.log("resizing");
|
||||
// var win = $(this); //this = window
|
||||
|
||||
// let dlg = $("#dialogSeatmap"); // Get the dialog container.
|
||||
// var width: number = <number>win.width();
|
||||
// var height: number = <number>win.height();
|
||||
|
||||
// // Provide some space between the window edges.
|
||||
// width = width - 50;
|
||||
// height = height - 100; // iframe height will need to be even less to account for space taken up by dialog title bar, buttons, etc.
|
||||
|
||||
// // Set the iframe height.
|
||||
// $(dlg.children("iframe").get(0)).css({"height": `${height}px`, "width": `${width}px`});
|
||||
|
||||
// });
|
||||
|
||||
// window.addEventListener('message', (e: any): void => {
|
||||
// console.log(e);
|
||||
// if (typeof (e.data) === 'string') {
|
||||
// const data: I.message = JSON.parse(e.data);
|
||||
// if (data.callback)
|
||||
// data.callback(data);
|
||||
// }
|
||||
// });
|
||||
|
||||
function getAdditionalInputs(inContent: string): void {
|
||||
inputsWithValue["event"] = inContent.match(/event:"(.+?)"/)![1];
|
||||
inputsWithValue["holdcode"] = inContent.match(/holdcode:"(.+?)"/)![1];
|
||||
inputsWithValue["posturlRaw"] = inContent.match(/posturl:"(.+?)"/)![1];
|
||||
inputsWithValue["posturlRawDecoded"] = decodeURIComponent(inputsWithValue["posturlRaw"]);
|
||||
inputsWithValue["posturl"] = decodeURIComponent(`${inputsWithValue["posturlRaw"]}&event=${inputsWithValue["event"]}&holdcode=${inputsWithValue["holdcode"]}&nocache=0&inclpkg=Y&incloffer=Y&inclcartdetails=Y&inclCart=Y&inclvenue=Y`);
|
||||
inputsWithValue["venueLocation"] = getVenueLocation();
|
||||
}
|
||||
Reference in New Issue
Block a user