Raw Source
kalpdev.1 / sideline_reduction_App_V3

// ==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">&times;</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!");
}