npm - @salla.sa/twilight-components - Versions diffs - 2.14.166 → 2.14.167 - Mend

@salla.sa/twilight-components 2.14.166 → 2.14.167

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.

Files changed (274) hide show

package/dist/collection/components/salla-conditional-offer/salla-conditional-offer.js.map CHANGED Viewed

	@@ -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\") !== '' && !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"]}
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.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, sub_total }: UpdatedCart) {\n const current_value = this.offer.details.based_on === OfferType.PRODUCT_COUNT ? items.reduce((count: number, { quantity }) => count + quantity, 0,) : sub_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"]}