NOTICE: By continued use of this site you understand and agree to the binding Terms of Service and Privacy Policy.
// ==UserScript==
// @name sideline_reduction_App_V3
// @version 4.3
// @author @shjaisw
// @description Gives the reason box for sidelining asin and popup for Qbuz / EAR
// @updateURL https://openuserjs.org/meta/kalpdev.1/sideline_reduction_App_V3.meta.js
// @downloadURL https://openuserjs.org/install/kalpdev.1/sideline_reduction_App_V3.user.js
// @license MIT
// @match https://argus.aka.amazon.com
//@require https://cdn.jsdelivr.net/npm/sweetalert2@10
// @grant GM_addStyle
// ==/UserScript==
GM_addStyle(`
.new-sideline-button {
background-color: #00796b;
border: none;
color: white;
padding: 2px 2px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
position: absolute;
right: 15px;
}
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1000000000000000; /* Sit on top */
padding-top: 15%; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
z-index: 1000000000000000;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 35%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
display:none;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
display:none;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #00796b;
color: white;
}
.title {
text-align: center;
font-size: 2.5rem
}
.modal-body {
padding: 2px 16px;
text-align: center;
}
.modal-footer {
padding: 2px 16px;
background-color: #ffffff;
text-align: center;
}
.radio {
display: inline-flex;
overflow: hidden;
border-radius: 5px;
box-shadow: 0 0 5px rgb(0,0,0.25);
}
.radio__input {
display: none;
}
.radio__label {
padding: 8px 14px;
font-size: 14px;
font-family: sans-serif;
color: #ffffff;
background: #009578;
cursor: pointer;
transition: background 0.1s;
}
.radio__label:not(:last-of-type) {
border-right: 1px solid #006B56;
}
.radio__input:checked + .radio__label {
background: #03fcc2;
color:red;
font-weight: bold;
}
.hideDefault {
display: none;
}
select{font-size:medium;
background: rgb(128 203 196 / 78%);;
}
.myButtons {
color: #009578;
border: 2px solid #009578;
margin: 10px;
background: #FFFFFF;
font-size: 14px;
padding: 10px 20px;
border-radius: 10px;
transition-duration: 0.5s;
box-shadow: 0 0 5px rgb(0,0,0.10);
font-weight: bold;
}
.myButtons:hover {
background-color: #009578;
color: white;
font-weight: bold;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
`);
(function () {
('use strict')
const argusSessionStorage = window.sessionStorage // start Chrome session storage
var startTime = 0
var endTime = 0
//****************************************** */
// check if page is loaded and clear the sessionstyorage
window.onbeforeunload = function () {
sessionStorage.setItem("origin", window.location.href);
//sidelinePopup()
}
//Then in the onload event:
window.onload = function () {
if (window.location.href == sessionStorage.getItem("origin")) {
sessionStorage.clear();
}
}
//****************************************** */
function checkIfAsinInQbuzz() {
const asin = document.querySelector('#workItemContainer > span') // get the ASIN location
if (!asin) {
// if no ASIN location is found
} else if (argusSessionStorage.getItem('PreviousASIN') === asin.innerText) {
// IF ASIN location found, check Chrome session storage for the ASIN and compare with current ASIN. IF the same, exit and go to the end of the if statment --> then repeat the function again after 1 second
} else {
// if the ASIN in storage is not the same as the current ASIN (The ASIN has changed --> Excute the whole code once)
// sidelinePopup()
console.log('Checking Qbuzz')
argusSessionStorage.clear() // clear the current storage
const ASIN = asin.innerText.toString() // get the ASIN inner text in variable
argusSessionStorage.setItem('PreviousASIN', ASIN) // write the new ASIN to the storage
const data = {
ASIN
};
sidelinePopup() // put the asin in json object--- 2times data
const options = {
headers: {
// create the post request header with the data we want to post
'Content-Type': 'application/json'
},
method: 'POST',
body: JSON.stringify(data)
}
//////////////////////////////////////////////////////////////////
var toastMixin = Swal.mixin({
toast: true,
icon: 'success',
title: 'General Title',
animation: false,
position: 'top-left',
showConfirmButton: false,
timer: 12000,
timerProgressBar: true,
didOpen: (toast) => {
toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', Swal.resumeTimer)
}
});
/////////////////////////////////////////////////////////////////////////////////////
//fetch('https://tareq.corp.amazon.com:5050', options) // send the request to the server with json
fetch('https://tareq.corp.amazon.com/qbuzz-db', options)
.then(response => response.json()) // wait for the response promise and then parse the retruned response to JSON
.then(data => {
const sidelineButton = document.querySelector('#dtSearch > div.sideline-asin-container > sideline-work-item > button')
if (data.ASIN == ASIN) {
////////////////////////
alert(
`ASIN ${ASIN} was already added to Qbuzz / EAR in less than two days ago!
User ID: ${data.user_id}
Sideline Date: ${data.Sideline_Date} UTC
Sideline Time: ${data.Sideline_Time} UTC
Note- Sideline this ASIN and select "Already in Qbuzz / EAR" option`
);
/////////////////////////
}
})
.catch(function (error) {
console.log("Please connect VPN/Cisco and re-open Argus,Connection to database failed. You will not receive Popups for already sidelined ASIN");
console.log(error);
return
});
}
window.setTimeout(checkIfAsinInQbuzz, 1000) // run the above funtion every 1 second (and start the main loop)
}
checkIfAsinInQbuzz() // run the function // this is the first to run //! EBANLE LATER
//*********************************************************************************************************************************************************/
//*********************************************************************************************************************************************************/
//*********************************************************************************************************************************************************/
function sidelinePopup() {
const sidelineButton = document.querySelector('#dtSearch > div.sideline-asin-container > sideline-work-item > button') // get the sideline button
if (!sidelineButton) {// if no button found
} else {
const popupWindow = document.createElement('div');
sidelineButton.onclick = function () {
document.querySelector("#slform").reset();
modal.style.display = "block";
}
const popupDiv = `
<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2 class="title">Please select the reason for sidelining this ASIN</h2>
</div>
<div class="modal-body">
<form id="slform">
<div class="radio">
<input class="radio__input" type="radio" value="Qbuzz" name="sideline_reason" id="myRadio1" >
<label class="radio__label" for="myRadio1">Qbuzz</label>
</input>
<input class="radio__input" type="radio" value="Already in Qbuzz/EAR" name="sideline_reason" id="myRadio2">
<label class="radio__label" for="myRadio2">Already in Qbuzz/EAR</label>
</input>
<input class="radio__input" type="radio" value="qbuzz" name="sideline_reason" id="myRadio3">
<label class="radio__label" for="myRadio3">EAR</label>
</input>
<input class="radio__input" type="radio" value="Technical Issue" name="sideline_reason" id="myRadio4">
<label class="radio__label" for="myRadio4">Technical Issue</label>
</input>
<input class="radio__input" type="radio" value="Other" name="sideline_reason" id="myRadio5" >
<label class="radio__label" for="myRadio5">Other</label>
</input>
</div>
<div id="freetext" class="">
<textarea type="text" name="sideline_reason_other" required id="sideline_reason_other" maxlength="200" cols="50" rows="5" placeholder="This is the optional free text box (Please Select Main Reason Above) (Use space if no comment)"></textarea>
</div>
<div id="earreasontabs" class="" style="display:none">
<select name="earreasontab" ><option value="Foreign Language ASIN" selected>Foreign Language ASIN</option> <option value="SME">SME</option> <option value="Seller Communicaion">Seller Communication</option> </select>
</div>
<div class="modal-footer">
<button class = "myButtons" id="cancelButton" type="button">Cancel</button>
<button class = "myButtons" id="submitButton" type="ubmit">Submit</button>
</div>
</form>
</div>
</div>
</div>
`
popupWindow.innerHTML = popupDiv
document.body.appendChild(popupWindow);
// Get the modal
const modal = document.getElementById("myModal");
// Get the <span> element that closes the modal
const span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
// sidelineButton.onclick = function () {
// modal.style.display = "block";
// }
//#######################################################################################################
//########################################Radio butoons control##########################################
function hideFreeText() {
document.getElementById('freetext').style.display = 'none';
document.getElementById("sideline_reason_other").required = false //false
document.getElementById('earreasontabs').style.display = 'none';
}
function showFreeText() {
document.getElementById('freetext').style.display = 'block';
document.getElementById("sideline_reason_other").required = true
document.getElementById('earreasontabs').style.display = 'none';
}
function earReason() {
document.getElementById('freetext').style.display = 'none';
document.getElementById('earreasontabs').style.display = 'block';
document.getElementById("sideline_reason_other").required = false
}
const radio1 = document.getElementById('myRadio1');
radio1.addEventListener("click", showFreeText, false);
const radio2 = document.getElementById('myRadio2');
radio2.addEventListener("click", showFreeText, false);
const radio3 = document.getElementById('myRadio3');
radio3.addEventListener("click", earReason, true);
const radio4 = document.getElementById('myRadio4');
radio4.addEventListener("click", showFreeText, false);
const radio5 = document.getElementById('myRadio5');
radio5.addEventListener("click", showFreeText, false);
//#######################################################################################################
//##########################################Submit & cancel buttons control##############################
function handleSubmit(event) {
console.log('Writing to Maria DB')
event.preventDefault();
const dataToSubmit = new Object();
const formData = new FormData(this);
dataToSubmit.currentASIN = document.querySelector('#workItemContainer > span').innerText
dataToSubmit.userID = document.querySelector("#argus-spoof > div > img").getAttribute("alt")
dataToSubmit.sidelineReason = formData.get('sideline_reason');
if (dataToSubmit.sidelineReason == "qbuzz") {
dataToSubmit.sidelineReasonOther = formData.get('earreasontab')
}
else dataToSubmit.sidelineReasonOther = formData.get('sideline_reason_other');
endTime = performance.now()
dataToSubmit.timeSpentBeforeSidelining = ((endTime - startTime) / 1000).toFixed(1);
if (dataToSubmit.sidelineReason != null) {
sendSidlineDataToServer(dataToSubmit)
}
else return
document.getElementById("slform").required = true;
document.querySelector("#slform").reset();
modal.style.display = "none";
popupWindow.remove();
return
}
// function to write the data to mariadb
function sendSidlineDataToServer(data) {
const options = {
headers: {
// create the post request header with the data we want to post
'Content-Type': 'application/json'
},
method: 'POST',
body: JSON.stringify(data)
}
//fetch('https://tareq.corp.amazon.com:5050', options) // send the request to the server with json
fetch('https://tareq.corp.amazon.com/maria-db', options)
.then(response => response.end()) // wait for the response promise and then parse the retruned response to JSON
.catch(function (error) {
console.log("error sending sideline data to database");
console.log(error);
return
});
}
const form = document.querySelector("#slform");
document.getElementById("slform").required = true;// select the form
form.addEventListener('submit', handleSubmit);
cancelBtn = document.getElementById('cancelButton');
cancelBtn.onclick = function () {
}
// #######################################################################################################
//##########################################closing model##############################
// When the user clicks on <span> (x), close the modal
span.onclick = function () {
document.querySelector("#slform").reset();
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
if (event.target == modal) {
$('#finishProductButton').click(function(){
popupWindow.remove();
})
}
}
return
}
window.setTimeout(sidelinePopup, 50)
}
})()
if (isArgusDG){
console.log("This is an Argus DG Page!");
waitForKeyElements (".submit-product-card-classification", addCustomSearchResult);
}else{
console.log("This is not an Argus DG Page!");
}