bannoweb-merchant-product-catalog-DuCIWE4W.js

js frontier-ok.com collected 2026-10-04 23:23:11 UTC 61,666 bytes, 1 lines download raw bytes

1import{a as e}from"./standalone-app-Bj-IdwrG.js";import{E as t,_ as n,x as r}from"./institution-DyFDvNu6.js";import{t as i}from"./paths-BjKNBopk.js";import{t as a}from"./page-B8YwBOEr.js";import{_r as o,i as s,o as c,sn as l,vr as u,w as d}from"./main-5Sl8yySz.js";import"./icon-triangle-exclamation-CLDVL6G-.js";import{t as f}from"./if-defined-aheZ8lzV.js";import"./jha-progress-CjUOO3no.js";import"./jha-card-DC-UH8vN.js";import"./jha-card-header-D2XWRnD9.js";import"./jha-button-Dyau4S4K.js";import{a as p,s as m}from"./banno-styles-B3iGgKv1.js";import"./jha-form-switch-CLwMa4i1.js";import"./jha-list-UCQUTbOQ.js";import"./jha-slider-pane-CG5LkspN.js";import"./jha-tab-B1tU4TYA.js";import"./jha-tab-item-CLlXVNd7.js";import"./bannoweb-page-container-G_uPsQAr.js";import"./jha-form-floating-group-DqE4-9IH.js";import{t as h}from"./async-dialog-Bj6--dJf.js";import{v as g}from"./merchant-utils-DCUCb9GZ.js";import{t as _}from"./merchant-tracking-CnFJvGHZ.js";import{t as v}from"./merchant-styles-DQ34e_Ds.js";window.BannowebMerchantProductList=class extends n{static get is(){return`bannoweb-merchant-product-list`}static get styles(){return t`jha-list-item{--jha-list-item-padding-left:0px;--jha-list-item-padding-right:24px;--jha-list-item-border-bottom:none;--jha-border-width:0}.product-item{align-items:center;gap:16px;display:flex}.product-content{border-bottom:1px solid var(--jha-border-color,#e0e0e0);flex:1;align-items:center;gap:16px;min-width:0;margin-right:-24px;padding:16px 24px 16px 0;display:flex}jha-list-item:last-child .product-content{border-bottom:none}jha-list-item:after{display:none}jha-list-item:not(:first-child){padding-top:0}.product-image{object-fit:cover;border-radius:4px;flex-shrink:0;width:64px;height:64px}.product-image-placeholder{background:var(--secondary-content-background-color);border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:64px;height:64px;display:flex}.product-image-placeholder jh-icon-image{width:32px;height:32px;fill:var(--body-text-secondary-color)}.product-info{flex:1;min-width:0}.product-title{color:var(--body-text-primary-color);margin-bottom:4px;font-size:14px;font-weight:500}.product-description{color:var(--body-text-secondary-color);text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:12px;font-weight:400;display:-webkit-box;overflow:hidden}.product-price{color:var(--body-text-primary-color);flex-shrink:0;font-size:14px;font-weight:400}.loading,.error,.empty{flex-direction:column;justify-content:center;align-items:center;gap:8px;min-height:200px;display:flex}.error{color:var(--jha-color-error,#d32f2f)}`}static get properties(){return{merchantController:{type:Object},products:{type:Array},isLoading:{type:Boolean},error:{type:Object}}}constructor(){super(),e(()=>import(`./icon-image-B-SPw5GA.js`),[]),this.merchantController=c.merchantController,this.products,this.isLoading=!1,this.error=null}connectedCallback(){super.connectedCallback(),this.loadProducts()}disconnectedCallback(){super.disconnectedCallback()}async loadProducts(){this.isLoading=!0;try{this.products=await this.merchantController.getMerchantProducts()}catch(e){this.error=e}finally{this.isLoading=!1}}selectProduct(e){this.dispatchEvent(new CustomEvent(`productSelected`,{detail:{product:e},bubbles:!0,composed:!0}))}getProductImageUrl(e){return e?.image?.url||null}hasOptionalAddOns(e){return!e.optionGroups||e.optionGroups.length===0?!1:e.optionGroups.some(e=>e.options?.some(e=>(e.basePriceModifier?parseFloat(e.basePriceModifier):0)>0))}renderLoading(){return r`<div class="loading"> <jha-progress></jha-progress> </div>`}renderProductList(){return this.isLoading?this.renderLoading():this.error?r`<div class="error"> <jh-icon-triangle-exclamation></jh-icon-triangle-exclamation> ${`Failed to load product catalog. Please try again later.`} <jha-button link sync class="reload" @click="${this.loadProducts}"> ${`Try again`} </jha-button> </div>`:this.products.items.length===0?r`<div class="empty">${`Your product catalog is empty.`}</div>`:this.products.items.map(e=>{let t=this.getProductImageUrl(e),n=e.basePrice?parseFloat(e.basePrice).toFixed(2):`0.00`,i=this.hasOptionalAddOns(e)?`${n}+`:n;

1return r`<jha-list-item @click="${()=>this.selectProduct(e)}"> <div class="product-item"> ${t&&t.length>0?r`<img class="product-image" src="${t}" alt="${e.title}">`:r`<div class="product-image-placeholder"> <jh-icon-image></jh-icon-image> </div>`} <div class="product-content"> <div class="product-info"> <div class="product-title">${e.title}</div> <div class="product-description">${e.description}</div> </div> <div class="product-price">$${i}</div> </div> </div> </jha-list-item>`})}render(){return r`<div class="container"> <jha-list>${this.renderProductList()}</jha-list> </div>`}},customElements.define(window.BannowebMerchantProductList.is,window.BannowebMerchantProductList),window.BannowebMerchantProductList,window.BannowebMerchantProductDetails=class extends n{static get is(){return`bannoweb-merchant-product-details`}static get styles(){return t`:host{display:block}.product-details-container{padding:0}.product-image-container{width:100%}.product-image{aspect-ratio:3/2;object-fit:cover;width:100%;height:auto;display:block}.product-image-placeholder{aspect-ratio:3/2;background:var(--secondary-content-background-color);justify-content:center;align-items:center;width:100%;height:auto;display:flex}.product-image-placeholder jh-icon-image{width:56px;height:56px;fill:var(--body-text-secondary-color)}.product-content{padding:20px 24px 24px}.product-title{color:var(--body-text-primary-color);margin-bottom:8px;font-size:20px;font-weight:400}.product-description{color:var(--body-text-primary-color);margin-bottom:20px;font-size:16px;font-weight:400;line-height:1.5}.product-price-container{flex-direction:column;gap:8px;margin-bottom:16px;display:flex}.product-price-label{color:var(--body-text-secondary-color);font-size:14px;font-weight:500}.product-price{color:var(--body-text-primary-color);font-size:14px;font-weight:400}.product-options-label{color:var(--body-text-secondary-color);margin-bottom:8px;font-size:14px;font-weight:500}.product-options-value{color:var(--body-text-primary-color);font-size:14px;font-weight:400}.option-groups-container{margin-top:8px}.option-group{margin-bottom:16px}.option-group:last-child{margin-bottom:0}.option-group-name{color:var(--body-text-primary-color);margin-bottom:4px;font-size:14px;font-weight:400}.option-group-options{color:var(--body-text-secondary-color);font-size:12px;font-weight:400}`}static get properties(){return{product:{type:Object}}}constructor(){super(),e(()=>import(`./icon-image-B-SPw5GA.js`),[]),this.product=null}getProductImageUrl(e){return e?.image?.url||null}render(){if(!this.product)return r`<div class="product-details-container"> <p>No product selected</p> </div>`;let e=this.getProductImageUrl(this.product),t=this.product.basePrice?parseFloat(this.product.basePrice).toFixed(2):`0.00`;return r`<div class="product-details-container"> <div class="product-image-container"> ${e&&e.length>0?r`<img class="product-image" src="${e}" alt="${this.product.title}">`:r`<div class="product-image-placeholder"> <jh-icon-image></jh-icon-image> </div>`} </div> <div class="product-content"> <div class="product-title">${this.product.title}</div> <div class="product-description">${this.product.description}</div> <div class="product-price-container"> <div class="product-price-label">Base price</div> <div class="product-price">$${t}</div> </div> <div class="product-options-label">Option groups</div> <div class="option-groups-container"> ${this.product.optionGroups&&this.product.optionGroups.length>0?this.product.optionGroups.map(e=>r`<div class="option-group"> <div class="option-group-name">${e.name}</div> <div class="option-group-options"> ${e.options.map(e=>{let t=e.basePriceModifier||e.priceModifier?parseFloat(e.basePriceModifier||e.priceModifier):0,n=t>0?` (+$${t.toFixed(2)})`:``;return`${e.name}${n}`}).join(`, `)} </div> </div>`):r`<div class="product-options-value">${`None`}</div>`} </div> </div> </div>`}},customElements.define(window.BannowebMerchantProductDetails.is,window.BannowebMerchantProductDetails),window.BannowebMerchantProductDetails,window.BannowebMerchantProductDeleteDialog=class extends n{

1static get is(){return`bannoweb-merchant-product-delete-dialog`}static get properties(){return{product:{type:Object}}}constructor(){super(),e(()=>import(`./icon-circle-exclamation-CPV1Eg_u.js`).then(e=>e.t),[]),this.product=void 0}closeDialog(){this.dispatchEvent(new CustomEvent(`closeModal`,{bubbles:!0,composed:!0}))}deleteProduct(){this.dispatchEvent(new CustomEvent(`deleteProduct`,{bubbles:!0,composed:!0,detail:this.product})),this.closeDialog()}static get styles(){return t`:host{text-align:center}jh-icon-circle-exclamation{width:125px;height:125px;fill:var(--color-warning)}article{width:60%;margin:50px auto}h1{margin:0;font-size:22px;font-weight:400}p{color:var(--body-text-secondary-color);font-size:16px}jha-button{margin:20px 4px 0}@media (width<=480px){article{width:80%}}`}render(){return r`<article> <jh-icon-circle-exclamation></jh-icon-circle-exclamation> <h1>${`Delete product`}</h1> <p>${`Are you sure you want to delete ${this.product?.title}? All options and groups will also be deleted.`}</p> <jha-button outline-primary sync type="button" @click="${this.closeDialog}"> ${`Cancel`} </jha-button> <jha-button primary sync type="button" @click="${this.deleteProduct}"> ${`Delete`} </jha-button> </article>`}},customElements.define(window.BannowebMerchantProductDeleteDialog.is,window.BannowebMerchantProductDeleteDialog),window.BannowebMerchantProductDeleteDialog,window.BannowebMerchantOptionGroupDeleteDialog=class extends n{static get is(){return`bannoweb-merchant-option-group-delete-dialog`}static get properties(){return{product:{type:Object}}}constructor(){super(),e(()=>import(`./icon-circle-exclamation-CPV1Eg_u.js`).then(e=>e.t),[]),this.product=void 0}closeDialog(){this.dispatchEvent(new CustomEvent(`closeModal`,{bubbles:!0,composed:!0}))}deleteOptionGroup(){this.dispatchEvent(new CustomEvent(`deleteOptionGroup`,{bubbles:!0,composed:!0,detail:this.product})),this.closeDialog()}static get styles(){return t`:host{text-align:center}jh-icon-circle-exclamation{width:125px;height:125px;fill:var(--color-warning)}article{width:60%;margin:50px auto}h1{margin:0;font-size:22px;font-weight:400}p{color:var(--body-text-secondary-color);font-size:16px}jha-button{margin:20px 4px 0}@media (width<=480px){article{width:80%}}`}render(){return r`<article> <jh-icon-circle-exclamation></jh-icon-circle-exclamation> <h1>${`Delete option group`}</h1> <p>${`Are you sure you want to delete this option group? All options will also be deleted.`}</p> <jha-button outline-primary sync type="button" @click="${this.closeDialog}"> ${`Cancel`} </jha-button> <jha-button primary sync type="button" @click="${this.deleteOptionGroup}"> ${`Delete`} </jha-button> </article>`}},customElements.define(window.BannowebMerchantOptionGroupDeleteDialog.is,window.BannowebMerchantOptionGroupDeleteDialog),window.BannowebMerchantOptionGroupDeleteDialog,window.BannowebMerchantOptionDeleteDialog=class extends n{static get is(){return`bannoweb-merchant-option-delete-dialog`}static get properties(){return{option:{type:Object}}}constructor(){super(),e(()=>import(`./icon-circle-exclamation-CPV1Eg_u.js`).then(e=>e.t),[]),this.option=void 0}closeDialog(){this.dispatchEvent(new CustomEvent(`closeModal`,{bubbles:!0,composed:!0}))}deleteOption(){this.dispatchEvent(new CustomEvent(`deleteOption`,{bubbles:!0,composed:!0,detail:{option:this.option}})),this.closeDialog()}static get styles(){return t`:host{text-align:center}jh-icon-circle-exclamation{width:125px;height:125px;fill:var(--color-warning)}article{width:60%;margin:50px auto}h1{margin:0;font-size:22px;font-weight:400}p{color:var(--body-text-secondary-color);font-size:16px}jha-button{margin:20px 4px 0}@media (width<=480px){article{width:80%}}`}getOptionPriceDisplay(){return this.option?.basePriceModifier?` for +$${parseFloat(this.option.basePriceModifier).toFixed(2)}`:``}render(){return r`<article> <jh-icon-circle-exclamation></jh-icon-circle-exclamation> <h1>${`Remove option`}</h1> <p>${this.option?.name||``}${this.getOptionPriceDisplay()} ${`will be removed from the option group.`}</p> <jha-button outline-primary sync type="button" @click="${this.closeDialog}"> ${`Cancel`} </jha-button>

1 <jha-button primary sync type="button" @click="${this.deleteOption}"> ${`Remove`} </jha-button> </article>`}},customElements.define(window.BannowebMerchantOptionDeleteDialog.is,window.BannowebMerchantOptionDeleteDialog),window.BannowebMerchantOptionDeleteDialog,window.BannowebMerchantProductImageUpload=class extends n{static get is(){return`bannoweb-merchant-product-image-upload`}static get properties(){return{image:{type:Object},disabled:{type:Boolean},showProductImageGeneration:{type:Boolean},generateImageDisabled:{type:Boolean},loading:{type:Boolean},_isImageExpanded:{type:Boolean,state:!0},_errorMessage:{type:String,state:!0},_uploading:{type:Boolean,state:!0}}}static get styles(){return[p,t`.upload-container{text-align:left;align-items:center;gap:8px;margin:12px 24px 24px 0;display:flex}.upload-button{justify-content:center;align-items:center;gap:var(--jh-space-200);cursor:pointer;display:inline-flex}.upload-input{display:none}.upload-prompt{color:var(--body-text-secondary-color);margin-top:8px;font-size:14px}.image-preview-container{align-items:center;gap:16px;width:100%;display:flex}.image-preview{object-fit:cover;border:1px solid var(--jha-border-color,#ccc);cursor:pointer;border-radius:4px;width:56px;height:56px}.image-preview.expanded{width:50%;height:auto}.image-info{text-align:left;flex:1}.image-title{color:var(--body-text-primary-color);word-break:break-word;margin-bottom:4px;font-size:14px;font-weight:500}.image-size{color:var(--body-text-secondary-color);font-size:12px}.remove-button{align-self:center}.error-message{color:var(--jha-error-color,#d32f2f);margin-top:8px;font-size:12px}.uploading{color:var(--body-text-secondary-color);align-items:center;gap:8px;font-size:14px;display:flex}jha-button.upload-link{box-sizing:border-box;color:var(--link-button-text-color), var(--body-text-primary-color);fill:var(--link-button-text-color), var(--body-text-primary-color);text-align:left;font-size:15px;text-decoration:none;display:block}jh-icon-arrow-up-from-bracket,jh-icon-sparkles{vertical-align:middle;fill:var(--link-button-text-color,var(--body-text-primary-color))}jh-icon-arrow-up-from-bracket{margin-right:4px}@media (width<=768px){.image-preview-container.expanded{flex-direction:column}.image-preview.expanded{width:80%}}`]}constructor(){super(),e(()=>import(`./icon-arrow-up-from-bracket-D0OfQLDy.js`).then(e=>e.t),[]),e(()=>import(`./icon-sparkles-hhoFvThd.js`),[]),this.image=null,this.disabled=!1,this.showProductImageGeneration=!1,this.generateImageDisabled=!1,this.loading=!1,this._isImageExpanded=!1,this._errorMessage=``,this._uploading=!1,l.evaluate(d.PRODUCT_IMAGE_GENERATION).then(e=>{this.showProductImageGeneration=e})}async handleFileSelect(e){let t=e.target.files[0];if(t){if(![`image/png`,`image/jpeg`,`image/webp`].includes(t.type)){this._errorMessage=`Invalid image type. Please select a PNG, JPEG, or WebP file.`;return}if(t.size>16*1024*1024){this._errorMessage=`Image too large. Maximum size is 16MB.`;return}this._errorMessage=``,this._uploading=!0;try{let e=await c.merchantController.createMerchantProductImage(t);_.trackProductImageAdded(!1);let n=new FileReader;n.onload=n=>{this.image={imageId:e.imageId,url:e.url,previewUrl:n.target.result,title:t.name,size:t.size},this._isImageExpanded=!1,this._uploading=!1,this.dispatchEvent(new CustomEvent(`image-selected`,{bubbles:!0,composed:!0,detail:{image:this.image}}))},n.readAsDataURL(t)}catch{this._uploading=!1,this._errorMessage=`Image upload failed. Please try again.`}}}handleRemoveImage(){this.image=null,this._isImageExpanded=!1,this._errorMessage=``;let e=this.shadowRoot.querySelector(`.upload-input`);e&&(e.value=``),this.dispatchEvent(new CustomEvent(`image-removed`,{bubbles:!0,composed:!0}))}handleUploadClick(){let e=this.shadowRoot.querySelector(`.upload-input`);e&&e.click()}handleImageClick(){this._isImageExpanded=!this._isImageExpanded}handleImageKeyDown(e){(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),this.handleImageClick())}formatFileSize(e){if(e===0)return`0 Bytes`;let t=1024,n=[`Bytes`,`KB`,`MB`],r=Math.floor(Math.log(e)/Math.log(t));return Math.round(e/t**r*100)/100+` `+n[r]}

1renderEmptyState(){return this._uploading||this.loading?r`<div class="uploading"> <jha-progress></jha-progress> </div>`:this.showProductImageGeneration?r`<jha-button class="upload-link" ?disabled="${this.disabled}" sync link @click="${this.handleUploadClick}"> <jh-icon-arrow-up-from-bracket></jh-icon-arrow-up-from-bracket> ${`Upload`} </jha-button> ${`or`} <jha-button link sync @click="${()=>this.dispatchEvent(new CustomEvent(`generate-image`,{bubbles:!0,composed:!0}))}" ?disabled="${this.disabled||this.generateImageDisabled}"> <jh-icon-sparkles></jh-icon-sparkles> ${`Generate image`} </jha-button> ${this._errorMessage?r`<div class="error-message">${this._errorMessage}</div>`:``}`:r`<jha-button class="upload-link" ?disabled="${this.disabled}" sync link @click="${this.handleUploadClick}"> <jh-icon-arrow-up-from-bracket></jh-icon-arrow-up-from-bracket> ${`Upload`} </jha-button> ${this._errorMessage?r`<div class="error-message">${this._errorMessage}</div>`:``}`}renderImagePreview(){return r`<div class="image-preview-container ${this._isImageExpanded?`expanded`:``}"> <img class="image-preview ${this._isImageExpanded?`expanded`:``}" src="${f(this.image.previewUrl||void 0)}" alt="${this.image.title}" role="button" tabindex="0" aria-label="${`Toggle image preview size`}" aria-expanded="${this._isImageExpanded?`true`:`false`}" @click="${this.handleImageClick}" @keydown="${this.handleImageKeyDown}"> <div class="image-info"> <div class="image-title">${this.image.title}</div> ${this.image.size?r`<div class="image-size">${this.formatFileSize(this.image.size)}</div>`:``} </div> <jha-button class="remove-button" link sync ?disabled="${this.disabled}" @click="${this.handleRemoveImage}"> ${`Remove`} </jha-button> </div>`}render(){return r`<div class="upload-container ${this.image?`has-image`:``}"> <input type="file" class="upload-input" accept="image/png,image/jpeg,image/webp" @change="${this.handleFileSelect}" ?disabled="${this.disabled}"> ${this.image?this.renderImagePreview():this.renderEmptyState()} </div>`}},customElements.define(window.BannowebMerchantProductImageUpload.is,window.BannowebMerchantProductImageUpload),window.BannowebMerchantProductImageUpload,window.BannowebMerchantProductCreateForm=class extends n{static get is(){return`bannoweb-merchant-product-create-form`}static get properties(){return{product:{type:Object},mode:{type:String},name:{type:String},description:{type:String},basePrice:{type:String},loading:{type:Boolean,reflect:!0,attribute:`loading`},productImage:{type:Object},generatingProductImage:{type:Boolean},productImageGenerationFlag:{type:Boolean}}}static get styles(){return[p,v,t`:host{padding:0 0 0 24px;display:block}form{padding-top:16px}jha-form-floating-group{flex-direction:column;gap:24px;padding-right:24px;display:flex}jha-form-floating-group.base-price{padding-bottom:24px}bannoweb-merchant-product-image-upload{margin-top:24px;margin-bottom:24px;padding-right:24px}.section-heading{color:var(--body-text-primary-color);margin:0;padding-right:24px;font-size:16px;font-weight:500;line-height:24px}.section-subheading{color:var(--body-text-secondary-color);margin:0;padding-right:24px;font-size:14px;line-height:20px}footer{padding:12px 24px 12px 0}.option-group-content{justify-content:space-between;align-items:center;padding-right:24px;display:flex}.option-group-left{flex-direction:column;align-items:flex-start;display:flex}.option-group-name{margin-bottom:4px;font-weight:500}.option-list{color:var(--body-text-secondary-color);flex-wrap:wrap;gap:8px;font-size:14px;display:flex}.option-item{white-space:nowrap}:host jha-list-item{padding-left:0;padding-right:0}:host jha-list-item:last-child:after{content:"";border-bottom:1px solid var(--jha-border-color);display:block}jh-icon-chevron-right{--jh-icon-color-fill:var(--divider-alternative-color);flex-shrink:0}`]}constructor(){super(),e(()=>import(`./icon-chevron-right-C-tNm2lU.js`).then(e=>e.t),[]),this.product=null,this.mode=y.CREATE,this.handleInputChange=this.handleInputChange.bind(this),this.loading=!1,this.name=``,this.description=``,this.basePrice=``,this.productImage=null,this.generatingProductImage=!1,this._lastInitializedProduct=null,this.productImageGenerationFlag=!1,l.evaluate(d.PRODUCT_IMAGE_GENERATION).then(e=>{this.productImageGenerationFlag=e})}updated(e){super.updated(e);let t=e.has(`product`)&&this.product!==this._lastInitializedProduct,n=e.has(`mode`);(t||n)&&(this.mode===y.EDIT&&this.product?(this.name=this.product.title||``,this.description=this.product.description||``,this.basePrice=String(this.product.basePrice||``),this.product.image&&this.product.image.url?this.productImage={previewUrl:this.product.image.url,title:this.product.title||`Product Image`,size:0,isExisting:!0}:this.productImage=null,this._lastInitializedProduct=this.product):this.mode===y.CREATE&&(this.name=``,this.description=``,this.basePrice=``,(!this.productImage||this.productImage.isExisting)&&(this.productImage=null),this._lastInitializedProduct=null))}get isCreateEnabled(){return this.name.trim()!==``&&this.basePrice.trim()!==``}get isGenerateImageDisabled(){return this.name.trim()===``||this.generatingProductImage||!!this.productImage}handleInputChange(e){let{name:t,value:n}=e.target;switch(t){case`name`:this.name=n.substring(0,150);break;case`description`:this.description=n;break;case`basePrice`:this.basePrice=n;break;default:break}}handleBasePriceBlur(){this.basePrice&&=g(this.basePrice),this.requestUpdate(void 0,void 0)}handleImageSelected(e){this.productImage=e.detail.image}handleImageRemoved(){this.productImage=null,this.mode===y.EDIT&&this.product&&(this.product.image=null)}async handleSave(){if(this.isCreateEnabled){this.loading=!0;try{let e;if(this.mode===y.EDIT&&this.product?.id){let t={title:String(this.name),description:String(this.description||``),basePrice:String(parseFloat(this.basePrice).toFixed(2)),optionGroups:this.product.optionGroups||[],imageId:this.productImage?.imageId||this.product.image?.imageId||null};e=await c.merchantController.editMerchantProduct(this.product.id,t),this.dispatchEvent(new CustomEvent(`product-update`,{bubbles:!0,composed:!0,detail:{product:e}}))}else{let t={title:String(this.name),description:String(this.description||``),basePrice:String(parseFloat(this.basePrice).toFixed(2)),optionGroups:this.product?.optionGroups||[],imageId:this.productImage?.imageId||null};e=await c.merchantController.createMerchantProduct(t),_.trackProductCreated(),this.dispatchEvent(new CustomEvent(`product-create`,{bubbles:!0,composed:!0,detail:{product:e}})),this.name=``,this.description=``,this.basePrice=``,this.productImage=null}this.loading=!1}catch(e){this.loading=!1,await h.showStandardErrorDialog(e)}}}handleAddOptionGroup(){this.dispatchEvent(new CustomEvent(`add-option-group`,{bubbles:!0,composed:!0}))}async handleGenerateImage(e){if(e.preventDefault(),!(this.generatingProductImage||this.name.trim()===``||this.productImage)){this.generatingProductImage=!0;try{let e=await c.merchantController.generateMerchantProductImage(this.name,this.description||``),t=e.type||`image/png`,n=new File([e],`generated-product-image.${t===`image/jpeg`?`jpg`:t===`image/webp`?`webp`:`png`}`,{type:t}),r=await c.merchantController.createMerchantProductImage(n);this.productImage={imageId:r.imageId,url:r.url,previewUrl:r.url,title:n.name,size:n.size}}catch(e){await h.showStandardErrorDialog(e)}finally{this.generatingProductImage=!1}}}handleEditOptionGroup(e){this.dispatchEvent(new CustomEvent(`edit-option-group`,{bubbles:!0,composed:!0,detail:{optionGroup:e}}))}

1renderName(){return r`<jha-form-floating-group outline small ?has-value="${this.name!==``}"> <div class="label">${`Name`}</div> <input required maxlength="150" .value="${this.name}" name="${`name`}" @input="${this.handleInputChange}"> </jha-form-floating-group>`}renderDescription(){return r`<jha-form-floating-group outline small ?has-value="${this.description!==``}"> <div class="label">${`Add optional description`}</div> <input .value="${this.description}" name="${`description`}" @input="${this.handleInputChange}"> </jha-form-floating-group>`}renderBasePrice(){return r`<jha-form-floating-group class="currency-group" outline small ?has-value="${this.basePrice!==``}"> <div class="label">${`Base price`}</div> ${this.basePrice?r`<span class="currency-prefix">$</span>`:``} <input class="currency-input" title="${`Base price`}" outlined type="text" inputmode="decimal" id="basePrice" .value="${this.basePrice}" name="${`basePrice`}" @input="${this.handleInputChange}" @blur="${this.handleBasePriceBlur}" spellcheck="false" autocorrect="off" autocapitalize="off" autocomplete="off"> </jha-form-floating-group>`}renderImageUploadDescription(){return this.productImageGenerationFlag?r`<p class="section-subheading">${`Upload a unique image or generate an image using AI. Uploaded images cannot exceed 16 MB and 64 megapixels. AI-generated images require a product name.`}</p>`:r`<p class="section-subheading">${`Upload a unique PNG, JPEG, or WebP image up to 16MB.`}</p>`}renderOptionGroups(){let e=this.product?.optionGroups||[];return e.length===0?r``:r`<jha-list> ${e.map(e=>r`<jha-list-item @click="${()=>this.handleEditOptionGroup(e)}"> <div class="option-group-content"> <div class="option-group-left"> <div class="option-group-name">${e.name}</div> <div class="option-list"> ${e.options?.map((t,n)=>r`<span class="option-item"> ${t.name} ${t.basePriceModifier||t.priceModifier?r`(+$${t.basePriceModifier||t.priceModifier})`:``}${n<e.options.length-1?`,`:``} </span>`)} </div> </div> <jh-icon-chevron-right></jh-icon-chevron-right> </div> </jha-list-item>`)} </jha-list>`}render(){return r`<div> <form> <p class="section-heading">${`Product details`}</p> ${this.renderName()} ${this.renderDescription()} ${this.renderBasePrice()} <p class="section-heading">${`Image`}</p> ${this.renderImageUploadDescription()} <bannoweb-merchant-product-image-upload .image="${this.productImage}" ?disabled="${this.loading}" ?loading="${this.generatingProductImage}" ?generateImageDisabled="${this.isGenerateImageDisabled}" @generate-image="${this.handleGenerateImage}" @image-selected="${this.handleImageSelected}" @image-removed="${this.handleImageRemoved}"></bannoweb-merchant-product-image-upload> <p class="section-heading">${`Option groups`}</p> ${this.renderOptionGroups()} <jha-button ?disabled="${!1}" ?loading="${!1}" @click="${this.handleAddOptionGroup}" link sync> &plus; ${`Add an option group`} </jha-button> <footer> <jha-button ?disabled="${!this.isCreateEnabled}" .isLoading="${this.loading}" ?loading="${this.loading}" block sync @click="${this.handleSave}"> ${this.mode===y.EDIT?`Save`:`Create`} </jha-button> </footer> </form> </div>`}},customElements.define(window.BannowebMerchantProductCreateForm.is,window.BannowebMerchantProductCreateForm),window.BannowebMerchantProductCreateForm,window.BannowebMerchantProductAddOptionForm=class extends n{static get is(){return`bannoweb-merchant-option-group-create-form`}static get properties(){return{productBasePrice:{type:String},optionGroup:{type:Object},name:{type:String},isAddOptionGroupEnabled:{type:Boolean},enableSelectionRange:{type:Boolean},minAmount:{type:String},maxAmount:{type:String}}}static get styles(){return t`:host{display:block}jha-form-floating-group{margin:0 var(--jha-list-item-horizontal-spacing,24px);flex-direction:column;gap:24px;display:flex}.section-heading{color:var(--body-text-primary-color);margin:0;padding:16px 24px 8px;font-size:16px;font-weight:500;line-height:24px}.section-description{color:var(--body-text-secondary-color);margin:0;margin-left:var(--jha-list-item-horizontal-spacing,24px);font-size:14px;font-weight:400;line-height:20px}form>jha-button{padding:0 var(--jha-list-item-horizontal-spacing,24px)}.selection-range-container{margin-left:var(--jha-list-item-horizontal-spacing,24px);flex-direction:column;gap:16px;display:flex}.switch-container{padding:8px 0;padding-right:var(--jha-list-item-horizontal-spacing,24px);justify-content:space-between;align-items:center;display:flex}.switch-label{color:var(--body-text-primary-color);font-size:14px;font-weight:400}.quantity-pickers{gap:16px;display:flex}.quantity-picker{flex:1}.option-item-content{width:100%;margin-left:var(--jha-list-item-horizontal-spacing,24px);justify-content:space-between;align-items:center;display:flex}.option-item-name{flex:1;font-weight:500}.option-item-right{margin-right:var(--jha-list-item-horizontal-spacing,24px);align-items:center;gap:8px;display:flex}.option-item-price{color:var(--body-text-secondary-color);font-size:14px}:host jha-list-item{padding-left:0}footer{padding:12px var(--jha-list-item-horizontal-spacing,24px)}`}constructor(){super(),e(()=>import(`./icon-plus-CGq-1aop.js`).then(e=>e.t),[]),e(()=>import(`./icon-chevron-right-C-tNm2lU.js`).then(e=>e.t),[]),this.isAddOptionGroupEnabled=!1,this.productBasePrice=``,this.optionGroup=null,this.name=``,this.enableSelectionRange=!1,this.minAmount=`0`,this.maxAmount=`1`,this.handleSwitchChange=this.handleSwitchChange.bind(this),this._lastInitializedOptionGroup=null}

1updated(e){super.updated(e),e.has(`optionGroup`)&&(this._lastInitializedOptionGroup=null)}get isSaveEnabled(){return this.name.trim()!==``&&(this.optionGroup?.options?.length||0)>0}async handleAddOptionGroup(){if(!this.name.trim())return;let e={name:String(this.name),minSelect:parseInt(this.minAmount,10),maxSelect:parseInt(this.maxAmount,10),options:this.optionGroup?.options||[]};this.dispatchEvent(new CustomEvent(`option-group-create`,{bubbles:!0,composed:!0,detail:{optionGroup:e}}))}handleAddOption(){this.dispatchEvent(new CustomEvent(`add-option`,{bubbles:!0,composed:!0}))}handleOptionClick(e){this.dispatchEvent(new CustomEvent(`option-click`,{bubbles:!0,composed:!0,detail:{option:e}}))}handleInputChange(e){let{name:t,value:n}=e.target;switch(t){case`name`:this.name=n,this.optionGroup&&this.dispatchEvent(new CustomEvent(`option-group-update-draft`,{bubbles:!0,composed:!0,detail:{name:n}}));break;case`minAmount`:this.minAmount=n;break;case`maxAmount`:this.maxAmount=n;break;default:break}}handleSwitchChange(e){this.enableSelectionRange=e.detail.value}renderGroupName(){return r`<jha-form-floating-group outline small ?has-value="${this.name!==``}"> <div class="label">${`Name`}</div> <input required .value="${this.name}" name="${`name`}

1" @input="${this.handleInputChange}"> </jha-form-floating-group>`}renderSelectionRange(){return r`<div class="selection-range-container"> <div class="switch-container"> <span class="switch-label">${`Enable selection range`}</span> <jha-form-switch .checked="${this.enableSelectionRange}" @checked-changed="${this.handleSwitchChange}"></jha-form-switch> </div> ${this.enableSelectionRange?r`<div class="quantity-pickers"> <jha-form-floating-group class="quantity-picker" outline small ?has-value="${this.minAmount!==``}"> <div class="label">${`Min amount`}</div> <input type="number" step="1" min="0" .value="${this.minAmount}" name="${`minAmount`}" @input="${this.handleInputChange}"> </jha-form-floating-group> <jha-form-floating-group class="quantity-picker" outline small ?has-value="${this.maxAmount!==``}"> <div class="label">${`Max amount`}</div> <input type="number" step="1" min="0" .value="${this.maxAmount}" name="${`maxAmount`}" @input="${this.handleInputChange}"> </jha-form-floating-group> </div>`:``} </div>`}renderOptionDetails(){let e=this.optionGroup?.options||[];return e.length===0?r``:r`<jha-list> ${e.map(e=>r`<jha-list-item @click="${()=>this.handleOptionClick(e)}"> <div class="option-item-content"> <div class="option-item-name">${e.name}</div> <div class="option-item-right"> ${e.basePriceModifier?r`<div class="option-item-price">+$${parseFloat(e.basePriceModifier).toFixed(2)}</div>`:``} <jh-icon-chevron-right></jh-icon-chevron-right> </div> </div> </jha-list-item>`)} </jha-list>`}render(){return this.optionGroup!==this._lastInitializedOptionGroup&&(this.optionGroup?(this.name=this.optionGroup.name||``,this.enableSelectionRange=this.optionGroup.enableSelectionRange||!1,this.minAmount=String(this.optionGroup.minimum||0),this.maxAmount=String(this.optionGroup.maximum||1)):(this.name=``,this.enableSelectionRange=!1,this.minAmount=`0`,this.maxAmount=`1`),this._lastInitializedOptionGroup=this.optionGroup),r`<div> <form> <p class="section-heading">${`Group name`}</p> ${this.renderGroupName()} <p class="section-heading">${`Selection`}</p> ${this.renderSelectionRange()} <p class="section-heading">${`Option details`}</p> <p class="section-description"> ${`Set how much an option changes the base price of the product ${this.productBasePrice}.`} </p> ${this.renderOptionDetails()} <jha-button link sync @click="${this.handleAddOption}"> &plus; ${`Add an option`} </jha-button> <footer> <jha-button ?disabled="${!this.isSaveEnabled}" block sync @click="${this.handleAddOptionGroup}"> ${`Save`} </jha-button> </footer> </form> </div>`}},customElements.define(window.BannowebMerchantProductAddOptionForm.is,window.BannowebMerchantProductAddOptionForm),window.BannowebMerchantProductAddOptionForm,window.BannowebMerchantOptionAddOrEditForm=class extends n{static get is(){return`bannoweb-merchant-option-add-or-edit-form`}static get properties(){return{mode:{type:String},option:{type:Object},optionGroup:{type:Object},name:{type:String},basePriceModifier:{type:String},loading:{type:Boolean,reflect:!0,attribute:`loading`}}}static get styles(){return[p,v,t`:host{padding:0 24px;display:block}jha-form-floating-group{flex-direction:column;gap:24px;display:flex}.section-heading{color:var(--body-text-primary-color);margin:0;padding:16px 0;font-size:16px;font-weight:500;line-height:24px}footer{padding:12px 0}`]}constructor(){super(),this.handleInputChange=this.handleInputChange.bind(this),this.mode=y.CREATE,this.option=null,this.optionGroup=null,this.loading=!1,this.name=``,this.basePriceModifier=``}updated(e){super.updated(e),(e.has(`option`)||e.has(`mode`))&&this.mode===y.EDIT&&this.option&&(this.name=this.option.name||``,this.basePriceModifier=String(this.option.basePriceModifier||``)),e.has(`mode`)&&this.mode===y.CREATE&&(this.name=``,this.basePriceModifier=``)}get isSaveEnabled(){return this.name.trim()!==``}handleInputChange(e){let{name:t,value:n}=e.target;switch(t){case`name`:this.name=n.substring(0,150);break;case`basePriceModifier`:this.basePriceModifier=n;break;default:break}}handleBasePriceModifierBlur(){this.basePriceModifier&&=g(this.basePriceModifier),this.requestUpdate(void 0,void 0)}async handleSave(){if(!this.isSaveEnabled)return;this.loading=!0;let e={name:String(this.name),basePriceModifier:this.basePriceModifier?String(parseFloat(this.basePriceModifier).toFixed(2)):``};try{this.mode===y.EDIT&&this.option?this.dispatchEvent(new CustomEvent(`option-update`,{bubbles:!0,composed:!0,detail:{option:e,originalOption:this.option}})):(this.dispatchEvent(new CustomEvent(`option-create`,{bubbles:!0,composed:!0,detail:{option:e}})),this.name=``,this.basePriceModifier=``),this.loading=!1}catch(e){this.loading=!1,await h.showStandardErrorDialog(e)}}

1renderName(){return r`<jha-form-floating-group outline small ?has-value="${this.name!==``}"> <div class="label">${`Name`}</div> <input required maxlength="150" .value="${this.name}" name="${`name`}" @input="${this.handleInputChange}"> </jha-form-floating-group>`}renderBasePriceModifier(){return r`<jha-form-floating-group class="currency-group" outline small ?has-value="${this.basePriceModifier!==``}"> <div class="label">${`Price modifier`}</div> ${this.basePriceModifier?r`<span class="currency-prefix">$</span>`:``} <input class="currency-input" title="${`Price modifier`}" outlined type="text" inputmode="decimal" id="basePriceModifier" .value="${this.basePriceModifier}" name="${`basePriceModifier`}" @input="${this.handleInputChange}" @blur="${this.handleBasePriceModifierBlur}" spellcheck="false" autocorrect="off" autocapitalize="off" autocomplete="off"> </jha-form-floating-group>`}render(){return r`<div> <form> <p class="section-heading">${`Option details`}</p> ${this.renderName()} ${this.renderBasePriceModifier()} <footer> <jha-button ?disabled="${!this.isSaveEnabled}" ?loading="${this.loading}" block sync @click="${this.handleSave}"> ${`Save`} </jha-button> </footer> </form> </div>`}},customElements.define(window.BannowebMerchantOptionAddOrEditForm.is,window.BannowebMerchantOptionAddOrEditForm),window.BannowebMerchantOptionAddOrEditForm,window.BannowebMerchantOptionGroupEditForm=class extends n{static get is(){return`bannoweb-merchant-option-group-edit-form`}static get properties(){return{product:{type:Object},optionGroup:{type:Object},groupName:{type:String},enableSelectionRange:{type:Boolean},minAmount:{type:String},maxAmount:{type:String},loading:{type:Boolean,reflect:!0,attribute:`loading`}}}static get styles(){return[p,t`:host{padding:0 0 0 24px;display:block}jha-form-floating-group{flex-direction:column;gap:24px;padding-right:24px;display:flex}.section-heading{color:var(--body-text-primary-color);margin:0;padding:16px 24px 0 0;font-size:16px;font-weight:500;line-height:24px}.section-subheading{color:var(--body-text-secondary-color);margin:0 0 16px;padding-right:24px;font-size:14px;font-weight:400;line-height:1.5}.selection-range-container{flex-direction:column;gap:16px;padding-right:24px;display:flex}.switch-container{justify-content:space-between;align-items:center;padding:8px 0;display:flex}.switch-label{color:var(--body-text-primary-color);font-size:14px;font-weight:400}.quantity-pickers{gap:16px;display:flex}.quantity-picker{flex:1}footer{padding:12px 24px 12px 0}.option-item-content{justify-content:space-between;align-items:center;width:100%;display:flex}.option-item-name{flex:1;font-weight:500}.option-item-right{align-items:center;gap:8px;display:flex}.option-item-price{color:var(--body-text-secondary-color);font-size:14px}:host jha-list-item{padding-left:0}:host jha-list-item:last-child:after{content:"";border-bottom:1px solid var(--jha-border-color);display:block}jh-icon-chevron-right{--jh-icon-color-fill:var(--divider-alternative-color)}`]}constructor(){super(),e(()=>import(`./icon-chevron-right-C-tNm2lU.js`).then(e=>e.t),[]),this.handleInputChange=this.handleInputChange.bind(this),this.handleSwitchChange=this.handleSwitchChange.bind(this),this.product=null,this.optionGroup=null,this.loading=!1,this.groupName=``,this.enableSelectionRange=!1,this.minAmount=`0`,this.maxAmount=`1`,this._lastInitializedOptionGroup=null}updated(e){super.updated(e),e.has(`optionGroup`)&&(this._lastInitializedOptionGroup=null)}get isSaveEnabled(){return this.groupName.trim()!==``}handleInputChange(e){let{name:t,value:n}=e.target;switch(t){case`groupName`:this.groupName=n.substring(0,150);break;case`minAmount`:this.minAmount=n;break;case`maxAmount`:this.maxAmount=n;break;default:break}}handleSwitchChange(e){this.enableSelectionRange=e.detail.value}async handleSave(){if(this.isSaveEnabled){this.loading=!0;try{let e={...this.optionGroup,name:this.groupName,enableSelectionRange:this.enableSelectionRange,minAmount:parseInt(this.minAmount,10),maxAmount:parseInt(this.maxAmount,10)},t=this.product.optionGroups.map(t=>t.name===this.optionGroup.name?e:t),n;

1if(this.product.id){let e={title:this.product.title,description:this.product.description||``,basePrice:String(parseFloat(this.product.basePrice).toFixed(2)),optionGroups:t,imageId:this.product.image?.imageId||null};n=await c.merchantController.editMerchantProduct(this.product.id,e),this.product.optionGroups=n.optionGroups}else this.product.optionGroups=t;this.dispatchEvent(new CustomEvent(`option-group-update`,{bubbles:!0,composed:!0,detail:{product:n}})),this.loading=!1}catch(e){this.loading=!1,await h.showStandardErrorDialog(e)}}}handleOptionClick(e){this.dispatchEvent(new CustomEvent(`option-click`,{bubbles:!0,composed:!0,detail:{option:e}}))}handleAddOption(){this.dispatchEvent(new CustomEvent(`add-option`,{bubbles:!0,composed:!0}))}renderGroupName(){return r`<jha-form-floating-group outline small ?has-value="${this.groupName!==``}"> <div class="label">${`Group name`}</div> <input required maxlength="150" .value="${this.groupName}" name="${`groupName`}" @input="${this.handleInputChange}"> </jha-form-floating-group>`}renderSelectionRange(){return r`<div class="selection-range-container"> <div class="switch-container"> <span class="switch-label">${`Enable selection range`}</span> <jha-form-switch .checked="${this.enableSelectionRange}" @checked-changed="${this.handleSwitchChange}"></jha-form-switch> </div> ${this.enableSelectionRange?r`<div class="quantity-pickers"> <jha-form-floating-group class="quantity-picker" outline small ?has-value="${this.minAmount!==``}"> <div class="label">${`Min amount`}</div> <input type="number" step="1" min="0" .value="${this.minAmount}" name="${`minAmount`}

1" @input="${this.handleInputChange}"> </jha-form-floating-group> <jha-form-floating-group class="quantity-picker" outline small ?has-value="${this.maxAmount!==``}"> <div class="label">${`Max amount`}</div> <input type="number" step="1" min="0" .value="${this.maxAmount}" name="${`maxAmount`}" @input="${this.handleInputChange}"> </jha-form-floating-group> </div>`:``} </div>`}renderOptionDetails(){let e=this.optionGroup?.options||[];return e.length===0?r``:r`<jha-list> ${e.map(e=>r`<jha-list-item @click="${()=>this.handleOptionClick(e)}"> <div class="option-item-content"> <div class="option-item-name">${e.name}</div> <div class="option-item-right"> ${e.basePriceModifier||e.priceModifier?r`<div class="option-item-price"> +$${parseFloat(e.basePriceModifier||e.priceModifier).toFixed(2)} </div>`:``} <jh-icon-chevron-right></jh-icon-chevron-right> </div> </div> </jha-list-item>`)} </jha-list>`}render(){this.optionGroup!==this._lastInitializedOptionGroup&&(this.optionGroup?(this.groupName=this.optionGroup.name||``,this.enableSelectionRange=this.optionGroup.enableSelectionRange||!1,this.minAmount=String(this.optionGroup.minAmount||0),this.maxAmount=String(this.optionGroup.maxAmount||1)):(this.groupName=``,this.enableSelectionRange=!1,this.minAmount=`0`,this.maxAmount=`1`),this._lastInitializedOptionGroup=this.optionGroup);let e=this.product?.basePrice?`($${parseFloat(this.product.basePrice).toFixed(2)})`:`($0.00)`;return r`<div> <form> <p class="section-heading">${`Group name`}</p> ${this.renderGroupName()} <p class="section-heading">${`Selection`}</p> ${this.renderSelectionRange()} <p class="section-heading">${`Option details`}</p> <p class="section-subheading">${`Set how much an option changes the base price of the product ${e}.`}</p> ${this.renderOptionDetails()} <jha-button link sync @click="${this.handleAddOption}"> &plus; ${`Add an option`} </jha-button> <footer> <jha-button ?disabled="${!this.isSaveEnabled}" .isLoading="${this.loading}" ?loading="${this.loading}" block sync @click="${this.handleSave}"> ${`Save`} </jha-button> </footer> </form> </div>`}},customElements.define(window.BannowebMerchantOptionGroupEditForm.is,window.BannowebMerchantOptionGroupEditForm),window.BannowebMerchantOptionGroupEditForm,window.BannowebMerchantOptionEditForm=class extends n{static get is(){return`bannoweb-merchant-option-edit-form`}static get properties(){return{product:{type:Object},optionGroup:{type:Object},option:{type:Object},name:{type:String},basePriceModifier:{type:String},loading:{type:Boolean,reflect:!0,attribute:`loading`}}}static get styles(){return[p,t`:host{padding:0 24px;display:block}jha-form-floating-group{flex-direction:column;gap:24px;display:flex}.section-heading{color:var(--body-text-primary-color);margin:0;padding:16px 0;font-size:16px;font-weight:500;line-height:24px}.section-subheading{color:var(--body-text-primary-color);margin:16px 0;font-size:14px;font-weight:400;line-height:1.5}footer{padding:12px 0}`]}constructor(){super(),this.handleInputChange=this.handleInputChange.bind(this),this.handleSave=this.handleSave.bind(this),this.product=null,this.optionGroup=null,this.option=null,this.loading=!1,this.name=``,this.basePriceModifier=``,this._lastInitializedOption=null,this._initialized=!1}updated(e){super.updated(e),e.has(`option`)&&(this._initialized=!1)}get isSaveEnabled(){return this.name.trim()!==``}handleInputChange(e){let{name:t,value:n}=e.target;switch(t){case`name`:this.name=n.substring(0,150);break;case`basePriceModifier`:this.basePriceModifier=n;break;default:break}}async handleSave(){if(this.isSaveEnabled){this.loading=!0;try{let e={...this.option,name:this.name,basePriceModifier:this.basePriceModifier?String(parseFloat(this.basePriceModifier).toFixed(2)):``},t=this.optionGroup.options.map(t=>t.name===this.option.name?e:t),n={...this.optionGroup,options:t},r=this.product.optionGroups.map(e=>e.name===this.optionGroup.name?n:e),i;if(this.product.id){let e={title:this.product.title,description:this.product.description||``,basePrice:String(parseFloat(this.product.basePrice).toFixed(2)),optionGroups:r,imageId:this.product.image?.imageId||null};i=await c.merchantController.editMerchantProduct(this.product.id,e)}else this.product.optionGroups=r;this.dispatchEvent(new CustomEvent(`option-update`,{bubbles:!0,composed:!0,detail:{product:i}})),this.loading=!1}catch(e){this.loading=!1,await h.showStandardErrorDialog(e)}}}

1renderName(){return r`<jha-form-floating-group outline small ?has-value="${this.name!==``}"> <div class="label">${`Name`}</div> <input required maxlength="150" .value="${this.name}" name="${`name`}" @input="${this.handleInputChange}"> </jha-form-floating-group>`}renderBasePriceModifier(){return r`<jha-form-floating-group outline small ?has-value="${this.basePriceModifier!==``}"> <div class="label">${`Price modifier`}</div> <input type="number" step="0.01" min="0" .value="${this.basePriceModifier}" name="${`basePriceModifier`}" @input="${this.handleInputChange}"> </jha-form-floating-group>`}render(){if(this.option!==this._lastInitializedOption){if(this.option){this.name=this.option.name||``;let e=this.option.basePriceModifier||this.option.priceModifier||``;this.basePriceModifier=String(e)}else this.name=``,this.basePriceModifier=``;this._lastInitializedOption=this.option}return r`<div> <form> <p class="section-subheading">${`Set how much an option changes the base price of the product ${this.product?.basePrice?`($${parseFloat(this.product.basePrice).toFixed(2)})`:`($0.00)`}.`}</p> ${this.renderName()} ${this.renderBasePriceModifier()} <footer> <jha-button ?disabled="${!this.isSaveEnabled}" .isLoading="${this.loading}" ?loading="${this.loading}" block sync @click="${this.handleSave}"> ${`Save`} </jha-button> </footer> </form> </div>`}},customElements.define(window.BannowebMerchantOptionEditForm.is,window.BannowebMerchantOptionEditForm),window.BannowebMerchantOptionEditForm;var y={CREATE:`CREATE`,EDIT:`EDIT`},b={PRODUCT_CATALOG:`productCatalog`,PRODUCT_DETAILS:`productDetails`,PRODUCT_EDIT:`productEdit`,PRODUCT_ADD_OPTION:`productAddOption`,PRODUCT_EDIT_OPTION:`productEditOption`,PRODUCT_CREATE:`productCreate`,PRODUCT_OPTION_GROUP:`productOptionGroup`,PRODUCT_ADD_OPTION_GROUP:`productAddOptionGroup`,PRODUCT_EDIT_OPTION_GROUP:`productEditOptionGroup`,OPTION_GROUP_EDIT_OPTION:`optionGroupEditOption`},x=u(n,`fadeinup`);window.BannowebMerchantProductCatalog=class extends x{static get is(){return`bannoweb-merchant-product-catalog`}static get properties(){return{focusedPane:{type:String},selectedProduct:{type:Object},selectedOptionGroup:{type:Object},selectedOption:{type:Object},isLoading:{type:Boolean},merchantController:{type:Object},isCreatingNewProduct:{type:Boolean},previousPane:{type:String},draftOptionGroup:{type:Object}}}constructor(){super(),e(()=>import(`./icon-chevron-left-f3OZxuwt.js`).then(e=>e.t),[]),e(()=>import(`./icon-plus-CGq-1aop.js`).then(e=>e.t),[]),e(()=>import(`./icon-trash-can-BdGHS1VD.js`).then(e=>e.t),[]),e(()=>import(`./icon-pencil-BBviniUl.js`),[]),this.focusedPane=b.PRODUCT_CATALOG,this.selectedProduct=null,this.selectedOptionGroup=null,this.selectedOption=null,this.isLoading=!1,this.merchantController=c.merchantController,this.isCreatingNewProduct=!1,this.previousPane=null,this.draftOptionGroup=null}updated(e){super.updated(e),e.has(`focusedPane`)&&_.trackScreenView(_.productsScreenForPane(this.focusedPane))}handleBackClick(){switch(this.focusedPane){case b.PRODUCT_CATALOG:o.go(i.BANNOWEB_MERCHANT_DASHBOARD);break;case b.PRODUCT_CREATE:this.focusedPane=b.PRODUCT_CATALOG;break;case b.PRODUCT_DETAILS:this.focusedPane=b.PRODUCT_CATALOG;break;case b.PRODUCT_EDIT:this.focusedPane=b.PRODUCT_DETAILS;break;case b.PRODUCT_ADD_OPTION:this.focusedPane=this.previousPane||b.PRODUCT_ADD_OPTION_GROUP,this.previousPane=null;break;case b.PRODUCT_EDIT_OPTION:this.focusedPane=b.PRODUCT_EDIT;break;case b.PRODUCT_ADD_OPTION_GROUP:this.focusedPane=this.isCreatingNewProduct?b.PRODUCT_CREATE:b.PRODUCT_EDIT;break;case b.PRODUCT_EDIT_OPTION_GROUP:this.focusedPane=this.isCreatingNewProduct?b.PRODUCT_CREATE:b.PRODUCT_EDIT;break;case b.OPTION_GROUP_EDIT_OPTION:this.focusedPane=b.PRODUCT_EDIT_OPTION_GROUP;break;default:break}}async routeEnter(e,t,n,r){return a.setTitleAndTrack(`Merchant`,o.getRouteUrlWithoutParams(r),n),super.routeEnter(e,t,n,r)}async handleAddProductClick(){this.selectedProduct=null,this.isCreatingNewProduct=!0,this.focusedPane=b.PRODUCT_CREATE}async handleEditProductClick(){this.selectedProduct&&(this.isCreatingNewProduct=!1,this.focusedPane=b.PRODUCT_EDIT)}async handleDeleteProductClick(){let e=new window.BannowebMerchantProductDeleteDialog;e.product=this.selectedProduct,e.addEventListener(`deleteProduct`,this.handleConfirmDeleteProduct.bind(this)),this.dispatchEvent(new s(e))}async handleConfirmDeleteProduct(){if(this.selectedProduct)try{let e=this.selectedProduct.id;await this.merchantController.deleteMerchantProduct(e),_.trackProductDeleted(),this.merchantController.catalogProducts.remove(this.selectedProduct),this.focusedPane=b.PRODUCT_CATALOG,this.selectedProduct=null;let t=this.shadowRoot.querySelector(`bannoweb-merchant-product-list`);t&&await t.loadProducts()}catch(e){h.showStandardErrorDialog({error:e}),this.focusedPane=b.PRODUCT_CATALOG}}async handleDeleteOptionGroupClick(){let e=new window.BannowebMerchantOptionGroupDeleteDialog;e.product=this.selectedProduct,e.addEventListener(`deleteOptionGroup`,this.handleConfirmDeleteOptionGroup.bind(this)),this.dispatchEvent(new s(e))}async handleConfirmDeleteOptionGroup(){try{let e=this.selectedProduct.optionGroups.filter(e=>e!==this.selectedOptionGroup),t={title:this.selectedProduct.title,de

1scription:this.selectedProduct.description||``,basePrice:String(parseFloat(this.selectedProduct.basePrice).toFixed(2)),optionGroups:e,imageId:this.selectedProduct.imageId||this.selectedProduct.image?.imageId||null},n=await c.merchantController.editMerchantProduct(this.selectedProduct.id,t);this.selectedProduct=n,this.selectedOptionGroup=null,this.focusedPane=b.PRODUCT_DETAILS;let r=this.shadowRoot.querySelector(`bannoweb-merchant-product-list`);r&&await r.loadProducts()}catch(e){h.showStandardErrorDialog({error:e}),this.focusedPane=b.PRODUCT_DETAILS}}goToSelectedProduct(){this.focusedPane=b.PRODUCT_DETAILS}handleSelectedProduct(e){let{product:t}=e.detail;this.selectedProduct=t,this.focusedPane=b.PRODUCT_DETAILS}async handleProductCreate(e){let{product:t}=e.detail;this.selectedProduct=t,this.isCreatingNewProduct=!1,this.focusedPane=b.PRODUCT_DETAILS;let n=this.shadowRoot.querySelector(`bannoweb-merchant-product-list`);n&&await n.loadProducts()}async handleProductUpdate(e){let{product:t}=e.detail;this.selectedProduct=t,this.focusedPane=b.PRODUCT_DETAILS;let n=this.shadowRoot.querySelector(`bannoweb-merchant-product-list`);n&&await n.loadProducts()}handleAddOptionGroup(){this.draftOptionGroup={name:``,minSelect:0,maxSelect:1,options:[]},this.focusedPane=b.PRODUCT_ADD_OPTION_GROUP}handleAddOption(){this.selectedOption=null,this.previousPane=this.focusedPane,this.focusedPane=b.PRODUCT_ADD_OPTION}async handleOptionCreate(e){let{option:t}=e.detail;if(this.selectedOptionGroup&&this.previousPane===b.PRODUCT_EDIT_OPTION_GROUP)try{let e={...this.selectedOptionGroup,options:[...this.selectedOptionGroup.options||[],t]},n=this.selectedProduct.optionGroups.map(t=>t.name===this.selectedOptionGroup.name?e:t),r={title:this.selectedProduct.title,description:this.selectedProduct.description||``,basePrice:String(parseFloat(this.selectedProduct.basePrice).toFixed(2)),optionGroups:n,imageId:this.selectedProduct.image?.imageId||null},i=await c.merchantController.editMerchantProduct(this.selectedProduct.id,r);this.selectedProduct=i,this.selectedOptionGroup=i.optionGroups?.find(e=>e.name===this.selectedOptionGroup.name),this.focusedPane=b.PRODUCT_EDIT_OPTION_GROUP,this.previousPane=null}catch(e){await h.showStandardErrorDialog(e)}else this.draftOptionGroup&&={...this.draftOptionGroup,options:[...this.draftOptionGroup.options,t]},this.focusedPane=this.previousPane||b.PRODUCT_ADD_OPTION_GROUP,this.previousPane=null}handleOptionUpdateDraft(e){let{option:t}=e.detail;if(this.draftOptionGroup){let e=this.draftOptionGroup.options.map(e=>e===this.selectedOption?t:e);this.draftOptionGroup={...this.draftOptionGroup,options:e},this.selectedOption=t}this.focusedPane=b.PRODUCT_ADD_OPTION_GROUP,this.previousPane=null}handleOptionGroupUpdateDraft(e){let{name:t}=e.detail;this.draftOptionGroup&&(this.draftOptionGroup.name=t)}handleOptionGroupCreate(e){let{optionGroup:t}=e.detail;this.selectedProduct?this.selectedProduct.optionGroups?this.selectedProduct.optionGroups=[...this.selectedProduct.optionGroups,t]:this.selectedProduct.optionGroups=[t]:this.selectedProduct={optionGroups:[t]},this.draftOptionGroup=null,this.focusedPane=this.isCreatingNewProduct?b.PRODUCT_CREATE:b.PRODUCT_EDIT}handleEditOptionGroup(e){let{optionGroup:t}=e.detail;this.selectedOptionGroup=t,this.focusedPane=b.PRODUCT_EDIT_OPTION_GROUP}async handleOptionGroupUpdate(e){let{product:t}=e.detail;if(this.selectedProduct=t,this.selectedOptionGroup){let e=t.optionGroups?.find(e=>e.name===this.selectedOptionGroup.name);e&&(this.selectedOptionGroup=e)}this.focusedPane=this.isCreatingNewProduct?b.PRODUCT_CREATE:b.PRODUCT_EDIT}async handleOptionUpdate(e){let{product:t}=e.detail;this.selectedProduct=t;let n=t.optionGroups?.find(e=>e.name===this.selectedOptionGroup?.name);n&&(this.selectedOptionGroup=n),this.focusedPane=b.PRODUCT_EDIT_OPTION_GROUP}handleOptionClick(e){let{option:t}=e.detail;this.selectedOption=t,this.focusedPane===b.PRODUCT_ADD_OPTION_GROUP?(this.previousPane=b.PRODUCT_ADD_OPTION_GROUP,this.focusedPane=b.PRODUCT_ADD_OPTION):this.focusedPane=b.OPTION_GROUP_EDIT_OPTION}handleDeleteOptionClick(){let e=new window.BannowebMerchantOptionDeleteDialog;

1e.option=this.selectedOption,e.addEventListener(`deleteOption`,this.handleConfirmDeleteOption.bind(this)),this.dispatchEvent(new s(e))}async handleConfirmDeleteOption(e){let{option:t}=e.detail;try{let e=this.selectedOptionGroup.options.filter(e=>e!==t),n={...this.selectedOptionGroup,options:e},r=this.selectedProduct.optionGroups.map(e=>e===this.selectedOptionGroup?n:e);if(this.selectedProduct.id){let e={title:this.selectedProduct.title,description:this.selectedProduct.description||``,basePrice:String(parseFloat(this.selectedProduct.basePrice).toFixed(2)),optionGroups:r,image:this.selectedProduct.image||null},t=await c.merchantController.editMerchantProduct(this.selectedProduct.id,e);this.selectedProduct=t;let n=this.shadowRoot.querySelector(`bannoweb-merchant-product-list`);n&&await n.loadProducts()}else this.selectedProduct.optionGroups=r;this.selectedOptionGroup=n,this.focusedPane=b.PRODUCT_EDIT_OPTION_GROUP}catch(e){await h.showStandardErrorDialog(e)}}static get styles(){return[m,t`:host{background-size:100%;flex:1 0 auto;display:block}jh-icon-trash-can,jh-icon-plus,jh-icon-chevron-left,jh-icon-pencil{display:flex}jha-card{max-width:600px}jha-card-header[data-tab=productDetails]{--jha-border-color:transparent}jha-card-header[data-tab=list]{--jha-border-color:transparent;--jha-card-header-padding-bottom:0}.header-actions{gap:8px;display:flex}.sub-header{color:var(--body-text-secondary-color);font-size:12px;font-weight:400;line-height:1.5rem}`]}renderHeader(){let e;switch(this.focusedPane){case b.PRODUCT_CATALOG:e=`Product catalog`;break;case b.PRODUCT_DETAILS:e=`Product details`;break;case b.PRODUCT_EDIT:e=`Edit product details`;break;case b.PRODUCT_ADD_OPTION:e=`Add option`;break;case b.PRODUCT_EDIT_OPTION:e=`Edit option`;break;case b.PRODUCT_CREATE:e=`Create product`;break;case b.PRODUCT_ADD_OPTION_GROUP:e=`Add option group`;break;case b.PRODUCT_EDIT_OPTION_GROUP:e=this.selectedOptionGroup?.name||`Edit option group`;break;case b.OPTION_GROUP_EDIT_OPTION:e=`Edit option`;break;default:e=``;break}return r`<jha-card-header center-header data-tab="${this.focusedPane}"> <jha-button slot="header-left" link sync @click="${this.handleBackClick}"> <jh-icon-chevron-left></jh-icon-chevron-left> </jha-button> <div>${e} ${this.maybeRenderSubHeader()}</div> ${this.maybeRenderHeaderAction()} </jha-card-header>`}maybeRenderSubHeader(){let e;switch(this.focusedPane){case b.PRODUCT_EDIT_OPTION_GROUP:e=this.selectedProduct?.title;break;case b.OPTION_GROUP_EDIT_OPTION:e=this.selectedOptionGroup?.name;break;default:return r``}return r`<div class="sub-header"> <span>${e}</span> </div>`}maybeRenderHeaderAction(){switch(this.focusedPane){case b.PRODUCT_CATALOG:return r`<jha-button slot="header-right" link sync @click="${this.handleAddProductClick}"> <jh-icon-plus></jh-icon-plus> </jha-button>`;case b.PRODUCT_DETAILS:return r`<div class="header-actions" slot="header-right"> <jha-button link sync @click="${this.handleEditProductClick}

1"> <jh-icon-pencil></jh-icon-pencil> </jha-button> <jha-button link sync @click="${this.handleDeleteProductClick}"> <jh-icon-trash-can></jh-icon-trash-can> </jha-button> </div>`;case b.PRODUCT_CREATE:break;case b.PRODUCT_EDIT:return r`<jha-button slot="header-right" link sync @click="${this.handleDeleteProductClick}"> <jh-icon-trash-can></jh-icon-trash-can> </jha-button>`;case b.PRODUCT_EDIT_OPTION_GROUP:return r`<jha-button slot="header-right" link sync @click="${this.handleDeleteOptionGroupClick}"> <jh-icon-trash-can></jh-icon-trash-can> </jha-button>`;case b.OPTION_GROUP_EDIT_OPTION:return r`<jha-button slot="header-right" link sync @click="${this.handleDeleteOptionClick}"> <jh-icon-trash-can></jh-icon-trash-can> </jha-button>`;default:break}}render(){return r`<bannoweb-page-container> <jha-card> ${this.renderHeader()} <jha-slider> <jha-slider-content .focusedPane="${this.focusedPane}"> <jha-slider-pane productCatalog> <bannoweb-merchant-product-list @productSelected="${this.handleSelectedProduct}"></bannoweb-merchant-product-list> </jha-slider-pane> <jha-slider-pane productDetails> <bannoweb-merchant-product-details .product="${this.selectedProduct}"></bannoweb-merchant-product-details> </jha-slider-pane> <jha-slider-pane productEdit> <bannoweb-merchant-product-create-form .product="${this.selectedProduct}" mode="${y.EDIT}" @product-update="${this.handleProductUpdate}" @add-option-group="${this.handleAddOptionGroup}" @edit-option-group="${this.handleEditOptionGroup}"></bannoweb-merchant-product-create-form> </jha-slider-pane> <jha-slider-pane productCreate> <bannoweb-merchant-product-create-form .product="${this.selectedProduct}" @product-create="${this.handleProductCreate}" @add-option-group="${this.handleAddOptionGroup}" @edit-option-group="${this.handleEditOptionGroup}"></bannoweb-merchant-product-create-form> </jha-slider-pane> <jha-slider-pane productOptionGroup></jha-slider-pane> <jha-slider-pane productAddOptionGroup> <bannoweb-merchant-option-group-create-form .optionGroup="${this.draftOptionGroup}" @add-option="${this.handleAddOption}" @option-click="${this.handleOptionClick}" @option-group-update-draft="${this.handleOptionGroupUpdateDraft}" @option-group-create="${this.handleOptionGroupCreate}"></bannoweb-merchant-option-group-create-form> </jha-slider-pane> <jha-slider-pane productAddOption> <bannoweb-merchant-option-add-or-edit-form mode="${this.selectedOption?y.EDIT:y.CREATE}" .option="${this.selectedOption}" @option-create="${this.handleOptionCreate}" @option-update="${this.handleOptionUpdateDraft}"></bannoweb-merchant-option-add-or-edit-form> </jha-slider-pane> <jha-slider-pane productEditOptionGroup> <bannoweb-merchant-option-group-edit-form .product="${this.selectedProduct}" .optionGroup="${this.selectedOptionGroup}" @option-group-update="${this.handleOptionGroupUpdate}" @option-click="${this.handleOptionClick}" @add-option="${this.handleAddOption}"></bannoweb-merchant-option-group-edit-form> </jha-slider-pane> <jha-slider-pane optionGroupEditOption> <bannoweb-merchant-option-edit-form .product="${this.selectedProduct}" .optionGroup="${this.selectedOptionGroup}" .option="${this.selectedOption}" @option-update="${this.handleOptionUpdate}"></bannoweb-merchant-option-edit-form> </jha-slider-pane> </jha-slider-content> </jha-slider> </jha-card> </bannoweb-page-container>`}},customElements.define(window.BannowebMerchantProductCatalog.is,window.BannowebMerchantProductCatalog);var S=window.BannowebMerchantProductCatalog;export{y as MODE,S as default};

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.