@progressive-development/pd-order
Version:
Progressive Development Order Component
243 lines (236 loc) • 7.28 kB
JavaScript
import { css, LitElement, html } from 'lit';
import { property, query } from 'lit/decorators.js';
import { localized, msg } from '@lit/localize';
import '@progressive-development/pd-forms/pd-form-container';
import '@progressive-development/pd-forms/pd-form-row';
import '@progressive-development/pd-forms/pd-checkbox';
import '@progressive-development/pd-price/pd-pricetable';
import '@progressive-development/pd-dialog/pd-popup';
import '@progressive-development/pd-content/pd-edit-content';
import '../pd-order-contacts.js';
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
for (var i = decorators.length - 1, decorator; i >= 0; i--)
if (decorator = decorators[i])
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
if (kind && result) __defProp(target, key, result);
return result;
};
let PdOrderSummary = class extends LitElement {
constructor() {
super(...arguments);
this.orderSteps = [];
this.withPayment = false;
this.withAgreement = false;
}
firstUpdated() {
this.addEventListener("edit-content", (e) => {
this.dispatchEvent(
new CustomEvent("go-to", {
detail: { step: e.detail.step },
bubbles: true,
composed: true
})
);
});
}
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) => this._mapOrderStepSummary(step, index)
)}
</div>
${this.order.priceData ? html`
<div class="payment">
<h3>${msg("Rechnung", { id: "pd.order.summary.billing" })}</h3>
<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("Ich akzeptiere die", {
id: "pd.order.summary.agree.link1"
})}
<a
@click="${this._openTermsAndConditions}"
@keypress="${this._openTermsAndConditions}"
>${msg("Allgemeinen Geschäftsbedingungen", {
id: "pd.order.summary.agree.link2"
})}</a
>
</pd-checkbox>
</pd-form-row>
</pd-form-container>
<pd-popup id="agreePopupId">
<div slot="content"><slot name="legal"></slot></div>
</pd-popup>
` : ""}
`;
}
get valid() {
return !this.withAgreement || this._agreeForm?.valid === true;
}
async triggerValidate() {
return this._agreeForm?.triggerValidate();
}
/*
For Booking:
case "zip":
case "booking":
return this._getBookingSummary(index + 1, step);
private _getBookingSummary(index: number, step: PdOrderStep) {
const date = this.order?.selectedDate
? format(this.order.selectedDate, "DD/MM/YYYY")
: undefined;
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>
`;
}
*/
_mapOrderStepSummary(step, index) {
const custom = this._renderCustomOrderStepSummary(step, index);
if (custom) {
return custom;
}
return html`
<pd-edit-content
contentTitle="${step.name}"
stepNumber="${index + 1}"
.data="${step.data}"
>
<slot name="${step.key}"></slot>
</pd-edit-content>
`;
}
_renderCustomOrderStepSummary(step, index) {
switch (step.key) {
case "contacts":
return this._getContactsSummary(index + 1, step);
default:
return null;
}
}
// ?editDisabled="${this.order?.withLogin}" => Alter code, von ticomi-web
_getContactsSummary(index, step) {
const contactData = this.order?.contacts;
return html`
<pd-edit-content contentTitle="${step.name}" stepNumber="${index}">
${contactData ? html`
<pd-order-contacts
?withPayment="${this.withPayment}"
.orderContact="${contactData.orderContact}"
.billingContact="${contactData.billingContact}"
.adminContact="${contactData.adminContact}"
.propertyContact="${contactData.propertyContact}"
summary
></pd-order-contacts>
` : ""}
</pd-edit-content>
`;
}
_openTermsAndConditions(e) {
e.stopPropagation();
const popup = this.shadowRoot?.getElementById(
"agreePopupId"
);
popup?.showPopup();
}
};
PdOrderSummary.styles = [
css`
:host {
display: block;
}
h3 {
color: var(--pd-default-font-title-col);
font-family: var(--pd-default-font-title-family);
font-size: 1.5em;
}
.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;
}
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;
}
@media (max-width: 380px) {
.pay-logo {
max-width: 5rem;
}
}
`
];
__decorateClass([
property({ type: Array })
], PdOrderSummary.prototype, "orderSteps", 2);
__decorateClass([
property({ type: Boolean })
], PdOrderSummary.prototype, "withPayment", 2);
__decorateClass([
property({ type: Boolean })
], PdOrderSummary.prototype, "withAgreement", 2);
__decorateClass([
property({ type: Object })
], PdOrderSummary.prototype, "order", 2);
__decorateClass([
query("#submitSummaryFormId")
], PdOrderSummary.prototype, "_agreeForm", 2);
PdOrderSummary = __decorateClass([
localized()
], PdOrderSummary);
export { PdOrderSummary };