Generate Word Documents with JavaScript & docx-templates

				
					function displayAccountInfo() {
  /** UI account information section DIV element*/
  const accountInfoDiv = document.getElementById("accountinfodiv");

  if (!accountInfoDiv) {
    console.error("displayAccountInfo: could not find account information div");
    return;
  }
  if (!overdueAfterInput || overdueAfterInput.value === "") {
    console.error("displayAccountInfo: could not find overdue period input");
    return;
  }

  if (!overdueFineInput || overdueFineInput.value === "") {
    console.error("displayAccountInfo: could not find overdue fine input");
    return;
  }

  if (!accountSelectInput || !accountSelectInput.value) {
    console.error(
      "displayAccountInfo: could not find the account selector input"
    );
    return;
  }

  if (!discountPercentInput || !discountPercentInput.value) {
    console.error(
      "displayAccountInfo: could not find the discount percent input"
    );
    return;
  }

  if (!discountPeriodInput || !discountPeriodInput.value) {
    console.error(
      "displayAccountInfo: could not find the discount period input"
    );
    return;
  }

  //store the input values as variables
  const accountId = accountSelectInput.value;
  const checkoutPeriod = Number(overdueAfterInput.value);
  const overdueFine = Number(overdueFineInput.value);
  const discountPercent = Number(discountPercentInput.value);
  const discountPeriod = Number(discountPeriodInput.value);

  //clear the account info div content
  accountInfoDiv.innerText = "";

  //get the account info from the db and create the account info HTML
  if (
    !jsonDb ||
    !jsonDb.hasOwnProperty("accounts") ||
    !jsonDb.accounts.hasOwnProperty(accountId)
  ) {
    console.error(
      `displayAccountInfo: failed to find account ${accountId} information in json database`
    );
    return;
  }
  const accountInfo = jsonDb.accounts[accountId];
  const accountInfoHTML = `
  <h3><u>Account status</u></h3>
  <b>Account ID:</b> ${accountId}<br/>
  <b>Account owner:</b> ${
    accountInfo.title !== "none" ? accountInfo.title : ""
  }  ${accountInfo.firstName} ${accountInfo.lastName}<br/>
  `;

  //get the book info from the db and create the book info table
  let bookInfoHTML = "";
  let overdueBooks = [];
  let overdueChargeSum = 0;
  if (accountInfo.hasOwnProperty("books") && accountInfo.books.length > 0) {
    bookInfoHTML =
      '<table class="books-table"><th>Book ID</th><th>Checkout date</th><th>Days since checkout</th><th>Overdue Fine</th>';
    for (const bookObj of accountInfo.books) {
      if (
        bookObj.hasOwnProperty("id") &&
        bookObj.hasOwnProperty("checkoutDate")
      ) {
        const bookId = bookObj.id;
        const bookCheckout = new Date(bookObj.checkoutDate).toLocaleDateString(
          "en-US",
          {
            dateStyle: "long",
          }
        );
        let Difference_In_Time =
          new Date().getTime() - new Date(bookObj.checkoutDate).getTime();
        const daysSinceCheckout = Math.round(
          Difference_In_Time / (1000 * 3600 * 24)
        );
        let fineAmount = 0;
        const overdueDays = daysSinceCheckout - checkoutPeriod;
        if (overdueDays > 0) {
          fineAmount = overdueDays * overdueFine;
          overdueChargeSum += fineAmount;
          overdueBooks.push({
            id: bookId,
            checkoutDate: bookCheckout,
            overduePeriod: overdueDays,
            fineAmount: fineAmount.toFixed(2),
          });
        }
        bookInfoHTML += `<tr${
          daysSinceCheckout > checkoutPeriod ? ' style="color:red;" ' : ""
        }><td>${bookId}</td><td>${bookCheckout}</td><td>${daysSinceCheckout}</td><td>$${fineAmount.toFixed(
          2
        )}</tr>`;
      } else {
        console.error(
          `displayAccountInfo: error getting book information for account id: ${accountId} book info: ${bookObj}`
        );
      }
    }
    bookInfoHTML += "</table>";
  } else {
    console.error(
      `displayAccountInfo: could not find book information for account id: ${accountId}`
    );
  }

  //combine the account and book info HTML
  let infoDivHtml = accountInfoHTML + "<br/>" + bookInfoHTML;

  //add fine charges info and generate notice letter button to the info HTML if applicable
  if (overdueBooks.length > 0) {
    infoDivHtml += `<br /><span style="color:red;">The account has ${
      overdueBooks.length
    } overdue books and will be charged $${overdueChargeSum.toFixed(2)}.<br />`;
    if (discountPercent > 0) {
      infoDivHtml += `The fine will be reduced to $${(
        (overdueChargeSum * (100 - discountPercent)) /
        100
      ).toFixed(2)} if books are returned within ${discountPeriod} days.<br />`;
    }
    infoDivHtml +=
      '<div class="actions-div"><button id="genletterbtn" class="input-btn">Generate Notice Letter</button>';
  }

  //populate the content of the account info div with the complete HTML
  accountInfoDiv.innerHTML = infoDivHtml;

  //if fine charges apply, create an object with the required info
  //and add event listener to generate notice letter button,
  //passing the required info object to the callback function along with the template location
  if (overdueBooks.length > 0) {
    const letterDataObj = {
      accountId: accountId,
      totalCharges: overdueChargeSum.toFixed(2),
      overdueBooks: overdueBooks,
      finePerDay: overdueFine,
      checkoutPeriod: checkoutPeriod,
      discountPercent: discountPercent,
      discountPeriod: discountPeriod,
    };
    const genBtn = document.getElementById("genletterbtn");
    if (genBtn) {
      genBtn.addEventListener("click", (e) => {
        generateNoticeLetter(letterDataObj, TEMPLATE_URL);
      });
    }
  }
}