{"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","getOrderDiscounts","sort","a","b","slice","find","element","willApply","value","percent","progress","tooltipBody","document","createElement","classList","add","tooltipLitMarkup","map","line","name","discountDetailsTooltip","placement","Top","context","triggerSelector","bodyTemplate","window","PubSub","subscribe","ignore","initDetails","status","connectedCallback","customElements","define"],"mappings":"OAASA,KAAMC,OAAQC,YAAc,kBAC5BC,eAAkB,yCAClBC,UAAWC,QAAW,iCACtBC,yBAA4B,mCAE9B,yCACEC,WAAc,kCACdC,WAAYC,qBAAwB,yCAEpCC,qBAAwB,2DAEpBC,iCAAiCC,YAI1CC,cACIC,QAiBIC,KAAAC,aAAyD,CAC7DC,GAAI,CACAC,SAAU,+CACVC,YAAa,wBACbC,SAAU,YACVC,mBAAoB,YAExBC,GAAI,CACAJ,SAAU,6CACVC,YAAa,sBACbC,SAAU,YACVC,mBAAoB,WAMpBN,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;;;;;;kBAMlId,KAAKe;cACP9B;;;;oCAIoBG,WAAWI,OAAOQ,KAAKW,OAAOP,YAAaJ,KAAKgB,qBAAqBH,gBAAgBC;;;wBAGjGxB,IAAIU,KAAKiB;UACrB9B,QAIAa,KAAAkB,IAAM,IAAIvB,iBAIVK,KAAAiB,YAAc5B,YA3DlBW,KAAKW,OAASpB,qBAAqBS,KAAKC,cACxCD,KAAKS,mBAAqB,KAC1BT,KAAKmB,gBAIFC,cAAcC,GACdA,EACCrB,KAAKsB,gBAAgB,UAErBtB,KAAKuB,aAAa,SAAU,IAoD5BC,aACJxB,KAAKS,yBAA2BT,KAAKkB,IAAIO,oBACzCzB,KAAKS,mBAAmBiB,KAAK,CAACC,EAAGC,IAAMD,EAAEd,gBAAkBe,EAAEf,iBAC7Db,KAAKgB,qBAAuBhB,KAAKS,mBAAmBoB,OAAO,GAAG,GAE9D7B,KAAKG,SAAWH,KAAKS,mBAAmBqB,KAAK,IACzC,GAAyB,GAArBC,EAAQC,UACZ,OAAOD,IAGX7C,OAAOc,KAAKQ,WAAYR,MAEpBA,KAAKiB,YAAYgB,QACjBjC,KAAKiB,YAAYgB,MAAMC,QAAUlC,KAAKG,SAAWH,KAAKG,SAASgC,SAAW,KAI1EpB,eACJ,MAAMqB,EAAcC,SAASC,cAAc,SAC3CF,EAAYG,UAAUC,IAAI,wBAC1B,IAAMC,EAAmBxD;;0BAEPe,KAAKW,OAAON;0BACZL,KAAKW,OAAOL;;;sBAGhBN,KAAKS,mBAAmBiC,IAAIC,GAAQ1D;oDACN0D,EAAKC;qEACYD,EAAK9B;;;cAO5DgC,GAFN3D,OAAOuD,EAAkBL,GAEM,IAAI3C,WAAW,CAC1CqD,UAAWpD,iBAAiBqD,IAC5BC,QAAShD,KACTiD,gBAAiB,mCACjBC,aAAcd,KAGlB,OAAOS,EAGH1B,gBACJgC,OAAOC,OAAOC,UAAU,2BAA6B,CAACC,EAAaC,KACrC,OAAvBA,EAAYC,QACXxD,KAAKwB,SAMjBiC,gCACUzD,KAAKwB,QAInBkC,eAAeC,OAAO,8BAA+B/D,iCA/HxCA","file":"order-discount-progress-bar.js","sourcesContent":["import { html, render, nothing} from \"lit-html\";\nimport { unsafeHTML } from \"lit-html/directives/unsafe-html\";\nimport { createRef, ref } from \"lit-html/directives/ref\";\nimport { determineTranslation } from \"../../../utils/language.js\";\nimport { ProgressBar } from \"../../../common/progress-bar.js\";\nimport \"../../../common/progress-bar.js\";\nimport { format } from '../../../utils/string.js';\nimport { CmsTooltip, TooltipPlacement } from \"../../../website/cms-tooltip.js\";\nimport { IOrderDiscount } from \"../../../api/estore/discount/interfaces/order-discount.js\";\nimport { OrderDiscountApi } from \"../../../api/estore/discount/order-discount-api.js\";\n\nexport class OrderDiscountProgressBar extends HTMLElement {\n    ///TODO:\n    /// Use number formating from number.ts (test with decimals). Did not found it useful in this specific component.\n\n    constructor() {\n        super();\n        this.labels = determineTranslation(this.translations);\n        this.orderDiscountLines = null;\n        this.eventHandlers();        \n    }\n\n    /* #region Public */\n    public setVisibility(visible: boolean): void {\n        if(visible) {\n            this.removeAttribute(\"hidden\")\n        } else {\n            this.setAttribute(\"hidden\", \"\");\n        }\n    }\n    /* #endregion */\n\n    /* #region Translations */\n    private translations: { [key:string]: {[key:string]: string} } = {\n        en: {\n            nextGoal: \"<strong>{0}</strong> left till {1}% discount\",\n            goalReached: \"You got {0}% discount\",\n            totalSum: \"Total sum\",\n            discountTableTitle: \"Discount\",\n        },\n        no: {\n            nextGoal: \"<strong>{0}</strong> igjen til {1}% rabatt\",\n            goalReached: \"Du fikk {0}% rabatt\",\n            totalSum: \"Total sum\",\n            discountTableTitle: \"Rabatt\",\n        }\n    };\n    /* #endregion */\n\n    /* #region Markup */\n    private template = () => this.orderDiscountLines.length ? html`\n        <div class=\"next-goal ${this.nextGoal ? 'in-progress': 'is-last'}\">\n            ${this.nextGoal ? html`\n                <div class=\"text\">${unsafeHTML(format(this.labels.nextGoal, this.nextGoal.amountUntilAppliesFormated, this.nextGoal.discountPercent.toString()))}</div>\n                <button class=\"btn-show-order-discount-tooltip btn\" type=\"button\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\">\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\"/>\n                    </svg>\n                </button>\n                ${this.buildTooltip()}\n            ` : html`\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11.501\" height=\"8.002\" viewBox=\"0 0 11.501 8.002\">\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\"/>\n                </svg>\n                <div class=\"text\">${unsafeHTML(format(this.labels.goalReached, this.maximumOrderDiscount.discountPercent.toString()))}</div>\n            ` }\n        </div>\n        <progress-bar ${ref(this.progressBar)}></progress-bar>\n        ` : nothing;\n    /* #endregion */\n\n    /* #region Private */\n    private api = new OrderDiscountApi();\n    private orderDiscountLines: IOrderDiscount[];\n    private nextGoal: IOrderDiscount;\n    private maximumOrderDiscount: IOrderDiscount;\n    private progressBar = createRef<ProgressBar>();\n    protected labels: { [key: string]:any };\n\n    private async load(): Promise<void> {\n        this.orderDiscountLines = await this.api.getOrderDiscounts();\n        this.orderDiscountLines.sort((a, b) => a.discountPercent - b.discountPercent);\n        this.maximumOrderDiscount = this.orderDiscountLines.slice(-1)[0];\n\n        this.nextGoal = this.orderDiscountLines.find((element: IOrderDiscount) => {\n            if (element.willApply == false)\n            return element;\n        });\n\n        render(this.template(), this);\n\n        if (this.progressBar.value){\n            this.progressBar.value.percent = this.nextGoal ? this.nextGoal.progress : 100;\n        }\n    }\n\n    private buildTooltip() {\n        const tooltipBody = document.createElement(\"table\");\n        tooltipBody.classList.add(\"order-discount-table\");\n        const tooltipLitMarkup = html`\n                <thead>\n                    <th>${this.labels.totalSum}</th>\n                    <th>${this.labels.discountTableTitle}</th>\n                </thead>\n                <tbody>\n                    ${this.orderDiscountLines.map(line => html`<tr>\n                        <td class=\"discount-name\">${line.name}</td>\n                        <td class=\"discount-percent\" align=\"right\">${line.discountPercent}%</td>\n                    </tr>`)}\n                </tbody>\n            `;\n\n        render(tooltipLitMarkup, tooltipBody);\n\n        const discountDetailsTooltip = new CmsTooltip({\n            placement: TooltipPlacement.Top,\n            context: this,\n            triggerSelector: \".btn-show-order-discount-tooltip\",\n            bodyTemplate: tooltipBody,\n        });\n\n        return discountDetailsTooltip;\n    }\n\n    private eventHandlers(){\n        window.PubSub.subscribe('estore.callback.shopcart',  (ignore: any, initDetails: any) => {\n            if(initDetails.status === \"Ok\"){\n                this.load();\n            }\n        });\n    }\n\n    /* #endregion */\n    async connectedCallback() {\n        await this.load();\n    }\n}\n\ncustomElements.define(\"order-discount-progress-bar\", OrderDiscountProgressBar);"]}