@salla.sa/twilight-components 2.14.468 → 2.14.469

package/dist/collection/components/salla-gifting/salla-gifting.js

@@ -107,6 +107,7 @@ export class SallaGifting {
             this.sectionBtnText = salla.lang.get('blocks.buy_as_gift.send_as_a_gift');
             this.giftDetails = salla.lang.get('blocks.buy_as_gift.gift_details');
             this.selectGiftMessage = salla.lang.get('blocks.buy_as_gift.select_gift_message');
+            this.giftText = salla.lang.get('blocks.buy_as_gift.gift_text');
             this.giftCustomText = salla.lang.get('blocks.buy_as_gift.gift_custom_text');
             this.textId = salla.lang.get('blocks.buy_as_gift.text_id');
             this.incorrectGiftText = salla.lang.get('blocks.buy_as_gift.incorrect_gift_text');
@@ -189,6 +190,13 @@ export class SallaGifting {
         return await salla.api.withoutNotifier(giftDetailsMethod)
             .then((response) => {
             this.gift = response.data;
+            // Backward-compat: older BE responses omit these visibility flags. Treat a
+            // missing flag as enabled so the image/text steps still render until the BE
+            // that returns them is deployed. Use `??` so an explicit `false` is preserved.
+            this.gift.show_texts = this.gift.show_texts ?? true;
+            this.gift.show_images = this.gift.show_images ?? true;
+            this.gift.show_custom_text = this.gift.show_custom_text ?? true;
+            this.gift.show_image_upload = this.gift.show_image_upload ?? true;
             this.senderName = this.gift.sender_name;
             this.disableClass = this.gift?.show_image_upload ? '' : 'pointer-events-none';
             if (!this.gift.show_texts) {
@@ -204,6 +212,11 @@ export class SallaGifting {
                 this.parentClass = 'is-current-step-2';
                 this.step2Animated = true;
             }
+            else if (!this.gift.show_images) {
+                // the slider lays out asynchronously,
+                // so an early measurement would pin it too short and overlap the button.
+                this.setWrapperHeight(1, 250, 5);
+            }
         })
             .catch(e => {
             this.hasError = true;
@@ -250,18 +263,23 @@ export class SallaGifting {
         this.textSelect?.classList.remove('s-form-has-error');
         let dataID = event.target.children[event.target.selectedIndex].getAttribute('data-id');
         let customID = dataID == "custom";
+        // Only the custom-text textarea changes the layout; resize the wrapper just
+        // when it actually appears/disappears so picking or clearing a normal option
+        // doesn't jump the modal height.
+        const customVisibilityChanged = this.showGiftText !== customID;
         this.showGiftText = customID;
         if (dataID) {
             this.selectedGiftTextOption = dataID;
             customID ? this.selectedText = undefined : this.selectedText = event.target.value;
-            this.setWrapperHeight(1, 150, 5);
         }
         else {
             // empty textarea value
             this.textArea.value = '';
             this.selectedText = undefined;
             this.selectedGiftTextOption = undefined;
-            this.setWrapperHeight(1, 150, -15);
+        }
+        if (customVisibilityChanged) {
+            this.setWrapperHeight(1, 150, 5);
         }
     }
     /**
@@ -679,17 +697,18 @@ export class SallaGifting {
     }
     render() {
         return [
-            h("div", { key: '7872fb48bbc18682b2dffec6e45469ed1f348cd2' }, h("salla-list-tile", { key: 'c1885fdb40f33d203b857de13644f43964570f71', class: this.generateClass() }, h("div", { key: '77bd3860e23af43f088ee96b74901e2048baaafc', slot: "title" }, this.vertical ? h("span", { innerHTML: GiftSharing }) : '', h("h3", { key: '72e2e4d99b227b48bdd1f13866c3eea874139096' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: '63c219936015b9d5ee3a8102dbbce748ce0e62c5', slot: "subtitle" }, h("div", { key: '4f31a0c50120697a9b96a2b77411d74f4efc5e66' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: '47f0c995ad0f921a2fdca1c8e5f0e25d897e1fb0', slot: "action" }, h("salla-button", { key: '40145bed2bc9464279d1ae16a358b5a30d255ffd', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: 'd5620606453e0af1a5186f84fa12e1f4957a9747', name: "widget-btn-content" }, h("div", { key: '038ff62e726de1800907f8a8c136a434c7c6d036', class: "s-gifting-widget-action-content" }, h("span", { key: '4e785b4e17db238b6bfeb7646709006c9a4502bb', innerHTML: GiftSharing }), " \u00A0", h("span", { key: '5965ed90aeaf684db53d3241a9287de290f10b4a' }, this.sectionBtnText)))))), h("salla-modal", { key: 'b150b2b29f751fa4db3bfff17c4e617eb7b6db5d', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: '57167453738915bb235da0bc44498f66daaa9454', slot: "loading" }, h("div", { key: 'fd0eab2fd0d46a76dcd00511ec05366862d86d2c', class: "s-gifting-skeleton" }, h("div", { key: '6d2bb659ca06a2cadf203d83e4f5966a78bc5f01', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: 'cb47841822cf9fed5b5c20664617ac52bad135ce', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: 'e9823fc0c00a326b495e4e7e6ff6567f03d1423e', class: "s-gifting-modal-title" }, h("div", { key: '584d50ba2c1bec0fb8e530418be60fc8a0b9c2d8', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: '493b5e6f9fa7a1d45fa52a6f3f4602e5737b9632', height: '15px', width: '150px' })))), h("div", { key: 'd33d22031f8cd6084a1c177ada6657a89ff45ad8', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: '792e91cdcd7ede6896653fa147124cfcdc649a9f', height: '10px', width: '150px' }), h("salla-skeleton", { key: '88ca984320729528e2a3e7cab350a96202a81da6', height: '230px' }), h("salla-skeleton", { key: 'fad81ac6972eaa37766cb489d175516249afb5e6', height: '10px', width: '150px' }), h("salla-skeleton", { key: 'a4e82c29d7940b7af14af4251cc6f97e811be99a', height: '30px' }), h("salla-skeleton", { key: '6339a34ffc0deb925f69b5b0a0ed540d986e0a0b', height: '40px' })))), h("slot", { key: '8fd7cad6fbc2d73fb770ae75301f327906817c6f', name: "header" }), !!this.hasError ?
+            h("div", { key: 'fdb6b68a052a9fa0a0d527edb25e3d7783cc47e9' }, h("salla-list-tile", { key: '3cfb7f37df96e924af7f977fd17f4161e40f83fe', class: this.generateClass() }, h("div", { key: '291a27d70bc43d6edac5c5838d93eaa6a51fb84a', slot: "title" }, this.vertical ? h("span", { innerHTML: GiftSharing }) : '', h("h3", { key: 'c49f119d84a279338c4478872883ba7356e118ce' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: '2ccfb84620132477c0845ffc0bbc257c350cdeb9', slot: "subtitle" }, h("div", { key: '2840a426b505f7fe7ac5c285ab9b74ca4f99ab55' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: 'e3560b1bc8a6c062417f3e2b7a91b5b20b4e1880', slot: "action" }, h("salla-button", { key: '5d96fb354f2845955344d782e693fe27a0fa2652', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: '384ab549dc1942a600cc37c4df26008a8a05e9ab', name: "widget-btn-content" }, h("div", { key: '80d83cd6296f2e93ebbc0eada8737d65c76e4ce0', class: "s-gifting-widget-action-content" }, h("span", { key: '69f6686f6fe23bdab891ab12b295cf918ba0a8fb', innerHTML: GiftSharing }), " \u00A0", h("span", { key: '495c9e9b10dcb69a1335d0345d42a8323b52abef' }, this.sectionBtnText)))))), h("salla-modal", { key: '303a208c394aa2c91f2273b3909208c29266b490', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: '985a4d292ea01cb7ff48b443afe854de6f293abf', slot: "loading" }, h("div", { key: 'ba2b61f3bebf33d04d7132a00d3334a35042646a', class: "s-gifting-skeleton" }, h("div", { key: '4c8d2a5f128407423fd0c3070907d7781fb92283', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: '8585263f0bcb523a5b537c3b13f9c2a0a3a898d0', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: 'dbd2c3efbe5c91563275c09efd832709b6ed6748', class: "s-gifting-modal-title" }, h("div", { key: '4885e29c71001b530be33a4cf585fd77cf434dfd', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: '6c248a65bcc92c51555f0dd8f6d10c6f9d4a2b9a', height: '15px', width: '150px' })))), h("div", { key: '07de64586572cea82b2561344b5922ad4f7cb2c1', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: '9a9e45772c6f5ce30a19ebcb53405032dfc25862', height: '10px', width: '150px' }), h("salla-skeleton", { key: 'd1165987504fb2e5a7d013118b6ca5db2bf1523c', height: '230px' }), h("salla-skeleton", { key: '33cc657831541bcf6916c54c8dffca3b9933ccbb', height: '10px', width: '150px' }), h("salla-skeleton", { key: '46ff78b7725c57c955c73e9a71b9bf1c7340a354', height: '30px' }), h("salla-skeleton", { key: '520bd0a02c0bf4ef6109f014856dfad71d779aca', height: '40px' })))), h("slot", { key: '5519fd6df4f911b042f68f6825a563ce92f16733', name: "header" }), !!this.hasError ?
                 h("salla-placeholder", { alignment: "center" }, h("span", { slot: "title" }, this.errorMessage || salla.lang.get('common.errors.empty_results')), h("span", { slot: "description" }, " "))
                 :
                     [
                         h("div", { class: "s-gifting-modal-header" }, h("span", { class: "s-gifting-modal-icon" }, h("span", { innerHTML: GiftSharing })), h("h2", { class: "s-gifting-modal-title" }, h("div", { class: "s-gifting-modal-badge-wrapper" }, !this.skipStep1() && h("div", { class: "s-gifting-modal-badge" }, h("span", null, h("span", null, this.currentStep), "/2")), h("span", null, this.giftDetails)))),
-                        h("div", { class: "s-gifting-steps-wrapper " + this.parentClass, ref: el => this.stepsWrapper = el }, !this.skipStep1() && h("div", { class: "s-gifting-step-one gift-step-1", ref: el => this.step1Elems = el }, h("div", { class: "s-gifting-modal-uploader-title anime-item" }, this.selectImageForYourGift), this.gift && this.gift.show_images &&
-                            h("div", null, h("div", { class: `s-gifting-modal-uploader anime-item ${this.disableClass}`, ref: el => this.uploader = el }, h("span", { class: "s-gifting-remove-preview pointer-events-auto", onClick: () => this.removePreview(), innerHTML: Cancel }), this.selectImageOrUpload && this.gift && h("salla-file-upload", { "instant-upload": true, name: "image_url", url: salla.url.api(salla.product.api.getUrl('giftImage')), onUploaded: event => this.handleUploadImage(event.detail), labelIdle: this.getFilepondPlaceholder(), onRemoved: () => this.handleRemoveImage() })), h("div", { class: "anime-item" }, !this.uploadedImage && !!this.gift && !!this.gift.gift_images && this.gift.gift_images.length > 0 ?
+                        h("div", { class: "s-gifting-steps-wrapper " + this.parentClass, ref: el => this.stepsWrapper = el }, !this.skipStep1() && h("div", { class: "s-gifting-step-one gift-step-1", ref: el => this.step1Elems = el }, this.gift && this.gift.show_images &&
+                            h("div", { class: "s-gifting-modal-uploader-title anime-item" }, this.selectImageForYourGift), this.gift && this.gift.show_images &&
+                            h("div", { class: "s-gifting-image-section" }, h("div", { class: `s-gifting-modal-uploader anime-item ${this.disableClass}`, ref: el => this.uploader = el }, h("span", { class: "s-gifting-remove-preview pointer-events-auto", onClick: () => this.removePreview(), innerHTML: Cancel }), this.selectImageOrUpload && this.gift && h("salla-file-upload", { "instant-upload": true, name: "image_url", url: salla.url.api(salla.product.api.getUrl('giftImage')), onUploaded: event => this.handleUploadImage(event.detail), labelIdle: this.getFilepondPlaceholder(), onRemoved: () => this.handleRemoveImage() })), h("div", { class: "anime-item" }, !this.uploadedImage && !!this.gift && !!this.gift.gift_images && this.gift.gift_images.length > 0 ?
                                 h("salla-slider", { id: "gifting-slider", loop: false, "controls-outer": true, class: "s-gifting-slider", type: "carousel" }, h("div", { slot: "items" }, this.gift && this.gift.gift_images ?
-                                    this.gift?.gift_images.map((item) => h("a", { class: "s-gifting-clickable s-gifting-image", onClick: () => this.setPreview(item) }, h("img", { style: { "width": "120px" }, src: item.url, alt: `${item.id}` }))) : ''))
+                                    this.gift?.gift_images.map((item) => h("a", { class: "s-gifting-clickable s-gifting-image", onClick: () => this.setPreview(item) }, h("img", { src: item.url, alt: `${item.id}` }))) : ''))
                                 : "")), this.gift && this.gift.show_texts ?
-                            h("div", { class: "anime-item" }, h("div", { class: "s-form-group s-gifting-selectText", ref: el => this.textSelect = el }, h("select", { id: "gift-text-selection", name: "gift-text-selection", class: "s-form-control s-gifting-select", onChange: e => this.toggleGiftText(e) }, h("option", { "data-id": null, selected: true }, this.selectGiftMessage), this.gift && this.gift.gift_texts ?
+                            h("div", { class: "anime-item" }, h("div", { class: "s-gifting-modal-uploader-title s-gifting-text-title" }, this.giftText), h("div", { class: "s-form-group s-gifting-selectText", ref: el => this.textSelect = el }, h("select", { id: "gift-text-selection", name: "gift-text-selection", class: "s-form-control s-gifting-select", onChange: e => this.toggleGiftText(e) }, h("option", { "data-id": null, selected: true }, this.selectGiftMessage), this.gift && this.gift.gift_texts ?
                                 this.gift?.gift_texts.map((txt) => h("option", { "data-id": txt.id, value: txt.text, key: txt.id }, txt.text)) : '', this.gift && this.gift.show_custom_text ? h("option", { "data-id": "custom" }, this.giftCustomText) : null)), h("div", { class: this.showGiftText && this.gift && this.gift.show_custom_text ? "s-form-group s-gifting-textarea shown" : "s-form-group s-gifting-textarea hide", ref: (el) => this.customTextArea = el }, h("label", { htmlFor: "gift-custom-text", class: "s-form-label" }, this.giftCustomText), h("div", { class: "mt-1" }, h("textarea", { onInput: (event) => this.handleTextAreaChange(event), rows: 4, ref: (el) => this.textArea = el, name: "gift-custom-text", id: "gift-custom-text", class: "s-form-control" })))) : null, h("div", { class: "anime-item" }, h("salla-button", { color: "primary", width: "wide", onClick: () => this.goToStep2(!!this.gift?.show_texts) }, h("span", null, this.nextStep)))), h("div", { class: "s-gifting-step-two gift-step-2", style: this.skipStep1() ? { opacity: '1', transform: 'translateX(0)', position: 'relative' } : undefined, ref: el => this.step2Elems = el }, h("div", { class: this.step2ItemClass(this.errors?.['sender_name'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { htmlFor: "sender_name", class: "s-form-label" }, this.senderNameLabel), h("input", { type: "text", class: "s-form-control", name: "sender_name", id: "sender_name", value: this.senderName, onInput: (event) => this.handleSenderName(event), placeholder: "" }), this.errors && this.errors['sender_name'] ?
                             h("span", { class: "s-gifting-error" }, this.errors['sender_name']) : ''), h("div", { class: this.step2ItemClass(this.errors?.['receiver.name'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { htmlFor: "receiver_name", class: "s-form-label" }, this.receiverNameFieldLabel), h("input", { type: "text", class: "s-form-control", name: "receiver_name", id: "receiver_name", value: "", onInput: (event) => this.handleReceiverName(event), placeholder: "" }), this.errors && this.errors['receiver.name'] ?
                             h("span", { class: "s-gifting-error" }, this.errors['receiver.name']) : ''), h("div", { class: this.step2ItemClass(this.errors?.['receiver.mobile'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { class: "s-form-label" }, this.receiverMobileFieldLabel), h("salla-tel-input", { class: "s-gifting-tel-input", phone: this.receiverMobile, countryCode: this.receiverCountryCode, onPhoneEntered: (e) => this.handlePhoneInputChange(e) }), this.errors && this.errors['receiver.mobile'] ?
@@ -701,7 +720,7 @@ export class SallaGifting {
                             h("div", { class: this.step2ItemClass(this.errors?.['receiver.city_id'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { class: "s-form-label", htmlFor: `${this.hostId}-city` }, this.receiverCityFieldLabel), h("salla-searchable-dropdown", { placeholder: this.selectCity, items: this.displayedCities, selectedItem: this.selectedCity, loading: this.loadingCities, searching: this.searchingCities, disabled: this.loadingCities || (this.isKSA && !this.selectedRegionId), required: true, inputId: `${this.hostId}-city`, searchQuery: this.citySearchQuery, clientSearch: !this.enableCityAjaxSearch, dropUp: true, keepParentScroll: true, onItemSelected: (e) => this.handleCitySelected(e.detail), onSearchInput: (e) => this.handleCitySearch(e.detail), onDropdownClosed: () => this.handleCityDropdownClosed() }), this.errors && this.errors['receiver.city_id'] ?
                                 h("span", { class: "s-gifting-error" }, this.errors['receiver.city_id']) : ''), this.isPhysical() &&
                             h("div", { class: this.step2ItemClass('s-gifting-info') }, h("span", { innerHTML: Alert }), h("span", null, this.selectCityInfo)), !this.isPhysical() && h("div", { class: this.step2ItemClass() }, h("label", { class: "s-gifting-schedule s-gifting-clickable", htmlFor: `schedule-${this.hostId}` }, h("input", { type: "checkbox", name: 'schedule', id: `schedule-${this.hostId}`, onChange: () => this.toggleCalendar(), class: "s-checkbox" }), h("span", { class: "s-form-label" }, " ", this.sendLater, " "))), h("div", { class: this.getCalendarClasses(), ref: (el) => this.calendarFormGroup = el }, h("label", { class: "s-form-label" }, this.selectSendDateAndTime), h("salla-datetime-picker", { value: this.deliveryDate, placeholder: this.selectSendDateAndTime, "enable-time": true, "date-format": "Y-m-d h:i K", onPicked: (event) => this.handleDateTimePicker(event) }), h("span", { class: "s-gifting-calendar-hint" }, this.canNotEditOrderAfterSelectDate)), h("div", { class: this.step2ItemClass('s-gifting-step-two-footer') }, !this.skipStep1() && h("a", { href: "#!", innerHTML: LeftArrow, onClick: (e) => this.goToStep1(e) }), h("salla-button", { onClick: () => this.submitForm(), color: "primary", width: 'wide' }, h("span", null, this.sendGift)))))
-                    ], h("slot", { key: 'bdc014a95dab59f9f1e22f71741b5ba5f2ea3ee8', name: "footer" })))
+                    ], h("slot", { key: '9413ec459b3b5dc137a90979990022b7ec1c6453', name: "footer" })))
         ];
     }
     static get is() { return "salla-gifting"; }
@@ -862,6 +881,7 @@ export class SallaGifting {
             "selectImageForYourGift": {},
             "selectImageOrUpload": {},
             "selectGiftMessage": {},
+            "giftText": {},
             "giftCustomText": {},
             "textId": {},
             "incorrectGiftText": {},