@progressive-development/pd-order 0.1.126 → 0.1.128

package/dist/src/PdOrderContacts.js

@@ -0,0 +1,191 @@
+import { LitElement, css, html } from "lit";
+import { msg } from "@lit/localize";
+import "../node_modules/@progressive-development/pd-content/pd-collapse.js";
+import "../node_modules/@progressive-development/pd-contact/pd-contact.js";
+import { PDFontStyles } from "@progressive-development/pd-shared-styles";
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ */
+class PdOrderContacts extends LitElement {
+  static get styles() {
+    return [
+      PDFontStyles,
+      css`
+        :host {
+          display: block;
+        }
+ 
+        p {
+          color: var(--pd-default-font-content-col);
+          font-size: var(--pd-default-font-content-size);
+          font-family: var(--pd-default-font-content-family);
+          max-width: 1000px;
+        }
+
+        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);
+        }
+ 
+       .collapse-contact {
+         padding: 10px;
+       }
+ 
+       .summary-box {
+         display: flex;
+         flex-wrap: wrap;
+         gap: 10px;
+       }
+ 
+       .first-contact {
+         min-width: 200px;
+       }
+     `
+    ];
+  }
+  static get properties() {
+    return {
+      /**
+        * List with required contact fields, if not set use default (previous existing values to be consitent during update)
+        */
+      requiredFields: { type: Array },
+      orderContact: { type: Object },
+      billingContact: { type: Object },
+      summary: { type: Boolean },
+      withPayment: { type: Boolean },
+      match: { type: Object },
+      _ownBillingContact: { type: Boolean }
+    };
+  }
+  constructor() {
+    super();
+    this._ownBillingContact = false;
+    this.requiredFields = [];
+    this.match = {};
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("validate-form", this._validateForm);
+  }
+  disconnectedCallback() {
+    super.connectedCallback();
+    this.removeEventListener("validate-form", this._validateForm);
+  }
+  firstUpdated() {
+    this.addEventListener("toggle-accordion", (e) => {
+      const origin = e.composedPath()[0];
+      const collapsiblePanels = this.shadowRoot.querySelectorAll(
+        "pd-collapse"
+      );
+      collapsiblePanels.forEach((panel) => {
+        if (panel !== origin) {
+          panel.close();
+        }
+      });
+    });
+  }
+  render() {
+    if (this.summary) {
+      return this._renderSummary();
+    }
+    return this._renderEditContacts();
+  }
+  _renderEditContacts() {
+    return html`
+       <pd-collapse id="orderContactCollapseId" active>
+         <div slot="header" class="header">${msg("Adresse", { id: "pd.order.contacts.orderContact.inputHeader" })}</div>
+         <pd-contact
+           id="orderContactId"
+           class="collapse-contact"
+           slot="content"
+           .requiredFields="${this.requiredFields}"
+           .contact="${this.orderContact}"
+           .match="${this.match}"
+         ></pd-contact>
+       </pd-collapse>
+ 
+       ${this.withPayment ? html`
+        <pd-collapse id="billingContactCollapseId">
+          <div slot="header" class="header">${msg("Rechnungsadresse", { id: "pd.order.contacts.billingContact.inputHeader" })}</div>
+          <div slot="content">
+            ${this._ownBillingContact ? html`
+                  <p>
+                    <a @click="${() => {
+      this._ownBillingContact = false;
+    }}">
+                      ${msg("Gleiche Rechnungsadresse", { id: "pd.order.contacts.billingContact.sameBillingLink" })}
+                    </a>
+                  </p>
+                  <pd-contact
+                    id="billingContactId"
+                    class="collapse-contact"
+                    .requiredField="${this.requiredFields}"
+                    .contact="${this.billingContact}"
+                  ></pd-contact>
+                ` : html`
+                <p>${msg("Die Adresse, wird auch als Rechnungsadresse verwendet.", { id: "pd.order.contacts.billingContact.sameBillingText" })}</p>
+                <p>
+                  <a @click="${() => {
+      this._ownBillingContact = true;
+    }}">
+                    ${msg("Andere Rechnungsadresse verwenden", { id: "pd.order.contacts.billingContact.otherBillingLink" })}
+                  </a>
+                </p>
+            `}
+          </div>
+        </pd-collapse>` : ""}
+     `;
+  }
+  _renderSummary() {
+    return html`
+       <div class="summary-box">
+         <pd-contact
+           class="first-contact"
+           addressTitle="Onderhoud"
+           .contact="${this.orderContact}"
+           summary
+         ></pd-contact>
+         ${this.billingContact ? html`
+         <pd-contact
+           addressTitle="Facturatie"
+           addressRef="adres onderhoud"
+           .contact="${this.billingContact}"
+           summary
+         ></pd-contact>` : ""}
+       </div>
+     `;
+  }
+  _validateForm(e) {
+    if (e.detail && !e.detail.singleElement) {
+      this.shadowRoot.getElementById("orderContactId").dispatchEvent(
+        new CustomEvent("validate-form", {
+          detail: e.detail
+        })
+      );
+      const errorSize = e.detail.errorMap.size;
+      if (errorSize > 0) {
+        this.shadowRoot.getElementById("orderContactCollapseId").open();
+      }
+      if (this._ownBillingContact) {
+        this.shadowRoot.getElementById("billingContactId").dispatchEvent(
+          new CustomEvent("validate-form", {
+            detail: e.detail
+          })
+        );
+        if (e.detail.errorMap.size > errorSize) {
+          this.shadowRoot.getElementById("billingContactCollapseId").open();
+        }
+      }
+    }
+  }
+}
+export {
+  PdOrderContacts
+};

package/dist/src/PdOrderSummary.js

@@ -0,0 +1,242 @@
+import { LitElement, css, html } from "lit";
+import { msg } from "@lit/localize";
+import { format } from "../node_modules/fecha/lib/fecha.js";
+import "../node_modules/@progressive-development/pd-forms/pd-checkbox.js";
+import "../node_modules/@progressive-development/pd-forms/pd-radio-group.js";
+import "../node_modules/@progressive-development/pd-content/pd-edit-content.js";
+import "../node_modules/@progressive-development/pd-price/pd-pricetable.js";
+import "../node_modules/@progressive-development/pd-dialog/pd-popup.js";
+import "../node_modules/@progressive-development/pd-forms/pd-form-container.js";
+import "../node_modules/@progressive-development/pd-forms/pd-form-row.js";
+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}"
+                 summary
+               >
+               </pd-order-contacts>
+             ` : ""}
+       </pd-edit-content>
+     `;
+  }
+  _openTermsAndConditions(e) {
+    this.shadowRoot.getElementById("agreePopupId").showPopup();
+    e.stopPropagation();
+  }
+}
+export {
+  PdOrderSummary
+};

package/package.json

@@ -3,10 +3,16 @@
   "description": "Progressive Development Order Component",
   "author": "PD Progressive Development",
   "license": "SEE LICENSE IN LICENSE",
-  "version": "0.1.126",
+  "version": "0.1.128",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
   "exports": {
+    ".": "./dist/index.js",
     "./pd-order-contacts": "./dist/pd-order-contacts.js",
-    "./pd-order-summary": "./dist/pd-order-summary.js"
+    "./pd-order-summary": "./dist/pd-order-summary.js",
+    "./locales/be": "./dist/generated/locales/be.js",
+    "./locales/de": "./dist/generated/locales/de.js",
+    "./locales/en": "./dist/generated/locales/en.js"
   },
   "files": [
     "dist/",
@@ -16,7 +22,7 @@
   ],
   "scripts": {
     "analyze": "cem analyze --litelement",
-    "dev": "vite",
+    "start": "vite",
     "build": "vite build",
     "preview": "vite preview",
     "lint": "eslint --ext .js,.html . --ignore-path .gitignore && prettier \"**/*.{js,html}\" --check --ignore-path .gitignore",
@@ -37,7 +43,8 @@
     "@progressive-development/pd-price": "^0.1.10",
     "@progressive-development/pd-shared-styles": "^0.1.1",
     "fecha": "^4.2.3",
-    "lit": "^2.8.0"
+    "lit": "^2.8.0",
+    "@lit/localize": "^0.11.4"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
@@ -54,7 +61,8 @@
     "lint-staged": "^10.5.4",
     "prettier": "^2.8.8",
     "storybook": "^7.6.4",
-    "vite": "^5.4.11"
+    "vite": "^5.4.11",
+    "vitest": "^2.1.8"
   },
   "customElements": "custom-elements.json",
   "eslintConfig": {