@salla.sa/twilight-components 2.14.165 → 2.14.167

package/dist/twilight/p-e4c31868.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["DiscountType","OfferType","sallaConditionalOfferCss","SallaConditionalOffer","constructor","hostRef","this","offer","products","isLoading","canRender","componentWillLoad","salla","onReady","then","_a","config","get","includes","storage","_c","_b","summary","count","Error","api","cart","offers","data","find","type","details","discounts","unshift","value","min_spend","updateInitialOfferValue","getProducts","event","on","updatedCart","updateOfferValues","catch","error","logger","warn","finally","freeProductIDs","filter","FREE_PRODUCT","map","length","product","fetch","source","source_value","forEach","id","url","image","items","total","current_value","based_on","PRODUCT_COUNT","reduce","quantity","Object","assign","getCheckpointContent","discount","PERCENTAGE","FIXED","money","productItem","h","class","href","loading","decoding","alt","src","getOfferType","basedOn","lang","choice","PRODUCT_PURCHASE","clamp","min","max","Math","mapValueRanges","initialMinRange","initialMaxRange","newMinRange","newMaxRange","newRange","Number","POSITIVE_INFINITY","NEGATIVE_INFINITY","getCheckPointView","index","checkpointIndex","findIndex","previousCheckpointValue","progressPercentage","isActive","key","style","width","innerHTML","active","getLoadingSkeletonView","Host","height","Array","fill","render","title","description"],"sources":["src/components/salla-conditional-offer/interfaces.ts","src/components/salla-conditional-offer/salla-conditional-offer.scss?tag=salla-conditional-offer","src/components/salla-conditional-offer/salla-conditional-offer.tsx"],"sourcesContent":["import type { Product } from \"@salla.sa/twilight/types/common\";\n\nexport enum DiscountType {\n    PERCENTAGE = \"percentage\",\n    FIXED = \"fixed\",\n    FREE_PRODUCT = \"free_product\",\n}\n\nexport enum OfferType {\n    PRODUCT_COUNT = \"products_count\",\n    PRODUCT_PURCHASE = \"order_amount\",\n}\n\nexport interface Discount {\n    type?: DiscountType;\n    value?: number;\n    min_spend?: number;\n    max_discount?: number;\n}\n\nexport interface OfferDetails {\n    based_on?: OfferType;\n    ends_at?: number;\n    start_value?: number;\n    end_value?: number;\n    current_value?: number;\n    discounts?: Discount[];\n}\n\nexport interface Offer {\n    id?: number;\n    type?: string;\n    title?: string;\n    description?: string;\n    details?: OfferDetails | null;\n}\n\n\nexport interface ProductDetail {\n    id?: number;\n    sku?: string;\n    name?: string;\n    description?: string;\n    url?: string;\n    promotion_title?: null;\n    subtitle?: null;\n    type?: string;\n    status?: string;\n    price?: number;\n    base_currency_price?: BaseCurrencyPrice;\n    sale_price?: number;\n    regular_price?: number;\n    starting_price?: null;\n    quantity?: null;\n    max_quantity?: number;\n    discount_ends?: null;\n    is_taxable?: boolean;\n    has_read_more?: boolean;\n    can_add_note?: boolean;\n    can_show_remained_quantity?: boolean;\n    can_upload_file?: boolean;\n    has_custom_form?: boolean;\n    has_metadata?: boolean;\n    is_on_sale?: boolean;\n    is_hidden_quantity?: boolean;\n    is_available?: boolean;\n    is_out_of_stock?: boolean;\n    is_require_shipping?: boolean;\n    weight?: null;\n    calories?: null;\n    image?: Image;\n    currency?: string;\n}\n\nexport interface BaseCurrencyPrice {\n    currency?: string;\n    amount?: number;\n}\n\nexport interface Image {\n    url?: string;\n    alt?: string;\n}\n\nexport interface UpdatedCart {\n    items: Array<Product>;\n    total: number;\n}\n",":host {\n  display: block;\n}","import { Component, Host, State, h } from \"@stencil/core\";\nimport {\n    type Discount,\n    DiscountType,\n    type Offer,\n    OfferType,\n    type UpdatedCart,\n} from \"./interfaces\";\nimport type { Product } from \"@salla.sa/twilight/types/common\";\n\n@Component({\n    tag: \"salla-conditional-offer\",\n    styleUrl: \"salla-conditional-offer.scss\",\n})\nexport class SallaConditionalOffer {\n\n    @State() offer: Offer = null;\n    @State() products: Record<string, Pick<Product, 'image' | 'url'>> = {}\n    @State() isLoading = true\n    @State() canRender = true\n\n    componentWillLoad() {\n        salla.onReady().then(() => {\n            if (!salla.config.get('store.features')?.includes('conditional-offer') || (salla.storage.get(\"cart\") !== '' && !salla.storage.get(\"cart\")?.summary?.count)) {\n                throw new Error('feature or cart object does not existed');\n            }\n        })\n            .then(() => salla.api.cart.offers())\n            .then(({ data }: { data: Offer[] }) => {\n                //it's okay if there is an exception here, all thens will be skipped, and will catch the error,\n                this.offer = data.find(offer => offer.type === \"conditional\")\n\n                if (!this.offer) {\n                    throw new Error('No conditional offer has been activated in the merchant dashboard');\n                }\n\n                this.offer.details.discounts.unshift(({ value: 0, min_spend: 0 }))\n                return this.updateInitialOfferValue()\n            }).then(() => this.getProducts()).then(() => salla.event.on(\"cart::updated\", (updatedCart: UpdatedCart) => this.updateOfferValues(updatedCart)))\n            .catch(error => {\n                this.canRender = false\n                salla.logger.warn('salla-conditional-offer:: ', error)\n            }).finally(() => {\n                this.isLoading = false\n            })\n\n    }\n\n    private getProducts() {\n        const freeProductIDs = this.offer.details.discounts.filter(({ type }) => type === DiscountType.FREE_PRODUCT).map(({ value }) => value)\n        if (freeProductIDs.length > 0) {\n            return salla.product.fetch({ source: 'selected', source_value: freeProductIDs }).then(({ data }: { data: Array<Product> }) => {\n                data.forEach(({ id, url, image }) => {\n                    this.products[id] = { url, image }\n                })\n            })\n        }\n    }\n\n    private updateInitialOfferValue() {\n        return salla.api.cart.details().then(({ data: { cart } }: { data: { cart: UpdatedCart } }) => this.updateOfferValues(cart))\n    }\n\n    private updateOfferValues({ items, total }: UpdatedCart) {\n        const current_value = this.offer.details.based_on === OfferType.PRODUCT_COUNT ? items.reduce((count: number, { quantity }) => count + quantity, 0,) : total\n        //we need to assign the offer object a new reference to trigger re-rendering\n        this.offer = {\n            ...this.offer, details: {\n                ...this.offer?.details, current_value,\n            }\n        }\n        return this.offer\n    }\n\n    private getCheckpointContent(discount: Discount) {\n\n        if (discount.type === DiscountType.PERCENTAGE) return `${discount.value}%`\n\n        if (discount.type === DiscountType.FIXED) return salla.money(discount.value)\n\n        if (discount.type !== DiscountType.FREE_PRODUCT) {\n            salla.logger.error(`salla-conditional-offer:: unexpected type (${discount.type})!`);\n            return \"\";\n        }\n\n        const productItem = this.products[discount.value]\n\n        if (!productItem) {\n            salla.logger.error(`salla-conditional-offer:: there is no product with id (${discount.value})!`);\n            return \"\";\n        }\n\n        return <a class=\"s-conditional-offer-product-link\" href={productItem.url} >\n            <img\n                class=\"s-conditional-offer-checkpoint-image-content\"\n                loading=\"lazy\"\n                decoding=\"async\"\n                alt={productItem?.image?.alt || \"\"}\n                src={productItem?.image?.url} />\n        </a>\n    }\n\n    private getOfferType(discount: Discount): string {\n        const basedOn = this.offer.details?.based_on;\n        if (basedOn === OfferType.PRODUCT_COUNT) return salla.lang.choice(\"blocks.header.products_count\", discount.min_spend);\n        if (basedOn === OfferType.PRODUCT_PURCHASE) return salla.money(discount.min_spend);\n\n        salla.logger.warn(`salla-conditional-offer:: Unexpected offer detail's based_on value: ${basedOn}`);\n        return `${discount.min_spend}`;\n    }\n\n    private clamp(value: number, min: number, max: number) {\n        return Math.max(min, Math.min(value, max));\n    }\n\n    private mapValueRanges(value: number, initialMinRange: number, initialMaxRange: number, newMinRange: number, newMaxRange: number) {\n\n        const newRange = ((value - initialMinRange) * (newMaxRange - newMinRange)) / (initialMaxRange - initialMinRange) + newMinRange;\n\n        if (newRange === Number.POSITIVE_INFINITY) return 100\n\n        if (newRange === Number.NEGATIVE_INFINITY) return 0\n\n        return this.clamp(newRange, 0, 100)\n    }\n\n    private getCheckPointView(discount: Discount, index: number) {\n        const checkpointIndex = this.offer.details.discounts.findIndex(({ min_spend }) => min_spend === discount.min_spend);\n        const previousCheckpointValue = this.offer.details.discounts[checkpointIndex - 1]?.min_spend ?? 0;\n        const progressPercentage = this.mapValueRanges(this.offer.details.current_value, previousCheckpointValue, discount.min_spend, 0, 100);\n        const isActive = discount.min_spend <= this.offer.details.current_value;\n\n        return (\n            <div class=\"s-conditional-offer-checkpoint-container\">\n                {index > 0 ? [\n                    <div key=\"progress-line\" class=\"s-conditional-offer-progress-line-container\">\n                        <div class=\"s-conditional-offer-progress-line-inactive\" />\n                        <div class=\"s-conditional-offer-progress-line-active\" style={{ width: `${progressPercentage}%` }} />\n                    </div>,\n                    <div key=\"checkpoint\" class={`s-conditional-offer-checkpoint ${isActive ? \"s-conditional-offer-active-checkpoint\" : \"\"}`} >\n                        <div class={`s-conditional-offer-item-avatar-content ${isActive ? \"active\" : \"\"}`} innerHTML={this.products && this.getCheckpointContent(discount)}>\n                        </div>\n                        <div class={`s-conditional-offer-checkpoint-label ${isActive ? \"active\" : \"\"}`} innerHTML={this.getOfferType(discount)} />\n\n                    </div>\n                ] :\n                    <div key=\"label\" class={{ \"s-conditional-offer-checkpoint-label\": true, \"first-checkpoint\": index === 0, active: isActive }} innerHTML={this.getOfferType(discount)} />\n                }\n            </div>\n        );\n    }\n\n    private getLoadingSkeletonView() {\n        return <Host class=\"s-conditional-offer-container\" >\n            <div class=\"s-conditional-offer-skeleton-inner-container\">\n                <div class=\"s-conditional-offer-skeleton-subtitle\">\n                    <salla-skeleton height=\"16px\" width=\"30%\" />\n                </div>\n\n                <div class=\"s-conditional-offer-skeleton-subtitle\">\n                    <salla-skeleton height=\"16px\" width=\"35%\" />\n                </div>\n                <div class=\"s-conditional-offer-skeleton-checkpoints-wrapper\">\n                    {Array(3).fill(null).map(() => (\n                        [<salla-skeleton key=\"checkpoint-line\" height=\"8px\" />,\n                        <div key=\"checkpoint\">\n                            <salla-skeleton height=\"60px\" width=\"60px\" type=\"circle\" />\n                        </div>]\n                    ))}\n                </div>\n\n            </div>\n        </Host>\n    }\n\n    render() {\n        if (!this.canRender) return null\n        if (this.isLoading) return this.getLoadingSkeletonView()\n\n        return <Host class=\"s-conditional-offer-container\">\n            <div class=\"s-conditional-offer-title-wrapper\">\n                <div class=\"s-conditional-offer-title\">{this.offer.title}</div>\n                {this.offer.description ? <div class=\"s-conditional-offer-subtitle\">\n                    {this.offer.description} <i class=\"sicon-information\" />\n                </div> : null}\n            </div>\n            <div class=\"s-conditional-offer-progress-container\">\n                {this.offer.details.discounts.map((discount, index) => (\n                    <div class={{ \"flex-1\": index > 0 }} key={discount.min_spend}>\n                        {this.getCheckPointView(discount, index)}\n                    </div>\n                ))}\n            </div>\n        </Host>\n    }\n}\n"],"mappings":"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","ignoreList":[]}