{"version":3,"sources":["estore/cart/views/order-discount-progress-bar.ts"],"names":["html","render","nothing","unsafeHTML","createRef","ref","determineTranslation","format","CmsTooltip","TooltipPlacement","OrderDiscountApi","OrderDiscountProgressBar","HTMLElement","constructor","super","this","translations","en","nextGoal","goalReached","totalSum","discountTableTitle","no","template","orderDiscountLines","length","labels","amountUntilAppliesFormated","discountPercent","toString","buildTooltip","maximumOrderDiscount","progressBar","api","eventHandlers","setVisibility","visible","removeAttribute","setAttribute","load","await","getOrderDiscounts","sort","a","b","slice","find","element","willApply","value","percent","progress","tooltipBody","document","createElement","tooltipLitMarkup","classList","add","map","line","name","discountDetailsTooltip","placement","Top","context","triggerSelector","bodyTemplate","window","PubSub","subscribe","ignore","initDetails","status","connectedCallback","customElements","define"],"mappings":"OAASA,KAAMC,OAAQC,OAAwB,KAAV,kBAC5BC,UAAmD,KAAjC,yCAClBC,UAAWC,GAAoC,KAAzB,iCACtBC,oBAAwD,KAA5B,mCAE9B,yCACEC,MAAwC,KAA1B,kCACdC,WAAYC,gBAAyD,KAAjC,yCAEpCC,gBAA4E,KAApD,2DAEpBC,iCAAiCC,YAI1CC,cACIC,MAAK,EAiBDC,KAAAC,aAAyD,CAC7DC,GAAI,CACAC,SAAU,+CACVC,YAAa,wBACbC,SAAU,YACVC,mBAAoB,U,EAExBC,GAAI,CACAJ,SAAU,6CACVC,YAAa,sBACbC,SAAU,YACVC,mBAAoB,Q,GAMpBN,KAAAQ,SAAW,IAAMR,KAAKS,mBAAmBC,OAASzB;gCAC9Be,KAAKG,SAAW,cAAe;cACjDH,KAAKG,SAAWlB;oCACMG,WAAWI,OAAOQ,KAAKW,OAAOR,SAAUH,KAAKG,SAASS,2BAA4BZ,KAAKG,SAASU,gBAAgBC,SAAQ,CAAE,CAAC;;;;;;kBAM7Id,KAAKe,aAAY;cACnB9B;;;;oCAIoBG,WAAWI,OAAOQ,KAAKW,OAAOP,YAAaJ,KAAKgB,qBAAqBH,gBAAgBC,SAAQ,CAAE,CAAC;;;wBAG5GxB,IAAIU,KAAKiB,WAAW;UAChC9B,QAIAa,KAAAkB,IAAM,IAAIvB,iBAIVK,KAAAiB,YAAc5B,UAAS,EA3D3BW,KAAKW,OAASpB,qBAAqBS,KAAKC,YAAY,EACpDD,KAAKS,mBAAqB,KAC1BT,KAAKmB,cAAa,CACtB,CAGOC,cAAcC,GACdA,EACCrB,KAAKsB,gBAAgB,QAAQ,EAE7BtB,KAAKuB,aAAa,SAAU,EAAE,CAEtC,CAkDQC,aACJxB,KAAKS,mBAAqBgB,MAAMzB,KAAKkB,IAAIQ,kBAAiB,EAC1D1B,KAAKS,mBAAmBkB,KAAK,CAACC,EAAGC,IAAMD,EAAEf,gBAAkBgB,EAAEhB,eAAe,EAC5Eb,KAAKgB,qBAAuBhB,KAAKS,mBAAmBqB,MAAM,CAAC,CAAC,EAAE,GAE9D9B,KAAKG,SAAWH,KAAKS,mBAAmBsB,KAAK,IACzC,GAAyB,GAArBC,EAAQC,UACZ,OAAOD,CACX,CAAC,EAED9C,OAAOc,KAAKQ,SAAQ,EAAIR,IAAI,EAExBA,KAAKiB,YAAYiB,QACjBlC,KAAKiB,YAAYiB,MAAMC,QAAUnC,KAAKG,SAAWH,KAAKG,SAASiC,SAAW,IAElF,CAEQrB,eACJ,IAAMsB,EAAcC,SAASC,cAAc,OAAO,EAE5CC,GADNH,EAAYI,UAAUC,IAAI,sBAAsB,EACvBzD;;0BAEPe,KAAKW,OAAON;0BACZL,KAAKW,OAAOL;;;sBAGhBN,KAAKS,mBAAmBkC,IAAIC,GAAQ3D;oDACN2D,EAAKC;qEACYD,EAAK/B;0BAChD;;eAMZiC,GAFN5D,OAAOsD,EAAkBH,CAAW,EAEL,IAAI5C,WAAW,CAC1CsD,UAAWrD,iBAAiBsD,IAC5BC,QAASjD,KACTkD,gBAAiB,mCACjBC,aAAcd,C,CACjB,GAED,OAAOS,CACX,CAEQ3B,gBACJiC,OAAOC,OAAOC,UAAU,2BAA6B,CAACC,EAAaC,KACrC,OAAvBA,EAAYC,QACXzD,KAAKwB,KAAI,CAEjB,CAAC,CACL,CAGAkC,0BACIjC,MAAMzB,KAAKwB,KAAI,CACnB,C,CAGJmC,eAAeC,OAAO,8BAA+BhE,wBAAwB,SA/HhEA,wBA+HiE","file":"order-discount-progress-bar.js","sourcesContent":["import { html, render, nothing} from \"lit-html\";\r\nimport { unsafeHTML } from \"lit-html/directives/unsafe-html\";\r\nimport { createRef, ref } from \"lit-html/directives/ref\";\r\nimport { determineTranslation } from \"../../../utils/language.js\";\r\nimport { ProgressBar } from \"../../../common/progress-bar.js\";\r\nimport \"../../../common/progress-bar.js\";\r\nimport { format } from '../../../utils/string.js';\r\nimport { CmsTooltip, TooltipPlacement } from \"../../../website/cms-tooltip.js\";\r\nimport { IOrderDiscount } from \"../../../api/estore/discount/interfaces/order-discount.js\";\r\nimport { OrderDiscountApi } from \"../../../api/estore/discount/order-discount-api.js\";\r\n\r\nexport class OrderDiscountProgressBar extends HTMLElement {\r\n    ///TODO:\r\n    /// Use number formating from number.ts (test with decimals). Did not found it useful in this specific component.\r\n\r\n    constructor() {\r\n        super();\r\n        this.labels = determineTranslation(this.translations);\r\n        this.orderDiscountLines = null;\r\n        this.eventHandlers();        \r\n    }\r\n\r\n    /* #region Public */\r\n    public setVisibility(visible: boolean): void {\r\n        if(visible) {\r\n            this.removeAttribute(\"hidden\")\r\n        } else {\r\n            this.setAttribute(\"hidden\", \"\");\r\n        }\r\n    }\r\n    /* #endregion */\r\n\r\n    /* #region Translations */\r\n    private translations: { [key:string]: {[key:string]: string} } = {\r\n        en: {\r\n            nextGoal: \"<strong>{0}</strong> left till {1}% discount\",\r\n            goalReached: \"You got {0}% discount\",\r\n            totalSum: \"Total sum\",\r\n            discountTableTitle: \"Discount\",\r\n        },\r\n        no: {\r\n            nextGoal: \"<strong>{0}</strong> igjen til {1}% rabatt\",\r\n            goalReached: \"Du fikk {0}% rabatt\",\r\n            totalSum: \"Total sum\",\r\n            discountTableTitle: \"Rabatt\",\r\n        }\r\n    };\r\n    /* #endregion */\r\n\r\n    /* #region Markup */\r\n    private template = () => this.orderDiscountLines.length ? html`\r\n        <div class=\"next-goal ${this.nextGoal ? 'in-progress': 'is-last'}\">\r\n            ${this.nextGoal ? html`\r\n                <div class=\"text\">${unsafeHTML(format(this.labels.nextGoal, this.nextGoal.amountUntilAppliesFormated, this.nextGoal.discountPercent.toString()))}</div>\r\n                <button class=\"btn-show-order-discount-tooltip btn\" type=\"button\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\">\r\n                        <path id=\"ue91e-info\" d=\"M6,0a6,6,0,1,0,6,6A6,6,0,0,0,6,0ZM7.249,9.3q-.463.183-.739.278a1.949,1.949,0,0,1-.641.1A1.277,1.277,0,0,1,5,9.4a.883.883,0,0,1-.31-.694,2.522,2.522,0,0,1,.023-.335c.016-.114.041-.242.075-.386l.387-1.365c.034-.131.063-.254.087-.371a1.646,1.646,0,0,0,.035-.322.5.5,0,0,0-.108-.364.609.609,0,0,0-.413-.1,1.084,1.084,0,0,0-.307.046c-.1.032-.195.061-.269.089l.1-.421q.379-.152.726-.265A2.146,2.146,0,0,1,5.678,4.8a1.254,1.254,0,0,1,.859.269.894.894,0,0,1,.3.7q0,.089-.021.313a2.1,2.1,0,0,1-.077.412L6.357,7.852c-.031.109-.059.234-.085.374a1.977,1.977,0,0,0-.037.318.457.457,0,0,0,.121.37.68.68,0,0,0,.42.1,1.219,1.219,0,0,0,.318-.051,1.808,1.808,0,0,0,.257-.086ZM7.181,3.773a.918.918,0,0,1-.648.25.927.927,0,0,1-.65-.25.817.817,0,0,1,0-1.215.92.92,0,0,1,.65-.254.91.91,0,0,1,.648.254.818.818,0,0,1,0,1.213Z\" fill=\"#222226\"/>\r\n                    </svg>\r\n                </button>\r\n                ${this.buildTooltip()}\r\n            ` : html`\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11.501\" height=\"8.002\" viewBox=\"0 0 11.501 8.002\">\r\n                    <path id=\"check2\" d=\"M13.854,3.646a.5.5,0,0,1,0,.708l-7,7a.5.5,0,0,1-.708,0l-3.5-3.5a.5.5,0,0,1,.708-.708L6.5,10.293l6.646-6.647a.5.5,0,0,1,.708,0Z\" transform=\"translate(-2.499 -3.499)\" fill=\"#75aa83\"/>\r\n                </svg>\r\n                <div class=\"text\">${unsafeHTML(format(this.labels.goalReached, this.maximumOrderDiscount.discountPercent.toString()))}</div>\r\n            ` }\r\n        </div>\r\n        <progress-bar ${ref(this.progressBar)}></progress-bar>\r\n        ` : nothing;\r\n    /* #endregion */\r\n\r\n    /* #region Private */\r\n    private api = new OrderDiscountApi();\r\n    private orderDiscountLines: IOrderDiscount[];\r\n    private nextGoal: IOrderDiscount;\r\n    private maximumOrderDiscount: IOrderDiscount;\r\n    private progressBar = createRef<ProgressBar>();\r\n    protected labels: { [key: string]:any };\r\n\r\n    private async load(): Promise<void> {\r\n        this.orderDiscountLines = await this.api.getOrderDiscounts();\r\n        this.orderDiscountLines.sort((a, b) => a.discountPercent - b.discountPercent);\r\n        this.maximumOrderDiscount = this.orderDiscountLines.slice(-1)[0];\r\n\r\n        this.nextGoal = this.orderDiscountLines.find((element: IOrderDiscount) => {\r\n            if (element.willApply == false)\r\n            return element;\r\n        });\r\n\r\n        render(this.template(), this);\r\n\r\n        if (this.progressBar.value){\r\n            this.progressBar.value.percent = this.nextGoal ? this.nextGoal.progress : 100;\r\n        }\r\n    }\r\n\r\n    private buildTooltip() {\r\n        const tooltipBody = document.createElement(\"table\");\r\n        tooltipBody.classList.add(\"order-discount-table\");\r\n        const tooltipLitMarkup = html`\r\n                <thead>\r\n                    <th>${this.labels.totalSum}</th>\r\n                    <th>${this.labels.discountTableTitle}</th>\r\n                </thead>\r\n                <tbody>\r\n                    ${this.orderDiscountLines.map(line => html`<tr>\r\n                        <td class=\"discount-name\">${line.name}</td>\r\n                        <td class=\"discount-percent\" align=\"right\">${line.discountPercent}%</td>\r\n                    </tr>`)}\r\n                </tbody>\r\n            `;\r\n\r\n        render(tooltipLitMarkup, tooltipBody);\r\n\r\n        const discountDetailsTooltip = new CmsTooltip({\r\n            placement: TooltipPlacement.Top,\r\n            context: this,\r\n            triggerSelector: \".btn-show-order-discount-tooltip\",\r\n            bodyTemplate: tooltipBody,\r\n        });\r\n\r\n        return discountDetailsTooltip;\r\n    }\r\n\r\n    private eventHandlers(){\r\n        window.PubSub.subscribe('estore.callback.shopcart',  (ignore: any, initDetails: any) => {\r\n            if(initDetails.status === \"Ok\"){\r\n                this.load();\r\n            }\r\n        });\r\n    }\r\n\r\n    /* #endregion */\r\n    async connectedCallback() {\r\n        await this.load();\r\n    }\r\n}\r\n\r\ncustomElements.define(\"order-discount-progress-bar\", OrderDiscountProgressBar);"]}