@salla.sa/twilight-components
Version:
Salla Web Component
100 lines (99 loc) • 3.34 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { h, Host } from "@stencil/core";
export class SallaEditOrderButton {
constructor() {
this.order = null;
this.loading = true;
}
async componentWillLoad() {
await salla.onReady();
await this.loadOrder();
}
async onOrderIdChange() {
this.loading = true;
this.order = null;
await this.loadOrder();
}
get paymentUrl() {
return this.order?.customer_editing?.payment_url;
}
async loadOrder() {
const orderId = this.orderId || salla.config.get('page.id');
if (!orderId) {
this.loading = false;
return;
}
try {
const response = await salla.order.api.getDetails(orderId);
this.order = response?.data ?? response ?? null;
}
catch (error) {
salla.logger?.warn?.('[salla-edit-order-button] failed to fetch order details', error);
this.order = null;
}
finally {
this.loading = false;
}
}
renderEditButton() {
return (h("salla-count-down", { prefixText: salla.lang.getWithDefault('pages.orders.edit_within', 'يمكنك التعديل خلال'), buttonHref: this.order?.edit_url, buttonText: salla.lang.getWithDefault('pages.orders.edit_order', 'تعديل الطلب'), buttonIcon: "sicon-edit", date: this.order?.editable_until, horizontal: true, autoSegments: true, withButton: true, labeled: false, size: "sm", color: "primary" }));
}
render() {
if (this.loading || !this.order)
return null;
if (this.order?.is_editable) {
return h(Host, null, this.renderEditButton());
}
if (!this.paymentUrl)
return null;
return (h(Host, null, h("salla-button", { href: this.paymentUrl, color: "primary", size: "small" }, h("i", { class: "sicon-wallet" }), salla.lang.getWithDefault('pages.orders.pay_difference', 'دفع فارق المبلغ'))));
}
static get is() { return "salla-edit-order-button"; }
static get originalStyleUrls() {
return {
"$": ["salla-edit-order-button.scss"]
};
}
static get styleUrls() {
return {
"$": ["salla-edit-order-button.css"]
};
}
static get properties() {
return {
"orderId": {
"type": "any",
"attribute": "order-id",
"mutable": false,
"complexType": {
"original": "string | number",
"resolved": "number | string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The order ID to fetch details for. Falls back to the current page order ID."
},
"getter": false,
"setter": false,
"reflect": false
}
};
}
static get states() {
return {
"order": {},
"loading": {}
};
}
static get watchers() {
return [{
"propName": "orderId",
"methodName": "onOrderIdChange"
}];
}
}