@progressive-development/pd-order 0.5.17 → 0.6.0

package/dist/src/PdOrderSummary.js

@@ -1,244 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { msg } from "@lit/localize";
-import { format } from "fecha";
-import "@progressive-development/pd-forms/pd-checkbox";
-import "@progressive-development/pd-forms/pd-radio-group";
-import "@progressive-development/pd-forms/pd-form-container";
-import "@progressive-development/pd-forms/pd-form-row";
-import "@progressive-development/pd-price/pd-pricetable";
-import "@progressive-development/pd-dialog/pd-popup";
-import "@progressive-development/pd-content/pd-edit-content";
-import { PDFontStyles, PDColorStyles } from "@progressive-development/pd-shared-styles";
-import "../pd-order-contacts.js";
-/**
- * @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>${msg("Übersicht", { id: "pd.order.summary.title" })}</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>${msg("Rechnung", { id: "pd.order.summary.billing" })}</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="${msg("Bitte stimmen Sie den Allgemeinen Geschäftsbedingungen zu, um fortzufahren.", { id: "pd.order.summary.agree.required" })}"
-          >
-            ${msg(
-      html`Stimmen Sie unseren <a @click="${this._openTermsAndConditions}" @keypress="${this._openTermsAndConditions}">Allgemeinen Geschäftsbedingungen</a> zu`,
-      { id: "pd.order.summary.agree.link" }
-    )}
-          </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}"
-                 .adminContact="${this.order.contacts.adminContact}"
-                 .propertyContact="${this.order.contacts.propertyContact}"
-                 summary
-               >
-               </pd-order-contacts>
-             ` : ""}
-       </pd-edit-content>
-     `;
-  }
-  _openTermsAndConditions(e) {
-    this.shadowRoot.getElementById("agreePopupId").showPopup();
-    e.stopPropagation();
-  }
-}
-export {
-  PdOrderSummary
-};