@progressive-development/pd-order 0.1.124 → 0.1.126

package/dist/pd-order-contacts.js

@@ -0,0 +1 @@
+import "./pd-order-contacts-chunk.js";

package/dist/pd-order-summary.js

@@ -0,0 +1,704 @@
+import { html, LitElement, css } from "lit";
+import { format } from "fecha";
+import { o, I as ICON_CLOSE } from "./pd-order-contacts-chunk.js";
+import { PDColorStyles, PDFontStyles } from "@progressive-development/pd-shared-styles";
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ */
+const editIcon = html`<svg
+                    class="edit"
+                    id="Layer_1"
+                    version="1.1"
+                    viewBox="0 0 19 19"
+                    xml:space="preserve"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                    >
+                    <g>
+                      <path
+                        d="M8.44,7.25C8.348,7.342,8.277,7.447,8.215,7.557L8.174,7.516L8.149,7.69   C8.049,7.925,8.014,8.183,8.042,8.442l-0.399,2.796l2.797-0.399c0.259,0.028,0.517-0.007,0.752-0.107l0.174-0.024l-0.041-0.041   c0.109-0.062,0.215-0.133,0.307-0.225l5.053-5.053l-3.191-3.191L8.44,7.25z"
+                        fill="var(--edit-fill-color)"
+                      />
+                      <path
+                        d="M18.183,1.568l-0.87-0.87c-0.641-0.641-1.637-0.684-2.225-0.097l-0.797,0.797l3.191,3.191l0.797-0.798   C18.867,3.205,18.824,2.209,18.183,1.568z"
+                        fill="var(--edit-fill-color)"
+                      />
+                      <path
+                        d="M15,9.696V17H2V2h8.953l1.523-1.42c0.162-0.161,0.353-0.221,0.555-0.293   c0.043-0.119,0.104-0.18,0.176-0.287H0v19h17V7.928L15,9.696z"
+                        fill="var(--edit-fill-color)"
+                      />
+                    </g>
+                  </svg>`;
+class PdEditContent extends LitElement {
+  /**
+   * @event edit-content
+   */
+  static get styles() {
+    return [
+      PDColorStyles,
+      PDFontStyles,
+      css`
+       :host { 
+         display: block;
+       }
+ 
+       h4 {
+         font-family: var(--pd-default-font-title-family);
+         font-size: var(--pd-ec-font-title-size, 1.2em);
+         margin-top: 0px;
+         margin-bottom: 2px;
+         line-height: 40px;
+         color: var(--pd-ec-font-title-col, var(--pd-default-bg-col));
+         padding-left: 5px;
+       }
+ 
+       .header {
+         display: flex;
+         gap: 5px;
+         background-color: var(--pd-ec-bg-col, var(--pd-default-col));
+         align-items: center;
+       }
+ 
+       .circle {
+         margin-left: 5px;
+         display: flex;
+         align-items: center;
+         justify-content: center;
+         width: 27px;
+         height: 27px;
+         border-radius: 50%;
+         background-color: var(--pd-ec-font-title-col, var(--pd-default-bg-col));
+       }
+ 
+       .step-number {
+         font-family: var(--pd-default-font-title-family);
+         font-size: var(--pd-ec-font-title-size, 1.2em);    
+         font-weight: var(--pd-ec-nr-font-weight, bold);    ;
+         color: var(--pd-ec-bg-col, var(--pd-default-col));
+       }
+ 
+       /* Temporär? Hier noch sehr aufwendig mit div/span? */
+ 
+       .label {
+         display: inline-block;
+         font-weight: bold;
+         width: 200px;
+         padding-top: 10px;
+       }
+ 
+       /* Temporär */
+       a {
+        cursor: pointer; 
+        font-family: var(--pd-default-font-link-family);
+        font-size: var(--pd-default-font-link-size);
+        color: var(--pd-default-font-link-col);
+        --edit-fill-color: var(--pd-default-font-link-col);
+       }
+       a:hover {
+         color: var(--pd-default-font-link-col-hover);         
+         --edit-fill-color: var(--pd-default-font-link-col-hover);
+       }
+ 
+       .edit {
+         width: 1.1em;
+       }
+       /* 
+        could used as class for given svg icons, workaround class 
+        hard coded for specific icon => maybe use custom properties here, but not for that hack...
+       */
+       .own-edit-icon {
+          width: 2em;
+          margin-top: -10px;          
+       }
+
+       .link-row {
+          padding-top: 5px;
+          padding-bottom: 5px;
+          display: flex;
+          flex-wrap: wrap;
+          gap: 15px;
+       }
+
+       .link-item {
+          display: flex;
+          gap: 2px;
+          white-space: nowrap;
+          align-items: center;
+          pointer-events: none;
+       }
+
+       .param-data {
+         padding-bottom: 10px;
+       }
+ 
+       @media (max-width: 360px) {
+         .label {
+           width: 130px;
+         }
+       }
+     `
+    ];
+  }
+  static get properties() {
+    return {
+      stepNumber: { type: Number },
+      contentTitle: { type: String },
+      data: { type: Array },
+      editLinks: { type: Array },
+      // TODO: [TIM-37] Put together with edit icon/editDisabled
+      editDisabled: { type: Boolean }
+    };
+  }
+  constructor() {
+    super();
+    this.stepNumber = void 0;
+    this.contentTitle = "";
+    this.data = [];
+    this.editLinks = [];
+    this.editDisabled = false;
+  }
+  render() {
+    return html`
+       <div class="header">
+         ${this.stepNumber ? html`
+               <div class="circle">
+                 <span class="step-number">${this.stepNumber}</span>
+               </div>
+             ` : ""}
+         <h4>${this.contentTitle}</h4>
+       </div>
+       <div>
+         ${this.data ? html`
+              <div class="param-data">
+                ${this.data.map(
+      (dataEntry) => html`
+                  <div>
+                    <span class="label">${dataEntry.name}</span>
+                    <span class="value">${dataEntry.val}</span>
+                  </div>
+                `
+    )}
+              </div>` : ""}
+         <slot></slot>
+         <div class="link-row">
+           ${this.editDisabled ? "" : html`
+                 <a @click="${this._editContent}">
+                   <div class="link-item">${editIcon} Bewerk ${this.contentTitle}</div>
+                 </a>
+               `}
+           ${this.editLinks.map(
+      (link) => html`
+             <a data-link="${link.key}" @click="${this._editContent}">
+                <div class="link-item">${PdEditContent._getLinkLogo(link)} ${link.txt}</div>
+             </a>`
+    )}
+         </div>
+       </div>
+     `;
+  }
+  static _getLinkLogo(link) {
+    if (link.icon) {
+      return link.icon;
+    }
+    if (link.defaultIcon) {
+      return editIcon;
+    }
+    return "";
+  }
+  _editContent(e) {
+    const { link } = e.target.dataset;
+    this.dispatchEvent(
+      new CustomEvent("edit-content", {
+        detail: {
+          step: this.stepNumber,
+          link
+        },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+}
+window.customElements.define("pd-edit-content", PdEditContent);
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ */
+class PdPricetable extends LitElement {
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        max-width: 100%;
+        --table-spacing: 1rem;
+        --table-radius: 1rem;
+
+        --table-bg: var(--game-color-dark, #fefefe);
+
+        --table-header-color: var(--game-color-light, #fefefe);
+        --table-header-bg: var(--game-color-dark, #177e89);
+
+        --table-row-odd-bg: var(--game-color-light, #fefefe);
+
+        --table-small-cell-bg: var(--game-color-light, lightgrey);
+      }
+
+      .table {
+        position: relative;
+        z-index: 1;
+        width: 100%;
+        background: var(--table-bg);
+      }
+
+      .table_expanded {
+        border-bottom: 2px solid var(--table-small-cell-bg);
+      }
+      .table_expanded .table__header .table__cell {
+        position: relative;
+        z-index: 10;
+        background-color: var(--table-header-bg);
+        box-shadow: 0 2px 0 var(--table-small-cell-bg);
+        font-weight: bold;
+        color: var(--table-header-color);
+
+        font-family: Oswald;
+      }
+      .table_expanded .table__body .table__row:nth-child(odd) {
+        background-color: var(--table-row-odd-bg);
+      }
+
+      .table_expanded .table__cell {
+        padding: calc(var(--table-spacing) / 2);
+      }
+
+      .text-left {
+        text-align: left;
+      }
+      .text-center {
+        text-align: center;
+      }
+      .text-right {
+        text-align: right;
+      }
+      .bold {
+        font-size: 1.2em;
+        font-family: Oswald;
+        color: #084c61;
+      }
+      .light {
+        color: grey;
+      }
+      .border-row {
+        border-bottom: 1px solid black;
+      }
+    `;
+  }
+  static get properties() {
+    return {
+      priceData: { type: Object }
+    };
+  }
+  constructor() {
+    super();
+    this.priceData = { articles: [], tax: 0 };
+    this.tableCssClasses = { table: true, table_expanded: true };
+    this._totalPrice = 0;
+  }
+  render() {
+    return this.loading ? html`Loading...` : html` <table class="${o(this.tableCssClasses)}">
+            <thead class="table__header">
+              <tr class="table__row">
+                <th class="table__cell" scope="col">Artikel</th>
+                <th class="table__cell" scope="col">Prijs</th>
+              </tr>
+            </thead>
+            <tbody class="table__body">
+              ${this._renderBody()}
+            </tbody>
+            <tfoot>
+              <tr>
+                <td class="table__cell text-right bold" role="cell">Total:</td>
+                <td class="table__cell text-right bold" role="cell">
+                  ${(this._totalPrice + this._totalPrice * this.priceData.tax).toFixed(2)}
+                  €
+                </td>
+              </tr>
+            </tfoot>
+          </table>
+          <p>* ${this._getTaxInfo()}</p>`;
+  }
+  _renderBody() {
+    this._totalPrice = 0;
+    return html`
+      ${this.priceData.articles.map((article) => {
+      this._totalPrice += article.price ? Number(article.price) : 0;
+      return html`
+          <tr class="table__row">
+            <td class="table__cell text-left" role="cell">${article.name}</td>
+            <td class="table__cell text-right" role="cell">
+              ${article.price ? Number(article.price).toFixed(2) : "--"} €
+            </td>
+          </tr>
+        `;
+    })}
+      <tr class="table__row">
+        <td class="table__cell text-right border-row light" role="cell">
+          ${this.priceData.tax * 100}% BTW*
+        </td>
+        <td class="table__cell text-right border-row light" role="cell">
+          ${(this._totalPrice * this.priceData.tax).toFixed(2)} €
+        </td>
+      </tr>
+    `;
+  }
+  _getTaxInfo() {
+    switch (this.priceData.tax) {
+      case 0:
+        return "BTW verlegd";
+      case 0.06:
+        return "6% BTW voor woningen ouder dan 10 jaar.";
+      case 0.21:
+        return "21% BTW voor woningen jonger dan 10 jaar.";
+      default:
+        return "--";
+    }
+  }
+}
+window.customElements.define("pd-pricetable", PdPricetable);
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ */
+class PdPopup extends LitElement {
+  static get styles() {
+    return [
+      PDColorStyles,
+      css`
+      :host {
+        display: block;
+      }
+
+      /* The Modal (background) */
+      .modal {
+        position: fixed; /* Stay in place */
+        z-index: 100; /* Sit on top */        
+        left: 0;
+        top: 0;
+        width: 100%; /* Full width */
+        height: 100%; /* Full height */
+        overflow: auto; /* Enable scroll if needed */
+        /* RGBA Wert muss hier verwendet werden #AFC1D2 to rgba for opacity */
+        background-color: var(--pd-popup-modal-bg-rgba, rgba(175, 193, 210, 0.8)); 
+
+        /* specific for PdPopup, abobe also used for PdPopupDialog */
+        display: var(--pd-popup-default-display, none); /* Hidden by default */
+        padding-top: 100px; /* Location of the box */        
+      }
+
+      /* Modal Content */
+      .modal-content {        
+        background-color: var(--pd-default-bg-col);
+        opacity: 1;
+        margin: auto;
+        padding: var(--pd-popup-modal-padding, 20px);
+        padding-bottom: 130px;
+        border: 2px solid var(--pd-default-col);
+        width: 80%;
+        max-width: 1200px;
+        position: relative;
+      }
+
+      .modal-content-slot {
+        max-width: var(--pd-popup-modal-slot-max-width, 1000px);
+        margin: var(--pd-popup-modal-slot-margin, 0 30px);
+      }
+
+      .close-icon {        
+        position: absolute;        
+        cursor: pointer;
+        right: 1.2em;
+        top: 1.2em;
+      }`
+    ];
+  }
+  render() {
+    return html`
+      <!-- Trigger/Open The Modal -->
+      <span @click="${this._activatePopup}" @keypress="${this._activatePopup}"
+        ><slot name="small-view"></slot
+      ></span>
+
+      <!-- The Modal -->
+      <div id="modalId" class="modal">
+        <!-- Modal content -->
+        <div class="modal-content">
+          <pd-icon icon="${ICON_CLOSE}" class="close-icon"
+            @click="${this._closePopup}"></pd-icon>          
+          <div class="modal-content-slot">
+            <slot name="content"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  showPopup() {
+    this._activatePopup();
+  }
+  hidePopup() {
+    this._closePopup();
+  }
+  _activatePopup() {
+    const modal = this.shadowRoot.getElementById("modalId");
+    modal.style.display = "block";
+  }
+  _closePopup() {
+    const modal = this.shadowRoot.getElementById("modalId");
+    modal.style.display = "none";
+    this.dispatchEvent(
+      new CustomEvent("popup-close", {
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  /*
+    // When the user clicks anywhere outside of the modal, close it
+  window.onclick = function(event) {
+    if (event.target == modal) {
+      modal.style.display = "none";
+    }
+  }
+  */
+}
+window.customElements.define("pd-popup", PdPopup);
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ */
+class PdOrderSummary extends LitElement {
+  /**
+    * @event go-to
+    */
+  static get styles() {
+    return [
+      PDFontStyles,
+      PDColorStyles,
+      css`
+       :host {
+         display: block;
+       }
+
+       h3 {
+         color: var(--pd-default-font-title-col);
+         font-family: var(--pd-default-font-title-family);
+         font-size: 1.5em;
+         /*margin-top: 10px;
+         margin-bottom: 20px;*/
+       }
+
+       .edit-summary-container {
+         display: flex;
+         flex-flow: column;
+         flex-wrap: wrap;
+         gap: 1em;
+       }
+ 
+       .payment {
+         margin-top: 30px;
+         padding: 5px;
+         background-color: var(--pd-order-summary-payment-bg-col, var(--pd-default-light-col));
+       }
+ 
+       .pay-logo-box {
+         display: flex;
+       }
+ 
+       .pay-logo {
+         max-width: 6rem;
+       }
+ 
+       .pricetable {
+         padding-top: 20px;
+       }
+ 
+       /* Temporär */
+       a {
+        cursor: pointer; 
+        font-family: var(--pd-default-font-link-family);
+        font-size: var(--pd-default-font-link-size);
+        color: var(--pd-default-font-link-col);
+       }
+       a:hover {
+         color: var(--pd-default-font-link-col-hover);
+       }
+ 
+       .agree-box {
+         padding-top: 20px;
+       }
+ 
+       /* Size Elements for small width */
+       @media (max-width: 380px) {
+         .pay-logo {
+           max-width: 5rem;
+         }
+       }
+     `
+    ];
+  }
+  static get properties() {
+    return {
+      orderSteps: { type: Array },
+      withPayment: { type: Boolean },
+      withAgreement: { type: Boolean },
+      order: { type: Object }
+    };
+  }
+  constructor() {
+    super();
+    this.orderSteps = [];
+    this.order = {};
+  }
+  firstUpdated() {
+    this.addEventListener("edit-content", (e) => {
+      this.dispatchEvent(
+        new CustomEvent("go-to", {
+          detail: {
+            step: e.detail.step
+          },
+          bubbles: true,
+          composed: true
+        })
+      );
+    });
+    this.addEventListener("validate-form", this._validateForm);
+  }
+  render() {
+    if (!this.order) {
+      return html`<p>No order is set</p>`;
+    }
+    return html`
+       <h3>Overzicht</h3>
+       <div class="edit-summary-container">
+        ${this.orderSteps.map((step, index) => {
+      switch (step.key) {
+        case "zip":
+        case "booking":
+          return this._getBookingSummary(index + 1, step);
+        case "contacts":
+          return this._getContactsSummary(index + 1, step);
+        default:
+          return html`
+                <pd-edit-content
+                  contentTitle="${step.name}"
+                  stepNumber="${index + 1}"
+                  .data="${step.data}"
+                >
+                  <slot name="${step.key}"></slot>
+                </pd-edit-content>
+              `;
+      }
+    })}
+       </div>
+ 
+       ${this.order.priceData ? html`
+        <div class="payment">
+          <h3>Facturatie</h3>
+          <!--
+          <pd-radio-group id="paymentGroupId" style="--group-direction: column;">
+            <pd-checkbox name="direct" value="false">
+              Pay direct, you will redirected after submit the order
+              <div class="pay-logo-box">
+                <img class="pay-logo" src="/images/paypal.svg"> 
+                <img class="pay-logo" src="/images/visa.svg">
+                <img class="pay-logo" src="/images/mastercard.svg">
+              </div>
+            </pd-checkbox>
+            <pd-checkbox name="bill" value="false">Pay with bill (5€ additional fee)</pd-checkbox>
+          </pd-radio-group>    
+          -->
+          <pd-pricetable
+            class="pricetable"
+            .priceData="${this.order.priceData}"
+          ></pd-pricetable>
+        </div>
+        ` : ""}          
+
+      ${this.withAgreement ? html`
+      <pd-form-container id="submitSummaryFormId">
+        <pd-form-row>
+          <pd-checkbox
+            id="agreeConditionsId"
+            valueName="agreeId"
+            class="agree-box"
+            required
+            requiredMsg="Ga akkoord met de algemene voorwaarden om uw order te bevestigen."
+          >
+            Ga akkoord met onze
+            <a
+              @click="${this._openTermsAndConditions}"
+              @keypress="${this._openTermsAndConditions}"
+              >algemene voorwaarden</a
+            >
+          </pd-checkbox>
+        </pd-form-row>        
+      </pd-form-container>
+
+      <pd-popup id="agreePopupId">
+        <div slot="content"><slot name="legal"></slot></div>
+      </pd-popup>
+      ` : ""}      
+     `;
+  }
+  _validateForm(e) {
+    if (e.detail && !e.detail.singleElement && this.withAgreement) {
+      this.shadowRoot.getElementById("submitSummaryFormId").dispatchEvent(
+        new CustomEvent("validate-form", {
+          detail: e.detail
+        })
+      );
+    }
+  }
+  _getBookingSummary(index, step) {
+    let date;
+    if (this.order.selectedDate) {
+      date = format(this.order.selectedDate, "DD/MM/YYYY");
+    }
+    const bookingData = [{ name: "Postcode:", val: this.order.zip }];
+    if (date) {
+      bookingData.push({ name: "Datum van herstelling:", val: date });
+    }
+    return html`
+       <pd-edit-content
+         contentTitle="${step.name}"
+         stepNumber="${index}"
+         .data="${bookingData}"
+       >
+       </pd-edit-content>
+     `;
+  }
+  _getContactsSummary(index, step) {
+    return html`
+       <pd-edit-content
+         contentTitle="${step.name}"
+         stepNumber="${index}"
+         ?editDisabled="${this.order.withLogin}"
+       >
+         ${this.order.contacts ? html`
+               <pd-order-contacts
+                 ?withPayment="${this.withPayment}"
+                 .orderContact="${this.order.contacts.orderContact}"
+                 .billingContact="${this.order.contacts.billingContact}"
+                 summary
+               >
+               </pd-order-contacts>
+             ` : ""}
+       </pd-edit-content>
+     `;
+  }
+  _openTermsAndConditions(e) {
+    this.shadowRoot.getElementById("agreePopupId").showPopup();
+    e.stopPropagation();
+  }
+}
+window.customElements.define("pd-order-summary", PdOrderSummary);