@progressive-development/pd-order 0.1.124 → 0.1.126

package/src/PdOrderContacts.js

@@ -1,213 +0,0 @@
-/* eslint-disable lit-a11y/click-events-have-key-events */
-/* eslint-disable lit-a11y/anchor-is-valid */
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
-
- import { LitElement, html, css } from 'lit';
-
- import '@progressive-development/pd-content/pd-collapse.js';
- import '@progressive-development/pd-contact/pd-contact.js';
- 
- import { PDFontStyles } from '@progressive-development/pd-shared-styles';
-
- /**
-  * An example element.
-  *
-  * @slot - This element has a slot
-  * @csspart button - The button
-  */
-export 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();
-    // add validation event listener
-    this.addEventListener('validate-form', this._validateForm);
-  }
-
-  disconnectedCallback() {
-    super.connectedCallback();
-    // add validation event listener
-    this.removeEventListener('validate-form', this._validateForm);
-  }
- 
-  firstUpdated() {
-    // only one of the collapse shoud be open
-    this.addEventListener('toggle-accordion', e => {
-      const origin = e.composedPath()[0]; // Warum geht target nicht?
-      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">Adres onderhoud</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">Facturatieadres</div>
-          <div slot="content">
-            ${this._ownBillingContact
-              ? html`
-                  <p>
-                    <a @click="${() => {this._ownBillingContact = false;}}"
-                      >Gebruik adres onderhoud als facturatieadres</a
-                    >
-                  </p>
-                  <pd-contact
-                    id="billingContactId"
-                    class="collapse-contact"
-                    .requiredField="${this.requiredFields}"
-                    .contact="${this.billingContact}"
-                  ></pd-contact>
-                `
-              : html`
-                <p>Het adres waar het onderhoud plaatsvindt, wordt gebruikt als facturatieadres.</p>
-                <p>
-                  <a @click="${() => {
-                    this._ownBillingContact = true;}}">Creëer een ander facturatieadres.</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 billing is set too
-      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();
-        }
-      }
-    }
-  }
-}
- 

package/src/PdOrderSummary.js

@@ -1,276 +0,0 @@
-/* eslint-disable lit-a11y/anchor-is-valid */
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
-
- import { LitElement, html, css } from 'lit';
- import { format } from 'fecha';
- 
- import '@progressive-development/pd-forms/pd-checkbox.js';
- import '@progressive-development/pd-forms/pd-radio-group.js';
- import '@progressive-development/pd-content/pd-edit-content.js';
- import '@progressive-development/pd-price/pd-pricetable.js';
- import '@progressive-development/pd-dialog/pd-popup.js';
- import '@progressive-development/pd-forms/pd-form-container.js';
- import '@progressive-development/pd-forms/pd-form-row.js';
-
- import { PDFontStyles, PDColorStyles } from '@progressive-development/pd-shared-styles';
-
- import '../pd-order-contacts.js';
-  
- /**
-  * An example element.
-  *
-  * @slot - This element has a slot
-  * @csspart button - The button
-  */
- export 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) {
-     // TODO: [TIM-28] Bei key-pressed event => Auf enter prüfen...
- 
-     // Alternative über eigenen Link: window.open(url, '_blank').focus();
- 
-     // open popup
-     this.shadowRoot.getElementById('agreePopupId').showPopup();
- 
-     // stop event, do not edit check-box, when link is clicked
-     e.stopPropagation();
-   }
-
-}
- 

package/stories/booking.stories.js

@@ -1,26 +0,0 @@
-import { html } from 'lit';
-import '../pd-booking.js';
-
-export default {
-  title: 'PdOrder/Booking',
-  component: 'pd-booking',
-  argTypes: {
-    
-  },
-};
-
-function BookingTemplate() {  
-  return html`
-    <pd-booking id="bookCompId" custTok="123456" item="REPAIR">
-      <p slot="description">
-        We repair all heatings from our supported brands. The price includes the 1st our of work and the out-calll fee.
-        Needed repair parts or additional ours not included. 
-      </p>
-    </pd-booking>
-  `;
-}
-
-export const Booking = BookingTemplate.bind({});
-Booking.args = {  
-};
-

package/stories/index.stories.js

@@ -1,17 +0,0 @@
-import { html } from 'lit';
-
-export default {
-  title: 'PdOrder',
-  component: 'pd-order',
-  argTypes: {
-    
-  },
-};
-
-function Template() {
-  return html`
-    <p>ToDo: Examples Overview</p>
-  `;
-}
-
-export const Examples = Template.bind({});

package/stories/order-contacts.stories.js

@@ -1,78 +0,0 @@
-import { html } from 'lit';
-import '../pd-order-contacts.js';
-
-export default {
-  title: 'PdOrder/Order Contacts',
-  component: 'pd-order-contacts',
-  argTypes: {
-    
-  },
-};
-
-function Template({ summary, orderContact, billingContact }) {  
-  return html`    
-    <pd-order-contacts id="testOrderId" ?summary="${summary}" .orderContact="${orderContact}" 
-      .billingContact="${billingContact}"></pd-order-contacts>    
-
-    <h2>Test Validation</h2>
-    <button @click="${() => {
-
-      document.getElementById("testOrderId").validateInput();
-
-    }}">Test Validate</button>
-  `;
-}
-
-export const OrderContacts = Template.bind({});
-OrderContacts.args = {  
-  summary: false,
-};
-
-export const OrderContactsView = Template.bind({});
-OrderContactsView.args = {  
-  summary: true,
-  orderContact: {
-      firstName: 'Peter',
-      lastName: 'Musterman',
-      street: 'Musterstrasse',
-      streetNr: '34a',
-      zip: '6041',
-      city: 'Gent',
-      phone1: '0221/9923443',
-      mobil: '0175/9923443',
-      email: 'peter@muster.be'
-    },
-  billingContact: {
-    firstName: 'Peter',
-    lastName: 'Billing',
-    street: 'Billinggäßchen',
-    streetNr: '12',
-    zip: '6039',
-    city: 'Gent'    
-  }
-};
-
-export const OrderContactsPrepared = Template.bind({});
-OrderContactsPrepared.args = {  
-  summary: false,
-  orderContact: {
-      firstName: 'Peter',
-      lastName: 'Musterman',
-      street: 'Musterstrasse',
-      streetNr: '34a',
-      zip: '6041',
-      city: 'Gent',
-      phone1: '0221/9923443',
-      mobil: '0175/9923443',
-      email: 'peter@muster.be'
-    },
-  billingContact: {
-    firstName: 'Peter',
-    lastName: 'Billing',
-    street: 'Billinggäßchen',
-    streetNr: '12',
-    zip: '6039',
-    city: 'Gent'    
-  }
-};
-

package/stories/order-summary.stories.js

@@ -1,103 +0,0 @@
-import { html } from 'lit';
-import '../pd-order-summary.js';
-
-export default {
-  title: 'PdOrder/Order Summary',
-  component: 'pd-order-summary',
-  argTypes: {},
-};
-
-const agb = html`
-<h1>AGB</h1>
-<p>Text zu der Einleitung der AGBs.</p>
-<h2>Sub Title</h2>
-<p>Text zu der Einleitung der AGBs.</p>
-<h3>Detail Punkt</h3>
-<p>Text zu der Einleitung der AGBs.</p>
-`;
-
-function Template({ orderContact, billingContact }) {
-  const heatingData = [
-    { name: 'Period:', val: '24 maanden' },
-    { name: 'Brand:', val: 'Bosch' },
-    { name: 'Type:', val: '--' },
-    { name: 'House age:', val: '> 10 Years' },
-    { name: 'Description:', val: 'Heating is defect, not warm' },
-  ];
-  return html`
-    <pd-order-summary
-      id="testSummaryId"
-      withAgreement
-      withPayment
-      .order="${{
-        contacts: { orderContact, billingContact },
-        priceData: {
-          tax: 0.1,
-          articles: [
-            {
-              name: 'Maintenance Bronze (heating support for 2 years)',
-              price: 123.5,
-            },
-          ],
-        },
-        zip: 9060,
-        selectedDate: new Date(Date.now()),
-      }}"
-      .orderSteps="${[
-        { key: 'booking', name: 'Date' },
-        { key: 'heating', name: 'Heating', data: heatingData },
-        { key: 'contacts', name: 'Address' },
-      ]}"
-    >
-      <span slot="legal">${agb}</span>
-    </pd-order-summary>
-
-    <h2>Test Validation</h2>
-    <button
-      @click="${() => {
-        document.getElementById('testSummaryId').validateInput();
-      }}"
-    >
-      Test Validate
-    </button>
-  `;
-}
-
-export const OrderSummary = Template.bind({});
-OrderSummary.args = {
-  orderContact: {
-    firstName: 'Peter',
-    lastName: 'Musterman',
-    street: 'Musterstrasse',
-    streetNr: '34a',
-    zip: '6041',
-    city: 'Gent',
-    phone: '0221/9923443',
-    mobil: '0175/9923443',
-    email: 'peter@muster.be',
-  },
-  billingContact: {
-    firstName: 'Peter',
-    lastName: 'Billing',
-    street: 'Billinggäßchen',
-    streetNr: '12',
-    zip: '6039',
-    city: 'Gent',
-  },
-};
-
-export const OrderSummaryEmptyBilling = Template.bind({});
-OrderSummaryEmptyBilling.args = {
-  summary: true,
-  orderContact: {
-    firstName: 'Peter',
-    lastName: 'Musterman',
-    street: 'Musterstrasse',
-    streetNr: '34a',
-    zip: '6041',
-    city: 'Gent',
-    phone: '0221/9923443',
-    mobil: '0175/9923443',
-    email: 'peter@muster.be',
-  },
-};