@salla.sa/twilight-components
Version:
Salla Web Component
52 lines (51 loc) • 2.27 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { h, Host } from "@stencil/core";
/**
* @name SallaFulfillmentMethods
* @description Displays product fulfillment options (pickup and delivery) as two side-by-side cards
* @tag salla-fulfillment-methods
*/
export class SallaFulfillmentMethods {
constructor() {
this.methods = [];
this.shouldRender = false;
}
async componentDidLoad() {
await Salla.onReady();
await Salla.lang.onLoaded();
if (!Salla.config.get('store.shipping.support_pickup'))
return;
this.shouldRender = true;
this.setLabels();
}
setLabels() {
this.methods = [
{
id: 'delivery',
title: Salla.lang.getWithDefault('pages.products.promise_delivery_title', 'متاح للتوصيل'),
subtitle: Salla.lang.getWithDefault('pages.products.promise_delivery_subtitle', 'طلبك يوصلك لباب البيت بسهولة.'),
iconClass: 'sicon-location',
},
{
id: 'pickup',
title: Salla.lang.getWithDefault('pages.products.promise_pickup_title', 'متاح للاستلام'),
subtitle: Salla.lang.getWithDefault('pages.products.promise_pickup_subtitle', 'استلام فوري من أقرب فرع.'),
iconClass: 'sicon-store',
},
];
}
render() {
if (!this.shouldRender)
return null;
return (h(Host, { class: "s-fulfillment-methods" }, h("div", { class: "s-fulfillment-methods-list" }, this.methods.map((method) => (h("div", { key: method.id, class: "s-fulfillment-methods-card" }, h("div", { class: "s-fulfillment-methods-content" }, h("div", { class: "s-fulfillment-methods-icon-wrap" }, h("i", { class: `${method.iconClass} s-fulfillment-methods-icon` })), h("div", { class: "s-fulfillment-methods-text" }, h("span", { class: "s-fulfillment-methods-title" }, method.title), h("span", { class: "s-fulfillment-methods-subtitle" }, method.subtitle)))))))));
}
static get is() { return "salla-fulfillment-methods"; }
static get states() {
return {
"methods": {},
"shouldRender": {}
};
}
}