Purple_Envelop_Order_Site/app/views/Order/continue.asp

<section style="padding: 48px 0; max-width: 640px; margin: 0 auto; text-align: center;">
<% If isValid Then %>
  <span class="eyebrow">Order link verified</span>
  <h1>Your order link is valid.</h1>
  <p>Jurisdiction number: <strong><%= H(order("JurisdictionNumber")) %></strong></p>
<% Else %>
  <span class="eyebrow">Link problem</span>
  <h1>This link is invalid or has expired.</h1>
  <p>
    Please <a href="<%= H(Routes().AppURL & "request-order") %>">request a new order</a>
    to receive a fresh link.
  </p>
<% End If %>
</section>

<% If isValid Then %>
<link href="https://cdn.jsdelivr.net/npm/survey-core@2.5.36/survey-core.min.css" rel="stylesheet">

<div id="surveyContainer" style="max-width: 760px; margin: 0 auto 64px; padding: 0 16px;"></div>

<script src="https://cdn.jsdelivr.net/npm/survey-core@2.5.36/survey.core.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/survey-js-ui@2.5.36/survey-js-ui.min.js"></script>
<script>
(function () {
  "use strict";

  var submitUrl = "<%= H(Routes().AppURL & "order/submit?token=" & Server.URLEncode(token)) %>";
  var csrfToken = "<%= H(csrfToken) %>";

  // Election-materials order form. Field (name) values match the OrderDetails table
  // columns 1:1 - see db/migrations/20260728145000_create_order_details_table.asp.
  // Content and branching sourced from docs/lucid/*.pdf.
  var surveyJson = {
    showProgressBar: "top",
    showQuestionNumbers: "off",
    completeText: "Submit Order",
    pages: [
      {
        name: "contact",
        title: "1. Contact Information",
        elements: [
          { type: "text", name: "ContactName", title: "Contact Name", isRequired: true },
          { type: "text", name: "Municipality", title: "Municipality", isRequired: true },
          { type: "text", name: "Phone", title: "Phone Number", inputType: "tel", isRequired: true }
        ]
      },
      {
        name: "purpleEnvelope",
        title: "2. Purple Ballot Envelope Quote Request",
        elements: [
          {
            type: "boolean", name: "PurpleWantsQuote", labelTrue: "Yes", labelFalse: "No",
            title: "Would you like a quote for KCI to print your purple AV envelopes?"
          },
          {
            type: "radiogroup", name: "PurplePrintOption",
            title: "Would you like KCI to print addresses on your purple envelopes or return postage only?",
            visibleIf: "{PurpleWantsQuote} = true",
            choices: [
              { value: "AddressesAndPostage", text: "Addresses and return postage" },
              { value: "PostageOnly", text: "Return postage only" }
            ]
          },
          {
            type: "radiogroup", name: "PurpleEnvelopeStock",
            title: "Are you planning to use KCI's purple envelopes or from your own stock?",
            visibleIf: "{PurplePrintOption} = 'AddressesAndPostage'",
            choices: [
              { value: "KCIStock", text: "KCI's stock" },
              { value: "OwnStock", text: "My own stock" }
            ]
          },
          {
            type: "text", name: "PurpleEnvelopeProvider",
            title: "Who is your purple envelope provider?",
            visibleIf: "{PurpleEnvelopeStock} = 'OwnStock'"
          },
          {
            type: "boolean", name: "PurpleWantsBlueEnvelopes", labelTrue: "Yes", labelFalse: "No",
            title: "Are you planning to use KCI blue envelopes?",
            visibleIf: "{PurplePrintOption} = 'AddressesAndPostage'"
          },
          {
            type: "radiogroup", name: "PurplePrintStyle",
            title: "Would you like your envelopes printed with color coding or black only?",
            visibleIf: "{PurplePrintOption} = 'AddressesAndPostage'",
            choices: [
              { value: "ColorCoding", text: "Color Coding" },
              { value: "BlackOnly", text: "Black Only" }
            ]
          },
          {
            type: "radiogroup", name: "PurpleColorCodingBy",
            title: "Color coding by precinct or by election?",
            visibleIf: "{PurplePrintStyle} = 'ColorCoding'",
            choices: [
              { value: "Precinct", text: "Precinct" },
              { value: "Election", text: "Election" }
            ]
          },
          {
            type: "text", name: "PurplePrecinctCount", title: "How many precincts?",
            inputType: "number", min: 0,
            visibleIf: "{PurpleColorCodingBy} = 'Precinct'"
          },
          {
            type: "boolean", name: "PurpleTrackMIBallot", labelTrue: "Yes", labelFalse: "No",
            title: "Would you like to track ballots using TrackMI Ballot?",
            visibleIf: "{PurplePrintOption} = 'AddressesAndPostage'"
          },
          {
            type: "text", name: "PurpleExtraEnvelopeQty",
            title: "How many extra purple envelopes would you like? (If none, please put zero)",
            inputType: "number", min: 0,
            visibleIf: "{PurplePrintOption} = 'AddressesAndPostage'"
          },
          {
            type: "text", name: "PurpleDeliveryDate", inputType: "date",
            title: "Please provide a date you would like these purple envelopes delivered.",
            visibleIf: "{PurpleWantsQuote} = true"
          }
        ]
      },
      {
        name: "blueEnvelope",
        title: "3. Blue AV Envelope Quote Request",
        elements: [
          {
            type: "boolean", name: "BlueWantsQuote", labelTrue: "Yes", labelFalse: "No",
            title: "Would you like to purchase blue AV envelopes from KCI?"
          },
          {
            type: "radiogroup", name: "BlueEnvelopeProvider",
            title: "Are you planning to use KCI's blue envelopes or another provider's?",
            visibleIf: "{BlueWantsQuote} = true",
            choices: [
              { value: "KCI", text: "KCI" },
              { value: "OtherProvider", text: "Other provider" }
            ]
          },
          {
            type: "boolean", name: "BluePrintPermit", labelTrue: "Yes", labelFalse: "No",
            title: "Would you like KCI to print a permit on your blue envelope?",
            visibleIf: "{BlueEnvelopeProvider} = 'KCI'"
          },
          {
            type: "text", name: "BluePermitNumber", title: "Permit Number",
            visibleIf: "{BluePrintPermit} = true"
          },
          {
            type: "text", name: "BluePermitCity", title: "City of permit holder",
            visibleIf: "{BluePrintPermit} = true"
          },
          {
            type: "radiogroup", name: "BluePermitClass", title: "NP or STD",
            visibleIf: "{BluePrintPermit} = true",
            choices: [
              { value: "NP", text: "NP" },
              { value: "STD", text: "STD" }
            ]
          },
          {
            type: "boolean", name: "BluePrintReturnAddress", labelTrue: "Yes", labelFalse: "No",
            title: "Would you like KCI to print return address information on the back of the blue envelope?",
            visibleIf: "{BlueEnvelopeProvider} = 'KCI'"
          },
          {
            type: "text", name: "BlueDeliveryDate", inputType: "date",
            title: "Please provide a date you would like the blue envelopes delivered.",
            visibleIf: "{BlueWantsQuote} = true"
          }
        ]
      },
      {
        name: "mailingService",
        title: "4. Ballot Mailing Service Quote Request",
        elements: [
          {
            type: "boolean", name: "MailingWantsService", labelTrue: "Yes", labelFalse: "No",
            title: "Would you like to save postage and have KCI mail your ballots?"
          },
          {
            type: "radiogroup", name: "MailingPostageOption",
            title: "Would you like KCI to apply postage?",
            visibleIf: "{MailingWantsService} = true",
            choices: [
              { value: "FirstClass", text: "Yes, at First Class Rate" },
              { value: "NonprofitRate", text: "Yes, at Nonprofit Rate" },
              { value: "No", text: "No" }
            ]
          },
          {
            type: "radiogroup", name: "MailingHasNonprofitStatus",
            title: "Do you have Nonprofit Status with the USPS?",
            visibleIf: "{MailingPostageOption} = 'NonprofitRate'",
            choices: [
              { value: "Yes", text: "Yes" },
              { value: "No", text: "No" },
              { value: "NotSure", text: "I'm not sure (that's okay, we can help you!)" }
            ]
          },
          {
            type: "boolean", name: "MailingWantsSorting", labelTrue: "Yes", labelFalse: "No",
            title: "Would you like KCI to sort your ballots?"
          },
          {
            type: "text", name: "MailingPickupDate", inputType: "date",
            title: "What is your preferred (first) pickup date?"
          }
        ]
      },
      {
        name: "additionalItems",
        title: "5. Additional Election Items Request",
        elements: [
          {
            type: "text", name: "SecrecySleevesQty", title: "Secrecy Sleeves (quantity)",
            inputType: "number", min: 0, defaultValue: 0
          },
          {
            type: "text", name: "IVotedStickerRolls", title: "\"I Voted\" Stickers (rolls of 250)",
            inputType: "number", min: 0, defaultValue: 0
          },
          {
            type: "text", name: "FutureVoterStickerRolls", title: "\"Future Voter\" Stickers (rolls of 500)",
            inputType: "number", min: 0, defaultValue: 0
          }
        ]
      }
    ]
  };

  var survey = new Survey.Model(surveyJson);

  survey.onComplete.add(function (sender) {
    fetch(submitUrl, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-CSRF-Token": csrfToken
      },
      body: JSON.stringify(sender.data)
    })
      .then(function (res) {
        return res.json().catch(function () { return {}; }).then(function (body) {
          return { ok: res.ok, body: body };
        });
      })
      .then(function (result) {
        var container = document.getElementById("surveyContainer");
        if (result.ok && result.body && result.body.success) {
          container.innerHTML =
            '<p style="text-align:center; padding: 32px 0;">' +
            "Thanks! Your order details have been submitted." +
            "</p>";
        } else {
          alert((result.body && result.body.error) || "Something went wrong submitting your order. Please try again.");
        }
      })
      .catch(function () {
        alert("Something went wrong submitting your order. Please check your connection and try again.");
      });
  });

  survey.render(document.getElementById("surveyContainer"));
})();
</script>
<% End If %>