@salla.sa/twilight-components 2.14.457 → 2.14.458

package/dist/collection/components/salla-order-branch/helpers.js

@@ -0,0 +1,50 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+export function parseMaybeJson(value, fallback) {
+    if (typeof value !== 'string') {
+        return (value ?? fallback);
+    }
+    const trimmed = value.trim();
+    if (!trimmed)
+        return fallback;
+    try {
+        return JSON.parse(trimmed);
+    }
+    catch {
+        return fallback;
+    }
+}
+export function parseOrderBranch(value) {
+    if (!value)
+        return undefined;
+    return typeof value === 'string'
+        ? parseMaybeJson(value, undefined)
+        : value;
+}
+export function getBranchPhone(contacts) {
+    const parsed = parseMaybeJson(contacts, null);
+    const phone = parsed && typeof parsed === 'object' ? parsed.phone : '';
+    return typeof phone === 'string' ? phone.trim() : '';
+}
+export function formatTimeTo12h(time24, locale = 'ar') {
+    const [hours, minutes] = String(time24).trim().split(':').map(Number);
+    if (!Number.isFinite(hours) || !Number.isFinite(minutes))
+        return time24;
+    const date = new Date(2000, 0, 1, hours, minutes);
+    const options = { hour: 'numeric', minute: '2-digit', hour12: true };
+    try {
+        return date.toLocaleTimeString(locale, options);
+    }
+    catch {
+        return date.toLocaleTimeString('ar', options);
+    }
+}
+export function normalizeTimeUnit(unit) {
+    const normalized = String(unit || 'hour').toLowerCase();
+    if (normalized.startsWith('min'))
+        return 'minute';
+    if (normalized.startsWith('day'))
+        return 'day';
+    return 'hour';
+}

package/dist/collection/components/salla-order-branch/interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/salla-order-branch/salla-order-branch.css

@@ -0,0 +1,7 @@
+:host {
+  display: block;
+}
+
+.s-order-branch-ready {
+  background-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+}

package/dist/collection/components/salla-order-branch/salla-order-branch.js

@@ -0,0 +1,142 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { h, Host } from "@stencil/core";
+import { formatTimeTo12h, getBranchPhone, normalizeTimeUnit, parseOrderBranch } from "./helpers";
+import navigationIcon from "../../assets/svg/navigation-03.svg";
+import phoneTalkingIcon from "../../assets/svg/phone-talking.svg";
+/**
+ * @salla/ui-components
+ * The `salla-order-branch` component renders pickup branch details for thank-you pages.
+ */
+export class SallaOrderBranch {
+    constructor() {
+        this.isLoading = false;
+    }
+    componentWillLoad() {
+        return this.getBranchData();
+    }
+    async getBranchData() {
+        const orderId = salla.config.get('page.id');
+        if (!orderId)
+            return;
+        this.isLoading = true;
+        try {
+            const response = await salla.order.api.getBranchDetails(orderId);
+            this.branchData = this.parseBranchResponse(response);
+        }
+        catch (error) {
+            this.notifyApiError(error);
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    parseBranchResponse(response) {
+        const data = response?.data?.data || response?.data || response;
+        if (data && typeof data === 'object' && Object.prototype.hasOwnProperty.call(data, 'branch')) {
+            return data.branch ? parseOrderBranch(data.branch) : undefined;
+        }
+        return parseOrderBranch(data);
+    }
+    getApiErrorMessage(error) {
+        return error?.response?.data?.error?.message || error?.response?.data?.message;
+    }
+    notifyApiError(error) {
+        const message = this.getApiErrorMessage(error);
+        if (message) {
+            salla.notify.error(message);
+        }
+    }
+    label(key, fallback) {
+        return salla.lang.getWithDefault(key, fallback);
+    }
+    get preparationText() {
+        const range = this.branchData?.preparation_time_range;
+        if (!range?.from || !range?.to)
+            return '';
+        const fromValue = salla.helpers.number(range.from.value);
+        const toValue = salla.helpers.number(range.to.value);
+        const unitLabel = this.unitLabel(range.to.unit);
+        const amount = fromValue === toValue ? fromValue : `\u2066${fromValue}-${toValue}\u2069`;
+        return this.label('pages.orders.pickup_ready_after', 'جاهز للاستلام بعد :time').replace(':time', `${amount} ${unitLabel}`);
+    }
+    unitLabel(unit) {
+        const normalized = normalizeTimeUnit(unit);
+        if (normalized === 'minute') {
+            return this.label('pages.checkout.minute', 'دقيقة');
+        }
+        if (normalized === 'day') {
+            return this.label('pages.checkout.day', 'يوم');
+        }
+        return this.label('pages.checkout.hour', 'ساعة');
+    }
+    get workingHoursItems() {
+        const branch = this.branchData;
+        if (!branch)
+            return [];
+        if (branch.always_open === true || branch.always_open === 1 || branch.always_open === '1') {
+            return [this.label('pages.orders.branch_always_open', 'مفتوح على مدار الساعة')];
+        }
+        const locale = salla.lang.locale || 'ar';
+        return (branch.working_hours || [])
+            .filter(day => day?.name && day.times?.length)
+            .map(day => {
+            const slot = day.times[0];
+            return `${day.name}: ${formatTimeTo12h(slot.from, locale)} - ${formatTimeTo12h(slot.to, locale)}`;
+        });
+    }
+    get branchAddress() {
+        return this.branchData?.address || '';
+    }
+    get mapUrl() {
+        const location = this.branchData?.location;
+        if (location?.lat == null || location?.lng == null)
+            return undefined;
+        return `https://www.google.com/maps?q=${location.lat},${location.lng}`;
+    }
+    get phone() {
+        return getBranchPhone(this.branchData?.contacts);
+    }
+    renderDetailsColumn() {
+        const phone = this.phone;
+        if (!phone)
+            return null;
+        return (h("div", { class: "s-order-branch-details" }, h("div", { class: "s-order-branch-info-card" }, h("span", { class: "s-order-branch-info-icon", innerHTML: phoneTalkingIcon }), h("div", { class: "s-order-branch-info-text" }, h("span", { class: "s-order-branch-info-label" }, this.label('pages.orders.branch_contacts', 'ارقام التواصل')), h("span", { class: "s-order-branch-info-value", dir: "ltr" }, phone)))));
+    }
+    renderWorkingHoursCard() {
+        const items = this.workingHoursItems;
+        if (!items.length)
+            return null;
+        return (h("div", { class: "s-order-branch-info-card s-order-branch-hours-card" }, h("span", { class: "s-order-branch-info-icon", "aria-hidden": "true" }, h("i", { class: "sicon-calendar-alt" })), h("div", { class: "s-order-branch-info-text" }, h("span", { class: "s-order-branch-info-label" }, this.label('pages.checkout.working_hours', 'ساعات العمل')), h("div", { class: "s-order-branch-hours-list" }, items.map(item => (h("span", { class: "s-order-branch-hours-item" }, item)))))));
+    }
+    renderBranchIdentityCard() {
+        const branch = this.branchData;
+        const address = this.branchAddress;
+        const readyText = this.preparationText;
+        return (h("section", { class: "s-order-branch-card" }, h("div", { class: "s-order-branch-location" }, h("div", { class: "s-order-branch-identity" }, h("span", { class: "s-order-branch-store-icon" }, h("i", { class: "sicon-store", "aria-hidden": "true" })), h("div", { class: "s-order-branch-text" }, h("div", { class: "s-order-branch-name-row" }, branch?.name ? h("span", { class: "s-order-branch-name" }, branch.name) : null, readyText ? h("span", { class: "s-order-branch-ready" }, readyText) : null), address ? h("span", { class: "s-order-branch-address" }, address) : null)), this.mapUrl ? (h("div", { class: "s-order-branch-actions" }, h("a", { href: this.mapUrl, target: "_blank", rel: "noopener noreferrer", class: "s-order-branch-map-link" }, h("span", null, this.label('pages.orders.branch_map', 'موقع الفرع علي الخريطة')), h("span", { class: "s-order-branch-action-icon", innerHTML: navigationIcon })))) : null)));
+    }
+    render() {
+        if (this.isLoading || !this.branchData) {
+            return h(Host, { class: "s-order-branch-wrapper" });
+        }
+        return (h(Host, { class: "s-order-branch-wrapper" }, h("div", { class: "s-order-branch-container" }, this.renderBranchIdentityCard(), this.renderDetailsColumn()), this.renderWorkingHoursCard()));
+    }
+    static get is() { return "salla-order-branch"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["salla-order-branch.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["salla-order-branch.css"]
+        };
+    }
+    static get states() {
+        return {
+            "branchData": {},
+            "isLoading": {}
+        };
+    }
+}