@salla.sa/twilight-components 2.14.295 → 2.14.296

package/dist/collection/components/salla-custom-fields/salla-custom-fields.js

@@ -0,0 +1,313 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { h, } from "@stencil/core";
+import CameraIcon from "../../assets/svg/camera.svg";
+import { FormFieldTypes, } from "../salla-user-profile/interfaces";
+export class SallaCustomFields {
+    constructor() {
+        this.isEditable = true;
+        this.fieldErrors = {};
+        this.isSubmitting = false;
+    }
+    get dragAndDropText() {
+        return salla.lang.get("common.uploader.drag_and_drop");
+    }
+    get browseText() {
+        return salla.lang.get("common.uploader.browse");
+    }
+    get saveButtonText() {
+        return salla.lang.get("common.elements.save");
+    }
+    async setFields(fields) {
+        this.parsedFields = fields;
+    }
+    async getFieldValues() {
+        return this.parsedFields?.reduce((values, field) => {
+            values[`custom_fields[${field.id}]`] = field.value;
+            return values;
+        }, {}) || {};
+    }
+    async validateFields() {
+        if (!this.parsedFields)
+            return true;
+        const errors = this.parsedFields.reduce((acc, field) => {
+            if (field.required && (!field.value || field.value === "")) {
+                acc[field.id.toString()] = `${field.label} is required`;
+            }
+            return acc;
+        }, {});
+        this.fieldErrors = errors;
+        return Object.keys(errors).length === 0;
+    }
+    handleFieldChange(field, event) {
+        const value = event.target.value;
+        field.value = value;
+        this.clearFieldError(field.id);
+        const isValid = !(field.required && !value);
+        if (!isValid) {
+            this.setFieldError(field.id, `${field.label} is required`);
+        }
+        this.fieldChanged.emit({ fieldId: field.id, value, isValid });
+    }
+    handleFileUpload(field, event) {
+        const { error, file } = event.detail;
+        const isValid = !error;
+        this.clearFieldError(field.id);
+        if (isValid) {
+            field.value = file;
+        }
+        else {
+            this.setFieldError(field.id, "File upload failed");
+        }
+        this.fileUploaded.emit({ fieldId: field.id, file, isValid });
+    }
+    clearFieldError(fieldId) {
+        this.fieldErrors = { ...this.fieldErrors };
+        delete this.fieldErrors[fieldId];
+    }
+    setFieldError(fieldId, message) {
+        this.fieldErrors = { ...this.fieldErrors, [fieldId]: message };
+    }
+    renderTextField(field) {
+        return (h("input", { disabled: !this.isEditable, type: field.type, id: `custom-field-${field.id}`, value: field.value?.toString() || "", onChange: (e) => this.handleFieldChange(field, e), name: `${field.id}`, class: "form-input", required: field.required }));
+    }
+    renderFileField(field) {
+        return (h("salla-file-upload", { url: salla.url.api('upload'), id: `custom-field-${field.id}`, name: `${field.id}`, type: "registration", value: field.value, height: "120px", onAdded: (e) => this.handleFileUpload(field, e), required: field.required, disabled: !this.isEditable, onUploaded: e => { e.target.value = e.target.value?.url; }, allowRemove: true, onRemoved: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                field.value = "";
+                e.target.value = "";
+            }, payloadName: "files[]", payloadParams: { type: 'registration' }, "instant-upload": true }, h("div", { class: "s-custom-fields-filepond-placeholder" }, h("span", { class: "s-custom-fields-filepond-placeholder-icon" }, h("i", { innerHTML: CameraIcon })), h("p", { class: "s-custom-fields-filepond-placeholder-text" }, this.dragAndDropText), h("span", { class: "filepond--label-action" }, this.browseText))));
+    }
+    renderField(field) {
+        return (h("div", { class: "s-custom-fields-field", key: field.id }, h("label", { class: "s-custom-fields-field-label", htmlFor: `custom-field-${field.id}` }, field.label, field.required && h("span", { class: "s-custom-fields-required" }, "*")), h("div", null, field.type === FormFieldTypes.Photo
+            ? this.renderFileField(field)
+            : this.renderTextField(field), this.fieldErrors[field.id] && (h("p", { class: "s-custom-fields-error" }, this.fieldErrors[field.id])))));
+    }
+    componentWillLoad() {
+        this.parsedFields = this.parseFields(this.fields);
+    }
+    parseFields(fields) {
+        if (!fields)
+            return [];
+        return typeof fields === "string"
+            ? JSON.parse(fields)
+            : Array.isArray(fields) ? fields : [];
+    }
+    async handleSubmit(e) {
+        e.preventDefault();
+        this.isSubmitting = true;
+        try {
+            const payload = {};
+            const form = e.target;
+            const elements = form.elements;
+            for (let i = 0; i < elements.length; i++) {
+                const element = elements[i];
+                if (element.name && !element.name.startsWith("hidden") && element.value) {
+                    payload[element.name] = element.value;
+                }
+            }
+            await salla.api.profile.updateCustomFields({
+                id: salla.config.get("store.id"),
+                fields: payload,
+            });
+        }
+        finally {
+            this.isSubmitting = false;
+        }
+    }
+    render() {
+        if (!this.parsedFields?.length)
+            return null;
+        return (h("form", { class: "s-custom-fields-wrapper", onSubmit: this.handleSubmit }, this.parsedFields.map(field => this.renderField(field)), h("salla-button", { type: "submit", loading: this.isSubmitting, disabled: this.isSubmitting || !this.isEditable, "loader-position": "end", class: "s-custom-fields-submit-btn" }, this.saveButtonText)));
+    }
+    static get is() { return "salla-custom-fields"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["salla-custom-fields.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["salla-custom-fields.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "fields": {
+                "type": "string",
+                "attribute": "fields",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | CustomField[]",
+                    "resolved": "CustomField[] | string",
+                    "references": {
+                        "CustomField": {
+                            "location": "import",
+                            "path": "../salla-user-profile/interfaces",
+                            "id": "src/components/salla-user-profile/interfaces.ts::CustomField"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "isEditable": {
+                "type": "boolean",
+                "attribute": "is-editable",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "fileUploadUrl": {
+                "type": "string",
+                "attribute": "file-upload-url",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "parsedFields": {},
+            "fieldErrors": {},
+            "isSubmitting": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "fieldChanged",
+                "name": "fieldChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{\n    fieldId: string | number;\n    value: unknown;\n    isValid: boolean;\n  }",
+                    "resolved": "{ fieldId: string | number; value: unknown; isValid: boolean; }",
+                    "references": {}
+                }
+            }, {
+                "method": "fileUploaded",
+                "name": "fileUploaded",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{\n    fieldId: string | number;\n    file: File;\n    isValid: boolean;\n  }",
+                    "resolved": "{ fieldId: string | number; file: File; isValid: boolean; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFields": {
+                "complexType": {
+                    "signature": "(fields: CustomField[]) => Promise<void>",
+                    "parameters": [{
+                            "name": "fields",
+                            "type": "CustomField[]",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "CustomField": {
+                            "location": "import",
+                            "path": "../salla-user-profile/interfaces",
+                            "id": "src/components/salla-user-profile/interfaces.ts::CustomField"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "getFieldValues": {
+                "complexType": {
+                    "signature": "() => Promise<{ [key: string]: unknown; }>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<{ [key: string]: unknown; }>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "validateFields": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}

package/dist/collection/components/salla-file-upload/salla-file-upload.js

@@ -42,6 +42,10 @@ export class SallaFileUpload {
          * Set the component to be profile image uploader with a preview and a circular shape
          */
         this.profileImage = false;
+        /**
+         * Allow to pass extra params to be sent with the upload request
+         */
+        this.payloadParams = {};
         /**
          * Accepted file types
          */
@@ -303,11 +307,11 @@ export class SallaFileUpload {
         }
     }
     render() {
-        return (h(Host, { key: 'b5d3d0cf960e703c563f8999d55a99cbfe7a85e3', class: {
+        return (h(Host, { key: '68939496fd8cfcc89a7a5d21e7e4daedab0db536', class: {
                 "s-file-upload": true,
                 "s-file-upload-profile-image": this.profileImage,
                 "s-file-upload-multiple": this.allowMultiple,
-            } }, h("input", { key: '5e9cc8cd73e83acbb0a9f04e15e530563e94988b', type: "file", name: this.name, value: this.value, ref: ele => this.fileUploader = ele, required: this.required, class: "s-file-upload-wrapper s-file-upload-input", accept: this.accept }), this.allowMultiple && this.showMaxCountHint ? h("div", { class: "s-file-upload-hint s-hidden" }, this.max_count_hint(this.maxFilesCount)) : '', h("input", { key: '13a402c070302bfb00d82a24f523a9b764e39037', class: "s-hidden", name: 'hidden-' + this.name, required: this.required, value: this.value, ref: input => this.hiddenInput = input })));
+            } }, h("input", { key: 'adef3f296d759850322faf038602143a0239201d', type: "file", name: this.name, value: this.value, ref: ele => this.fileUploader = ele, required: this.required, class: "s-file-upload-wrapper s-file-upload-input", accept: this.accept }), this.allowMultiple && this.showMaxCountHint ? h("div", { class: "s-file-upload-hint s-hidden" }, this.max_count_hint(this.maxFilesCount)) : '', h("input", { key: 'dc74f8a155eeedd294548f782ed158f1a889b373', class: "s-hidden", name: 'hidden-' + this.name, required: this.required, value: this.value, ref: input => this.hiddenInput = input })));
     }
     componentDidLoad() {
         let files = this.getFiles();
@@ -390,7 +394,7 @@ export class SallaFileUpload {
                 process: {
                     onload: (response) => {
                         let responseData = JSON.parse(response).data;
-                        if (this.allowMultiple && Array.isArray(responseData) && responseData.length > 0) {
+                        if ((this.instantUpload || this.allowMultiple) && Array.isArray(responseData) && responseData.length > 0) {
                             const fileId = `${this.host.id}-${Math.floor(100 + Math.random() * 900)}`;
                             this.uploadedFiles.push({
                                 id: fileId,
@@ -434,6 +438,11 @@ export class SallaFileUpload {
                             formData.append(this.payloadName, this.filepond.getFile(0).file);
                             formData.delete(this.name);
                         }
+                        if (this.payloadParams) {
+                            for (const [k, v] of Object.entries(this.payloadParams)) {
+                                formData.append(k, v);
+                            }
+                        }
                         if (this.cartItemId) {
                             formData.append('cart_item_id', this.cartItemId);
                         }
@@ -626,6 +635,30 @@ export class SallaFileUpload {
                 "setter": false,
                 "reflect": false
             },
+            "payloadParams": {
+                "type": "unknown",
+                "attribute": "payload-params",
+                "mutable": false,
+                "complexType": {
+                    "original": "Record<string,unknown>",
+                    "resolved": "{ [x: string]: unknown; }",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow to pass extra params to be sent with the upload request"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
             "type": {
                 "type": "string",
                 "attribute": "type",

package/dist/collection/components/salla-user-menu/salla-user-menu.js

@@ -15,6 +15,7 @@ import Rate from "../../assets/svg/star2.svg";
 import UserCircle from "../../assets/svg/user-circle.svg";
 import WalletIcon from "../../assets/svg/wallet.svg";
 import loyaltyProgramIcon from "../../assets/svg/gift.svg";
+import SettingstIcon from "../../assets/svg/settings.svg";
 /**
  * @slot trigger - Replaces trigger widget, has replaceable props `{avatar}`, `{hello}`, `{first_name}`, `{last_name}`, `{icon}`.
  * @slot login-btn - Replaces the login button, it must be used with `salla.event.dispatch('login::open')` to open the login modal.
@@ -26,9 +27,10 @@ export class SallaUserMenu {
             orders: OrderIcon,
             pending_orders: PendingOrdersIcon,
             wishlist: WishListIcon,
-            profile: ProfileIcon,
             wallet: WalletIcon,
             loyalty_program: loyaltyProgramIcon,
+            profile: ProfileIcon,
+            settings: SettingstIcon,
         };
         this.accountLoading = false;
         this.opened = false;
@@ -39,6 +41,7 @@ export class SallaUserMenu {
         this.profile = salla.lang.get('common.titles.profile');
         this.rating = salla.lang.get('common.titles.rating');
         this.wallet = salla.lang.get('common.titles.wallet');
+        this.settings = salla.lang.get('common.titles.settings');
         this.loyalty_program = salla.lang.get('pages.loyalty_program.loyalty_points');
         this.logout = salla.lang.get('blocks.header.logout');
         this.hello = salla.lang.get('pages.checkout.hello');
@@ -83,6 +86,7 @@ export class SallaUserMenu {
             this.hello = salla.lang.get('pages.checkout.hello');
             this.rating = salla.lang.get('common.titles.rating');
             this.wallet = salla.lang.get('common.titles.wallet');
+            this.settings = salla.lang.get('common.titles.settings');
             this.loyalty_program = salla.lang.get('pages.loyalty_program.loyalty_points');
             this.logout = salla.lang.get('blocks.header.logout');
         });
@@ -124,8 +128,9 @@ export class SallaUserMenu {
         });
     }
     componentWillLoad() {
-        return new Promise(resolve => salla.onReady(resolve)).then(() => {
-            let trigger = this.host.querySelector('[slot="trigger"]');
+        return salla.onReady().then(() => {
+            this.profileUrl = `${salla.config.get('account.url', 'https://accounts.salla.com')}/${salla.config.get('user.language_code')}/user?store=${salla.config.get('store.id')}&info=${salla.storage.get('token')}`;
+            const trigger = this.host.querySelector('[slot="trigger"]');
             this.triggerSlot =
                 '<div class="s-user-menu-trigger"><div class="s-user-menu-avatar-wrap"><img class="s-user-menu-trigger-avatar" src="{avatar}" alt="{first_name}{last_name}" /></div><div class="s-user-menu-trigger-content"><span class="s-user-menu-trigger-hello">{hello}</span><p class="s-user-menu-trigger-name">{first_name} {last_name}</p></div> <i class="s-user-menu-trigger-icon">{icon}</i></div>';
             if (!trigger) {
@@ -162,8 +167,8 @@ export class SallaUserMenu {
             window.addEventListener('click', this.onClickOutside);
         }
     }
-    menuItemClicked(event, item) {
-        if (item[0] !== 'logout') {
+    menuItemClicked(event, itemKey) {
+        if (itemKey !== 'logout') {
             return;
         }
         event.preventDefault();
@@ -182,18 +187,23 @@ export class SallaUserMenu {
                 's-user-menu-trigger-slot': true,
                 's-user-menu-red-dot': this.hasBadges,
                 's-user-menu-trigger-avatar-only': this.avatarOnly,
-            }, id: "trigger-slot", onClick: e => this.open(e), innerHTML: this.replaceParams(this.triggerSlot) }));
+            }, id: "trigger-slot", onClick: e => this.open(e), onKeyUp: e => this.open(e), innerHTML: this.replaceParams(this.triggerSlot) }));
+    }
+    getItemAnchorLinkAttrs(itemKey) {
+        // Fix loyalty program URL mapping from master
+        const urlKey = itemKey === 'loyalty_program' ? 'loyalty' : itemKey;
+        return { href: salla.url.get(urlKey) };
     }
-    getMenuItem(item, i) {
+    getMenuItem([itemKey, itemValue], i) {
         //todo:: enhancement support slot here
-        if (item[0] === 'wallet' && !window.can_access_wallet)
+        if (itemKey === 'wallet' && !window.can_access_wallet)
             return;
-        if (item[0] === 'loyalty_program' && !salla.config.get('store.features').includes('loyalty-system'))
+        if (itemKey === 'loyalty_program' && !salla.config.get('store.features').includes('loyalty-system'))
             return;
         return (h("li", { class: {
                 's-user-menu-dropdown-item': true,
-                's-user-menu-dropdown-item-logout': i + 1 == Object.entries(this.items).length,
-            } }, h("a", { href: salla.url.get(item[0] === 'loyalty_program' ? 'loyalty' : item[0]), onClick: event => this.menuItemClicked(event, item) }, h("i", { innerHTML: item[1] }, " "), h("span", { class: "s-user-menu-dropdown-item-title" }, this[item[0]]), !['٠', '0', undefined].includes(this.badges[item[0]]) ? (h("span", { class: "s-user-menu-dropdown-item-badge" }, this.badges[item[0]])) : (''))));
+                's-user-menu-dropdown-item-logout': i + 1 === Object.entries(this.items).length,
+            } }, h("a", { ...this.getItemAnchorLinkAttrs(itemKey), class: "s-user-menu-dropdown-item-link", onClick: event => this.menuItemClicked(event, itemKey) }, h("i", { class: "s-user-menu-dropdown-item-prefix", innerHTML: itemValue }), h("span", { class: "s-user-menu-dropdown-item-title" }, this[itemKey]), !['٠', '0', undefined].includes(this.badges[itemKey]) ? (h("span", { class: "s-user-menu-dropdown-item-badge" }, this.badges[itemKey])) : (''))));
     }
     componentShouldUpdate() {
         if (!this.opened) {
@@ -202,7 +212,7 @@ export class SallaUserMenu {
     }
     render() {
         if (!this.is_loggedIn) {
-            return (h(Host, null, h("slot", { name: "login-btn" }, h("button", { class: "s-user-menu-login-btn", onClick: () => salla.event.dispatch('login::open'), innerHTML: UserCircle }))));
+            return (h(Host, null, h("slot", { name: "login-btn" }, h("button", { type: "button", class: "s-user-menu-login-btn", onClick: () => salla.event.dispatch('login::open'), innerHTML: UserCircle }))));
         }
         if (this.inline) {
             return (h(Host, null, h("ul", { class: "s-user-menu-inline" }, Object.entries(this.items).map((item, i) => this.getMenuItem(item, i)))));
@@ -210,10 +220,9 @@ export class SallaUserMenu {
         return (h(Host, null, h("div", { class: {
                 's-user-menu-wrapper': true,
                 's-user-menu-relative-dropdown': this.relativeDropdown,
-            } }, this.getTheHeader(), h("div", { class: { 's-user-menu-toggler': true, opened: this.opened } }, h("div", { class: "s-user-menu-dropdown", onClick: e => e.stopPropagation() }, this.showHeader ? (h("div", { class: "s-user-menu-dropdown-header" }, h("img", { src: this.avatar, alt: `${this.first_name} ${this.last_name}` }), h("div", { class: "s-user-menu-dropdown-header-content" }, h("span", null, this.hello), h("p", null, this.first_name, " ", this.last_name)), h("button", { class: "s-user-menu-dropdown-header-close", innerHTML: Cancel, onClick: () => (this.opened = false) }))) : (''), h("ul", { class: "s-user-menu-dropdown-list" }, Object.entries(this.items).map((item, i) => this.getMenuItem(item, i))))))));
+            } }, this.getTheHeader(), h("div", { class: { 's-user-menu-toggler': true, opened: this.opened } }, h("div", { class: "s-user-menu-dropdown", onClick: e => e.stopPropagation(), onKeyUp: e => e.stopPropagation() }, this.showHeader ? (h("div", { class: "s-user-menu-dropdown-header" }, h("img", { src: this.avatar, alt: `${this.first_name} ${this.last_name}` }), h("div", { class: "s-user-menu-dropdown-header-content" }, h("span", null, this.hello), h("p", null, this.first_name, " ", this.last_name)), h("button", { type: 'button', class: "s-user-menu-dropdown-header-close", innerHTML: Cancel, onClick: () => { this.opened = false; } }))) : (''), h("ul", { class: "s-user-menu-dropdown-list" }, Object.entries(this.items).map((item, i) => this.getMenuItem(item, i))))))));
     }
     componentDidLoad() {
-        //make sure to load the avatar if it's lazy, we use it in Y
         document.lazyLoadInstance?.update(this.host.querySelectorAll('.lazy'));
     }
     static get is() { return "salla-user-menu"; }
@@ -322,6 +331,7 @@ export class SallaUserMenu {
             "profile": {},
             "rating": {},
             "wallet": {},
+            "settings": {},
             "loyalty_program": {},
             "logout": {},
             "hello": {},
@@ -331,6 +341,7 @@ export class SallaUserMenu {
             "is_loggedIn": {},
             "badges": {},
             "hasBadges": {},
+            "profileUrl": {},
             "OrderUpdate": {}
         };
     }