@salla.sa/twilight-components 2.13.77 → 2.13.78
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/app-globals-7f77f27f.js.map +1 -1
- package/dist/cjs/salla-add-product-button_48.cjs.entry.js.map +1 -1
- package/dist/cjs/salla-conditional-offer.cjs.entry.js +1 -1
- package/dist/cjs/salla-conditional-offer.cjs.entry.js.map +1 -1
- package/dist/collection/components/salla-conditional-offer/salla-conditional-offer.js +1 -1
- package/dist/collection/components/salla-conditional-offer/salla-conditional-offer.js.map +1 -1
- package/dist/components/index.js.map +1 -1
- package/dist/components/salla-conditional-offer.js +1 -1
- package/dist/components/salla-conditional-offer.js.map +1 -1
- package/dist/components/salla-quick-buy2.js.map +1 -1
- package/dist/esm/app-globals-bbd15466.js.map +1 -1
- package/dist/esm/salla-add-product-button_48.entry.js.map +1 -1
- package/dist/esm/salla-conditional-offer.entry.js +1 -1
- package/dist/esm/salla-conditional-offer.entry.js.map +1 -1
- package/dist/esm-es5/app-globals-bbd15466.js.map +1 -1
- package/dist/esm-es5/salla-add-product-button_48.entry.js.map +1 -1
- package/dist/esm-es5/salla-conditional-offer.entry.js +1 -1
- package/dist/esm-es5/salla-conditional-offer.entry.js.map +1 -1
- package/dist/twilight/p-12aee0dd.js.map +1 -1
- package/dist/twilight/p-2554f5b7.entry.js +5 -0
- package/dist/twilight/p-2554f5b7.entry.js.map +1 -0
- package/dist/twilight/p-2ec5364b.system.js.map +1 -1
- package/dist/twilight/p-5e82c351.system.entry.js +5 -0
- package/dist/twilight/p-5e82c351.system.entry.js.map +1 -0
- package/dist/twilight/p-76af8550.entry.js.map +1 -1
- package/dist/twilight/p-a0dd6fdc.system.js +1 -1
- package/dist/twilight/p-f0bbd237.system.entry.js.map +1 -1
- package/dist/twilight/twilight.esm.js +1 -1
- package/dist/types/global.d.ts +20 -0
- package/package.json +5 -5
- package/dist/twilight/p-2425ba38.entry.js +0 -5
- package/dist/twilight/p-2425ba38.entry.js.map +0 -1
- package/dist/twilight/p-ad60936a.system.entry.js +0 -5
- package/dist/twilight/p-ad60936a.system.entry.js.map +0 -1
|
@@ -32,7 +32,7 @@ const SallaConditionalOffer = class {
|
|
|
32
32
|
componentWillLoad() {
|
|
33
33
|
salla.onReady().then(() => {
|
|
34
34
|
var _a, _b, _c;
|
|
35
|
-
if (!((_a = salla.config.get('store.features')) === null || _a === void 0 ? void 0 : _a.includes('conditional-offer')) || !((_c = (_b = salla.storage.get("cart")) === null || _b === void 0 ? void 0 : _b.summary) === null || _c === void 0 ? void 0 : _c.count)) {
|
|
35
|
+
if (!((_a = salla.config.get('store.features')) === null || _a === void 0 ? void 0 : _a.includes('conditional-offer')) || (salla.storage.get("cart") !== '' && !((_c = (_b = salla.storage.get("cart")) === null || _b === void 0 ? void 0 : _b.summary) === null || _c === void 0 ? void 0 : _c.count))) {
|
|
36
36
|
throw new Error('feature or cart object does not existed');
|
|
37
37
|
}
|
|
38
38
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"salla-conditional-offer.entry.cjs.js","mappings":"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","names":["h","index","Host"],"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\")?.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.error('salla-conditional-offer:: Error', 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\" : \"\"}`} >\n {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"],"version":3}
|
|
1
|
+
{"file":"salla-conditional-offer.entry.cjs.js","mappings":"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","names":["h","index","Host"],"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.error('salla-conditional-offer:: Error', 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\" : \"\"}`} >\n {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"],"version":3}
|
|
@@ -13,7 +13,7 @@ export class SallaConditionalOffer {
|
|
|
13
13
|
componentWillLoad() {
|
|
14
14
|
salla.onReady().then(() => {
|
|
15
15
|
var _a, _b, _c;
|
|
16
|
-
if (!((_a = salla.config.get('store.features')) === null || _a === void 0 ? void 0 : _a.includes('conditional-offer')) || !((_c = (_b = salla.storage.get("cart")) === null || _b === void 0 ? void 0 : _b.summary) === null || _c === void 0 ? void 0 : _c.count)) {
|
|
16
|
+
if (!((_a = salla.config.get('store.features')) === null || _a === void 0 ? void 0 : _a.includes('conditional-offer')) || (salla.storage.get("cart") !== '' && !((_c = (_b = salla.storage.get("cart")) === null || _b === void 0 ? void 0 : _b.summary) === null || _c === void 0 ? void 0 : _c.count))) {
|
|
17
17
|
throw new Error('feature or cart object does not existed');
|
|
18
18
|
}
|
|
19
19
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"salla-conditional-offer.js","sourceRoot":"","sources":["../../../src/components/salla-conditional-offer/salla-conditional-offer.tsx"],"names":[],"mappings":"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","sourcesContent":["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\")?.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.error('salla-conditional-offer:: Error', 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\" : \"\"}`} >\n {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"]}
|
|
1
|
+
{"version":3,"file":"salla-conditional-offer.js","sourceRoot":"","sources":["../../../src/components/salla-conditional-offer/salla-conditional-offer.tsx"],"names":[],"mappings":"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","sourcesContent":["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.error('salla-conditional-offer:: Error', 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\" : \"\"}`} >\n {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"]}
|