@reliability-design/web 1.0.2 → 1.0.6

package/dist/components/rel-quote-page/rel-quote-page.ts

@@ -0,0 +1,816 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+export interface QuoteFormData {
+  pickupLocation: string;
+  dropoffLocation: string;
+  serviceLevel: "standard" | "guaranteed";
+  originType: "commercial" | "residential";
+  destinationType: "commercial" | "residential";
+  loadingRequirements: string;
+  deliveryRequirements: string;
+  loadingLimitedAccessType: string;
+  deliveryLimitedAccessType: string;
+  pickupDate: string;
+  isHazmat: boolean;
+  commodity: string;
+  commodityDescription: string;
+  handlingUnits: number;
+  handlingType: string;
+  length: number;
+  width: number;
+  height: number;
+  totalWeight: number;
+  class: string;
+  insuredValue: number;
+  nmfcNumber: string;
+}
+
+@customElement("rel-quote-page")
+export class RelQuotePage extends LitElement {
+  @state() private formData: QuoteFormData = {
+    pickupLocation: "",
+    dropoffLocation: "",
+    serviceLevel: "standard",
+    originType: "commercial",
+    destinationType: "commercial",
+    loadingRequirements: "",
+    deliveryRequirements: "",
+    loadingLimitedAccessType: "",
+    deliveryLimitedAccessType: "",
+    pickupDate: "",
+    isHazmat: false,
+    commodity: "",
+    commodityDescription: "",
+    handlingUnits: 0,
+    handlingType: "",
+    length: 0,
+    width: 0,
+    height: 0,
+    totalWeight: 0,
+    class: "",
+    insuredValue: 0,
+    nmfcNumber: "",
+  };
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: var(--rel-fontFamilies-primary);
+      background: var(--rel-colors-white);
+      padding: var(--rel-spacing-space-xl);
+      border-radius: var(--rel-borders-radius-border-radius-300);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    .quote-page {
+      max-width: 900px;
+      margin: 0 auto;
+    }
+
+    .section {
+      margin-bottom: var(--rel-spacing-space-2xl);
+    }
+
+    .section-title {
+      font-size: var(--rel-fontSizes-xl);
+      font-weight: var(--rel-fontWeights-bold);
+      margin: 0 0 var(--rel-spacing-space-lg) 0;
+      color: var(--rel-colors-black);
+    }
+
+    .section-row {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: var(--rel-spacing-space-lg);
+      margin-bottom: var(--rel-spacing-space-lg);
+    }
+
+    .section-row.single {
+      grid-template-columns: 1fr;
+    }
+
+    .field-group {
+      display: flex;
+      flex-direction: column;
+      gap: var(--rel-spacing-space-2xs);
+    }
+
+    .field-label {
+      font-size: var(--rel-fontSizes-sm);
+      font-weight: var(--rel-fontWeights-medium);
+      color: var(--rel-colors-gray-heading);
+      display: flex;
+      align-items: center;
+      gap: var(--rel-spacing-space-3xs);
+    }
+
+    .required {
+      color: var(--rel-colors-red-primary);
+    }
+
+    .info-icon {
+      width: 16px;
+      height: 16px;
+      border: 1px solid var(--rel-colors-gray-border);
+      border-radius: 50%;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 11px;
+      cursor: help;
+      color: var(--rel-colors-gray-primary);
+    }
+
+    .subsection-title {
+      font-size: var(--rel-fontSizes-md);
+      font-weight: var(--rel-fontWeights-semibold);
+      margin: var(--rel-spacing-space-md) 0 var(--rel-spacing-space-sm) 0;
+      color: var(--rel-colors-gray-heading);
+      display: flex;
+      align-items: center;
+      gap: var(--rel-spacing-space-xs);
+    }
+
+    .subsection-title::before {
+      content: "";
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: var(--rel-colors-green-primary);
+    }
+
+    .service-level-tabs {
+      display: flex;
+      gap: 0;
+      border: 1px solid var(--rel-colors-gray-border);
+      border-radius: var(--rel-borders-radius-border-radius-300);
+      overflow: hidden;
+      width: fit-content;
+      margin-bottom: var(--rel-spacing-space-md);
+    }
+
+    .tab-button {
+      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-lg);
+      background: var(--rel-colors-white);
+      border: none;
+      cursor: pointer;
+      font-family: var(--rel-fontFamilies-primary);
+      font-size: var(--rel-fontSizes-sm);
+      font-weight: var(--rel-fontWeights-medium);
+      color: var(--rel-colors-gray-primary);
+      transition: all 0.2s;
+      border-right: 1px solid var(--rel-colors-gray-border);
+    }
+
+    .tab-button:last-child {
+      border-right: none;
+    }
+
+    .tab-button.active {
+      background: var(--rel-colors-black);
+      color: var(--rel-colors-white);
+    }
+
+    .radio-group {
+      display: flex;
+      gap: var(--rel-spacing-space-lg);
+    }
+
+    .radio-option {
+      display: flex;
+      align-items: center;
+      gap: var(--rel-spacing-space-xs);
+      cursor: pointer;
+    }
+
+    .radio-input {
+      width: 20px;
+      height: 20px;
+      border: 2px solid var(--rel-colors-gray-border);
+      border-radius: 50%;
+      position: relative;
+      flex-shrink: 0;
+    }
+
+    .radio-input.checked {
+      border-color: var(--rel-colors-black);
+    }
+
+    .radio-input.checked::after {
+      content: "";
+      position: absolute;
+      inset: 4px;
+      background: var(--rel-colors-black);
+      border-radius: 50%;
+    }
+
+    .radio-label {
+      font-size: var(--rel-fontSizes-sm);
+      font-weight: var(--rel-fontWeights-medium);
+      color: var(--rel-colors-gray-heading);
+    }
+
+    .input-field {
+      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-sm);
+      border: 1px solid var(--rel-colors-gray-border);
+      border-radius: var(--rel-borders-radius-border-radius-300);
+      font-family: var(--rel-fontFamilies-primary);
+      font-size: var(--rel-fontSizes-sm);
+      outline: none;
+      transition: border-color 0.2s;
+    }
+
+    .input-field:focus-visible {
+      border-color: var(--rel-colors-black);
+    }
+
+    .input-with-icon {
+      position: relative;
+    }
+
+    .input-icon {
+      position: absolute;
+      right: var(--rel-spacing-space-sm);
+      top: 50%;
+      transform: translateY(-50%);
+      color: var(--rel-colors-gray-primary);
+      pointer-events: none;
+    }
+
+    .input-with-icon .input-field {
+      padding-right: var(--rel-spacing-space-2xl);
+    }
+
+    select {
+      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-sm);
+      border: 1px solid var(--rel-colors-gray-border);
+      border-radius: var(--rel-borders-radius-border-radius-300);
+      font-family: var(--rel-fontFamilies-primary);
+      font-size: var(--rel-fontSizes-sm);
+      outline: none;
+      background: var(--rel-colors-white);
+      cursor: pointer;
+      transition: border-color 0.2s;
+      appearance: none;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-position: right 12px center;
+      padding-right: var(--rel-spacing-space-2xl);
+    }
+
+    select:focus-visible {
+      border-color: var(--rel-colors-black);
+    }
+
+    .helper-text {
+      font-size: var(--rel-fontSizes-xs);
+      color: var(--rel-colors-gray-placeholder);
+      margin-top: var(--rel-spacing-space-2xs);
+    }
+
+    .dimension-inputs {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: var(--rel-spacing-space-sm);
+    }
+
+    .dimension-field {
+      display: flex;
+      flex-direction: column;
+      gap: var(--rel-spacing-space-3xs);
+    }
+
+    .dimension-label {
+      font-size: var(--rel-fontSizes-xs);
+      font-weight: var(--rel-fontWeights-medium);
+      color: var(--rel-colors-gray-heading);
+    }
+
+    .dimension-input-wrapper {
+      display: flex;
+      align-items: center;
+      gap: var(--rel-spacing-space-xs);
+    }
+
+    .dimension-input {
+      flex: 1;
+      padding: var(--rel-spacing-space-xs);
+      border: 1px solid var(--rel-colors-gray-border);
+      border-radius: var(--rel-borders-radius-border-radius-300);
+      font-family: var(--rel-fontFamilies-primary);
+      font-size: var(--rel-fontSizes-sm);
+      outline: none;
+    }
+
+    .dimension-unit {
+      font-size: var(--rel-fontSizes-xs);
+      color: var(--rel-colors-gray-primary);
+    }
+
+    .max-note {
+      font-size: var(--rel-fontSizes-xs);
+      color: var(--rel-colors-gray-placeholder);
+      margin-top: 2px;
+    }
+
+    @media (max-width: 768px) {
+      .section-row {
+        grid-template-columns: 1fr;
+      }
+
+      .dimension-inputs {
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+  `;
+
+  private updateField(field: keyof QuoteFormData, value: any) {
+    this.formData = { ...this.formData, [field]: value };
+    this.dispatchEvent(
+      new CustomEvent("form-change", {
+        detail: this.formData,
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  render() {
+    return html`
+      <div class="quote-page">
+        <!-- Shipping Details Section -->
+        <div class="section">
+          <h2 class="section-title">Shipping Details</h2>
+
+          <div class="subsection-title">Origin</div>
+          <div class="section-row">
+            <div class="field-group">
+              <label class="field-label">
+                Pickup Location <span class="required">*</span>
+              </label>
+              <div class="input-with-icon">
+                <input
+                  type="text"
+                  class="input-field"
+                  placeholder="Enter pickup location"
+                  .value="${this.formData.pickupLocation}"
+                  @input="${(e: Event) =>
+                    this.updateField(
+                      "pickupLocation",
+                      (e.target as HTMLInputElement).value
+                    )}"
+                />
+                <span class="input-icon">🔍</span>
+              </div>
+            </div>
+
+            <div class="field-group">
+              <label class="field-label">
+                Drop off Location <span class="required">*</span>
+              </label>
+              <div class="input-with-icon">
+                <input
+                  type="text"
+                  class="input-field"
+                  placeholder="Enter drop off location"
+                  .value="${this.formData.dropoffLocation}"
+                  @input="${(e: Event) =>
+                    this.updateField(
+                      "dropoffLocation",
+                      (e.target as HTMLInputElement).value
+                    )}"
+                />
+                <span class="input-icon">🔍</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="field-group" style="margin-bottom: var(--rel-spacing-space-md);">
+            <label class="field-label">Service Level</label>
+            <div class="service-level-tabs">
+              <button
+                class="tab-button ${this.formData.serviceLevel === "standard"
+                  ? "active"
+                  : ""}"
+                @click="${() => this.updateField("serviceLevel", "standard")}"
+              >
+                Standard
+              </button>
+              <button
+                class="tab-button ${this.formData.serviceLevel === "guaranteed"
+                  ? "active"
+                  : ""}"
+                @click="${() => this.updateField("serviceLevel", "guaranteed")}"
+              >
+                Guaranteed
+              </button>
+            </div>
+          </div>
+
+          <div class="section-row">
+            <div class="field-group">
+              <label class="field-label">Origin Type</label>
+              <div class="radio-group">
+                <div
+                  class="radio-option"
+                  @click="${() => this.updateField("originType", "commercial")}"
+                >
+                  <div
+                    class="radio-input ${this.formData.originType === "commercial"
+                      ? "checked"
+                      : ""}"
+                  ></div>
+                  <span class="radio-label">Commercial</span>
+                </div>
+                <div
+                  class="radio-option"
+                  @click="${() => this.updateField("originType", "residential")}"
+                >
+                  <div
+                    class="radio-input ${this.formData.originType === "residential"
+                      ? "checked"
+                      : ""}"
+                  ></div>
+                  <span class="radio-label">Residential</span>
+                </div>
+              </div>
+            </div>
+
+            <div class="field-group">
+              <label class="field-label">Destination Type</label>
+              <div class="radio-group">
+                <div
+                  class="radio-option"
+                  @click="${() =>
+                    this.updateField("destinationType", "commercial")}"
+                >
+                  <div
+                    class="radio-input ${this.formData.destinationType ===
+                    "commercial"
+                      ? "checked"
+                      : ""}"
+                  ></div>
+                  <span class="radio-label">Commercial</span>
+                </div>
+                <div
+                  class="radio-option"
+                  @click="${() =>
+                    this.updateField("destinationType", "residential")}"
+                >
+                  <div
+                    class="radio-input ${this.formData.destinationType ===
+                    "residential"
+                      ? "checked"
+                      : ""}"
+                  ></div>
+                  <span class="radio-label">Residential</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="section-row">
+            <div class="field-group">
+              <label class="field-label">Loading Requirements</label>
+              <select
+                .value="${this.formData.loadingRequirements}"
+                @change="${(e: Event) =>
+                  this.updateField(
+                    "loadingRequirements",
+                    (e.target as HTMLSelectElement).value
+                  )}"
+              >
+                <option value="">Select</option>
+                <option value="dock">Dock</option>
+                <option value="liftgate">Liftgate</option>
+                <option value="inside">Inside Pickup</option>
+              </select>
+              <p class="helper-text">
+                If inside pickup/delivery is selected, the driver will bring a
+                pallet jack to move the goods from the dock to the truck (or
+                vice-versa). If inside pickup or delivery is at a residence or a
+                non-dock location, please also select the "Lift gate" as well.
+              </p>
+            </div>
+
+            <div class="field-group">
+              <label class="field-label">Delivery Requirements</label>
+              <select
+                .value="${this.formData.deliveryRequirements}"
+                @change="${(e: Event) =>
+                  this.updateField(
+                    "deliveryRequirements",
+                    (e.target as HTMLSelectElement).value
+                  )}"
+              >
+                <option value="">Select</option>
+                <option value="dock">Dock</option>
+                <option value="liftgate">Liftgate</option>
+                <option value="inside">Inside Delivery</option>
+              </select>
+            </div>
+          </div>
+
+          <div class="section-row">
+            <div class="field-group">
+              <label class="field-label">Loading Limited Access Type</label>
+              <select
+                .value="${this.formData.loadingLimitedAccessType}"
+                @change="${(e: Event) =>
+                  this.updateField(
+                    "loadingLimitedAccessType",
+                    (e.target as HTMLSelectElement).value
+                  )}"
+              >
+                <option value="">Select</option>
+                <option value="none">None</option>
+                <option value="residential">Residential</option>
+                <option value="construction">Construction Site</option>
+              </select>
+            </div>
+
+            <div class="field-group">
+              <label class="field-label">Delivery Limited Access Type</label>
+              <select
+                .value="${this.formData.deliveryLimitedAccessType}"
+                @change="${(e: Event) =>
+                  this.updateField(
+                    "deliveryLimitedAccessType",
+                    (e.target as HTMLSelectElement).value
+                  )}"
+              >
+                <option value="">Select</option>
+                <option value="none">None</option>
+                <option value="residential">Residential</option>
+                <option value="construction">Construction Site</option>
+              </select>
+            </div>
+          </div>
+
+          <div class="section-row single">
+            <div class="field-group">
+              <label class="field-label">
+                Pickup Date <span class="required">*</span>
+              </label>
+              <input
+                type="date"
+                class="input-field"
+                .value="${this.formData.pickupDate}"
+                @input="${(e: Event) =>
+                  this.updateField(
+                    "pickupDate",
+                    (e.target as HTMLInputElement).value
+                  )}"
+              />
+            </div>
+          </div>
+        </div>
+
+        <!-- Commodity Details Section -->
+        <div class="section">
+          <h2 class="section-title">Commodity Details</h2>
+
+          <div class="field-group" style="margin-bottom: var(--rel-spacing-space-md);">
+            <label class="field-label">Is this a hazmat commodity?</label>
+            <div class="radio-group">
+              <div
+                class="radio-option"
+                @click="${() => this.updateField("isHazmat", true)}"
+              >
+                <div
+                  class="radio-input ${this.formData.isHazmat ? "checked" : ""}"
+                ></div>
+                <span class="radio-label">Yes</span>
+              </div>
+              <div
+                class="radio-option"
+                @click="${() => this.updateField("isHazmat", false)}"
+              >
+                <div
+                  class="radio-input ${!this.formData.isHazmat ? "checked" : ""}"
+                ></div>
+                <span class="radio-label">No</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="section-row">
+            <div class="field-group">
+              <label class="field-label">
+                Commodity <span class="required">*</span>
+              </label>
+              <input
+                type="text"
+                class="input-field"
+                .value="${this.formData.commodity}"
+                @input="${(e: Event) =>
+                  this.updateField(
+                    "commodity",
+                    (e.target as HTMLInputElement).value
+                  )}"
+              />
+            </div>
+
+            <div class="field-group">
+              <label class="field-label">
+                Commodity Description <span class="required">*</span>
+              </label>
+              <input
+                type="text"
+                class="input-field"
+                .value="${this.formData.commodityDescription}"
+                @input="${(e: Event) =>
+                  this.updateField(
+                    "commodityDescription",
+                    (e.target as HTMLInputElement).value
+                  )}"
+              />
+            </div>
+          </div>
+
+          <div class="section-row">
+            <div class="field-group">
+              <label class="field-label">
+                Handling Units <span class="required">*</span>
+                <span class="info-icon">ⓘ</span>
+              </label>
+              <input
+                type="number"
+                class="input-field"
+                .value="${this.formData.handlingUnits}"
+                @input="${(e: Event) =>
+                  this.updateField(
+                    "handlingUnits",
+                    parseInt((e.target as HTMLInputElement).value) || 0
+                  )}"
+              />
+            </div>
+
+            <div class="field-group">
+              <label class="field-label">
+                Handling Type <span class="required">*</span>
+              </label>
+              <select
+                .value="${this.formData.handlingType}"
+                @change="${(e: Event) =>
+                  this.updateField(
+                    "handlingType",
+                    (e.target as HTMLSelectElement).value
+                  )}"
+              >
+                <option value="">Select</option>
+                <option value="pallet">Pallet</option>
+                <option value="crate">Crate</option>
+                <option value="box">Box</option>
+              </select>
+            </div>
+          </div>
+
+          <div class="field-group" style="margin-bottom: var(--rel-spacing-space-md);">
+            <div class="dimension-inputs">
+              <div class="dimension-field">
+                <label class="dimension-label">
+                  Length <span class="required">*</span>
+                </label>
+                <div class="dimension-input-wrapper">
+                  <input
+                    type="number"
+                    class="dimension-input"
+                    .value="${this.formData.length}"
+                    @input="${(e: Event) =>
+                      this.updateField(
+                        "length",
+                        parseFloat((e.target as HTMLInputElement).value) || 0
+                      )}"
+                  />
+                  <span class="dimension-unit">inches</span>
+                </div>
+              </div>
+
+              <div class="dimension-field">
+                <label class="dimension-label">
+                  Width <span class="required">*</span>
+                </label>
+                <div class="dimension-input-wrapper">
+                  <input
+                    type="number"
+                    class="dimension-input"
+                    .value="${this.formData.width}"
+                    @input="${(e: Event) =>
+                      this.updateField(
+                        "width",
+                        parseFloat((e.target as HTMLInputElement).value) || 0
+                      )}"
+                  />
+                  <span class="dimension-unit">inches</span>
+                </div>
+                <div class="max-note">96" max</div>
+              </div>
+
+              <div class="dimension-field">
+                <label class="dimension-label">
+                  Height <span class="required">*</span>
+                </label>
+                <div class="dimension-input-wrapper">
+                  <input
+                    type="number"
+                    class="dimension-input"
+                    .value="${this.formData.height}"
+                    @input="${(e: Event) =>
+                      this.updateField(
+                        "height",
+                        parseFloat((e.target as HTMLInputElement).value) || 0
+                      )}"
+                  />
+                  <span class="dimension-unit">inches</span>
+                </div>
+                <div class="max-note">96" max</div>
+              </div>
+
+              <div class="dimension-field">
+                <label class="dimension-label">
+                  Total Weight <span class="required">*</span>
+                </label>
+                <div class="dimension-input-wrapper">
+                  <input
+                    type="number"
+                    class="dimension-input"
+                    .value="${this.formData.totalWeight}"
+                    @input="${(e: Event) =>
+                      this.updateField(
+                        "totalWeight",
+                        parseFloat((e.target as HTMLInputElement).value) || 0
+                      )}"
+                  />
+                  <span class="dimension-unit">lbs</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="section-row">
+            <div class="field-group">
+              <label class="field-label">
+                Class <span class="required">*</span>
+              </label>
+              <select
+                .value="${this.formData.class}"
+                @change="${(e: Event) =>
+                  this.updateField("class", (e.target as HTMLSelectElement).value)}"
+              >
+                <option value="">Select</option>
+                <option value="50">Class 50</option>
+                <option value="55">Class 55</option>
+                <option value="60">Class 60</option>
+                <option value="65">Class 65</option>
+                <option value="70">Class 70</option>
+                <option value="77.5">Class 77.5</option>
+                <option value="85">Class 85</option>
+                <option value="92.5">Class 92.5</option>
+                <option value="100">Class 100</option>
+              </select>
+            </div>
+
+            <div class="field-group">
+              <label class="field-label">
+                Insured Value
+                <span class="info-icon">ⓘ</span>
+              </label>
+              <input
+                type="number"
+                class="input-field"
+                .value="${this.formData.insuredValue}"
+                @input="${(e: Event) =>
+                  this.updateField(
+                    "insuredValue",
+                    parseFloat((e.target as HTMLInputElement).value) || 0
+                  )}"
+              />
+            </div>
+          </div>
+
+          <div class="section-row single">
+            <div class="field-group">
+              <label class="field-label">NMFC Number</label>
+              <input
+                type="text"
+                class="input-field"
+                .value="${this.formData.nmfcNumber}"
+                @input="${(e: Event) =>
+                  this.updateField(
+                    "nmfcNumber",
+                    (e.target as HTMLInputElement).value
+                  )}"
+              />
+              <p class="helper-text">
+                Failure to provide NMFC may result in additional variance
+                charges
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}