確認画面ページの「発注する」ボタンクリック後の機能を実装しよう

function doPost(e) {
  const items = getAllRecords('商品');

  // index.htmlで「確認画面へ」ボタンが押されたらconfirm.htmlへ
  if(e.parameter.confirm) {
    const template = HtmlService.createTemplateFromFile('confirm');
    template.deployURL = ScriptApp.getService().getUrl();
    template.confirmHTML = getConfirmHTML(e, items);
    const htmlOutput = template.evaluate();
    return htmlOutput;
  }

  // confirm.htmlで「修正する」ボタンが押されたらindex.htmlへ
  if(e.parameter.modify) {
    const template = HtmlService.createTemplateFromFile('index');
    template.deployURL = ScriptApp.getService().getUrl();
    template.formHTML = getFormHTML(e, items);
    const htmlOutput = template.evaluate();
    return htmlOutput;
  }

  // confirm.htmlで「発注する」ボタンが押されたらcomplete.htmlへ
  if(e.parameter.submit) {
    createOrder(e, items);
    updateZaiko(e, items);
    sendMail(e, items);
    const template = HtmlService.createTemplateFromFile('complete');
    template.deployURL = ScriptApp.getService().getUrl();
    const htmlOutput = template.evaluate();
    return htmlOutput;
  }
}

function createOrder(e, items) {
  // 注文テーブルに単一レコードを追加する
  const orderId = generateId();
  const order = [orderId, new Date(), e.parameter.email, e.parameter.username];
  addRecords('注文', [order]);

  // 注文_商品テーブルに複数レコードを追加する
  const records = [];
  for(const item of items) {
    const itemId = item['商品ID'];
    const count = Number(e.parameter[itemId]);
    if(count > 0) {
      const record = [generateId(), orderId, itemId, count];
      records.push(record);
    }
  }
  addRecords('注文_商品', records);
}

function generateId(length=8) {
  const [alphabets, numbers]  = ['abcdefghijklmnopqrstuvwxyz', '0123456789'];
  const string  = alphabets + numbers;
  let id = alphabets.charAt(Math.floor(Math.random() * alphabets.length));
  for(let i = 0; i < length-1; i++) {
    id += string.charAt(Math.floor(Math.random() * string.length));
  }
  return id;
}

function addRecords(sheetName, records) {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheetByName(sheetName);
  const lastRow = sheet.getLastRow();
  sheet.getRange(lastRow+1, 1, records.length, records[0].length).setValues(records);
}

function updateZaiko(e, items) {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheetByName('商品');

  for(const item of items) {
    const itemId = item['商品ID'];
    const zaiko = item['在庫数'];
    const count = Number(e.parameter[itemId]);
    if(count && count > 0) {
      const targetRow = sheet.getRange('A:A').createTextFinder(itemId).matchEntireCell(true).findNext().getRow();
      const targetCol = sheet.getRange('1:1').createTextFinder('在庫数').matchEntireCell(true).findNext().getColumn();
      sheet.getRange(targetRow, targetCol).setValue(zaiko - count);
    }
  }  
}

function sendMail(e, items) {
  const subject = `ご注文ありがとうございます。`;
  let html = `  
    <table class="table">
      <thead>
        <tr>
          <th scope="col" class="text-left">商品</th>
          <th scope="col" class="text-right">単価</th>
          <th scope="col" class="text-right">個数</th>
          <th scope="col" class="text-right">金額</th>
        </tr>
      </thead>
      <tbody>
  `;

  let total = 0;
  for(const item of items) {
    const itemId = item['商品ID'];
    const itemName = item['商品名'];
    const unitPrice = item['単価'];
    const count = Number(e.parameter[itemId]);

    if(count > 0) {
      const price = unitPrice * count;
      total += price;

      html += `<tr>`;
      html += `<td class="text-left">${itemName}</td>`;
      html += `<td class="text-right">@¥${unitPrice.toLocaleString()}</td>`;
      html += `<td class="text-right">${count}</td>`;
      html += `<td class="text-right">¥${price.toLocaleString()}</td>`;
      html += `</tr>`;
    }
  }

  html += `<tr>`;
  html += `<td colspan="2" class="sum text-right">合計:</td>`;
  html += `<td colspan="2" class="sum text-right">¥${total.toLocaleString()}</td>`;
  html += `</tr>`;
  html += `</tbody>`;
  html += `</table>`;

  const template = HtmlService.createTemplateFromFile('mail');
  template.username = e.parameter.username;
  template.orderTable = html;
  const htmlBody = template.evaluate().getContent();

  const options = {
    'name': '発注システム',
    'bcc': Session.getEffectiveUser().getEmail(),
    'htmlBody': htmlBody,
  };

  GmailApp.sendEmail(e.parameter.email, subject, 'plain body', options);
}

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      table{
        border-collapse: collapse;
      }
      th{
        min-width: 60px;
        padding: 8px;
        border-bottom: 2px black solid;
      }
      td{
        padding: 8px;
        border-bottom: 1px #dfdfdf solid;
      }
      .sum{
        border-top: 2px black double;
        border-bottom: 2px black solid;
        font-size: 20px;
      }
      .text-left{
        text-align: left;
      }
      .text-right{
        text-align: right;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <p><?= username ?>様</p>
      <p>このたびはご注文ありがとうございます。</p>
      <p>以下の内容でご注文承りました。</p>
      <? output._ = orderTable ?>
      <p>どうぞよろしくお願いいたします。</p>
    </div>
  </body>
</html>