Target Invoice Summary

Summarize Target Invoice

이 스크립트를 설치하려면 Tampermonkey, Greasemonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Userscripts와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 유저 스크립트 관리자 확장 프로그램이 필요합니다.

(이미 유저 스크립트 관리자가 설치되어 있습니다. 설치를 진행합니다!)

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

(이미 유저 스타일 관리자가 설치되어 있습니다. 설치를 진행합니다!)

// ==UserScript==
// @name        Target Invoice Summary
// @namespace   nikhilweee
// @match       https://www.target.com/orders/*/invoices/*
// @grant       none
// @version     1.0
// @author      nikhilweee
// @description Summarize Target Invoice
// @icon        https://www.target.com/favicon.ico
// ==/UserScript==

function allElementsLoaded() {
  const detailsCards = document.querySelectorAll(
    '[data-test="invoice-details-card"]'
  );
  return detailsCards.length > 0;
}

function runScriptWhenReady() {
  if (allElementsLoaded()) {
    const detailsCards = document.querySelectorAll(
      '[data-test="invoice-details-card"]'
    );
    const table = document.createElement("table");
    let totalQuantity = 0;
    table.style = "width: 100%; text-align: left;";
    table.innerHTML = "<th>Price</th><th>Item</th>";

    detailsCards.forEach((card) => {
      const boldElements = Array.from(card.querySelectorAll("b"));
      const [itemName, quantity, , , , , , itemPrice] = boldElements.map(
        (el) => el?.textContent.trim() || ""
      );
      const [_, itemNameShort] = itemName.split(" - ");
      totalQuantity += parseInt(quantity);
      const row = table.insertRow();
      row.innerHTML = `<td>${itemPrice}</td><td>(${quantity}) ${itemNameShort}</td>`;
    });

    const invoiceTotal =
      document.querySelector("div.h-text-lg p")?.textContent.trim() || "";
    const invoiceRow = table.insertRow();
    invoiceRow.innerHTML = `<th>${invoiceTotal}</th><th>(${totalQuantity}) Total</th>`;

    const invoiceMetaElement = document.querySelector(
      '[data-test="invoice-meta"]'
    );
    invoiceMetaElement.insertAdjacentElement("afterend", table);
  } else {
    setTimeout(runScriptWhenReady, 100);
  }
}

window.addEventListener("load", runScriptWhenReady);