@salla.sa/twilight-components 2.12.15 → 2.12.16

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 (22) hide show
  1. package/dist/cjs/salla-installment.cjs.entry.js +61 -14
  2. package/dist/cjs/salla-installment.cjs.entry.js.map +1 -1
  3. package/dist/collection/components/salla-installment/salla-installment.js +61 -14
  4. package/dist/collection/components/salla-installment/salla-installment.js.map +1 -1
  5. package/dist/components/salla-installment.js +61 -14
  6. package/dist/components/salla-installment.js.map +1 -1
  7. package/dist/esm/salla-installment.entry.js +62 -15
  8. package/dist/esm/salla-installment.entry.js.map +1 -1
  9. package/dist/esm-es5/salla-installment.entry.js +1 -1
  10. package/dist/esm-es5/salla-installment.entry.js.map +1 -1
  11. package/dist/twilight/p-5e28ad7e.system.js +1 -1
  12. package/dist/twilight/p-d80d1435.system.entry.js +5 -0
  13. package/dist/twilight/p-d80d1435.system.entry.js.map +1 -0
  14. package/dist/twilight/p-e9437753.entry.js +5 -0
  15. package/dist/twilight/p-e9437753.entry.js.map +1 -0
  16. package/dist/twilight/twilight.esm.js +1 -1
  17. package/dist/types/components/salla-installment/salla-installment.d.ts +2 -1
  18. package/package.json +2 -2
  19. package/dist/twilight/p-0973f52a.system.entry.js +0 -5
  20. package/dist/twilight/p-0973f52a.system.entry.js.map +0 -1
  21. package/dist/twilight/p-5f0dffdf.entry.js +0 -5
  22. package/dist/twilight/p-5f0dffdf.entry.js.map +0 -1
package/dist/cjs/salla-installment.cjs.entry.js CHANGED
@@ -29,6 +29,13 @@ const SallaInstallment = class {
29
29
  }
30
30
  this.renderInstallments();
31
31
  });
32
+ salla.event.on('product::price.updated', ({ data }) => {
33
+ if (!data.price || data.price == this.price) {
34
+ return;
35
+ }
36
+ this.price = data.price;
37
+ this.renderInstallments(true);
38
+ });
32
39
  }
33
40
  render() {
34
41
  return (index.h(index.Host, null, this.tamaraIsActive ?
@@ -39,13 +46,19 @@ const SallaInstallment = class {
39
46
  index.h("div", { class: "spotii-wrapper" }, index.h("div", { class: "spotii-promo" }))
40
47
  : ''));
41
48
  }
42
- renderInstallments() {
49
+ renderInstallments(isUpdating = false) {
43
50
  // Tamara
44
51
  if (this.tamaraIsActive) {
45
- var script = document.createElement('script');
46
- script.setAttribute('src', 'https://cdn.tamara.co/widget/product-widget.min.js');
47
- document.head.appendChild(script);
48
- script.onload = () => {
52
+ if (isUpdating) {
53
+ var oldTamaraScript = document.querySelector('script[src="https://cdn.tamara.co/widget/product-widget.min.js"]');
54
+ if (oldTamaraScript) {
55
+ oldTamaraScript.remove();
56
+ }
57
+ }
58
+ var tamaraScript = document.createElement('script');
59
+ tamaraScript.setAttribute('src', 'https://cdn.tamara.co/widget/product-widget.min.js');
60
+ document.head.appendChild(tamaraScript);
61
+ tamaraScript.onload = () => {
49
62
  window.TamaraProductWidget.init({ lang: this.language });
50
63
  setTimeout(() => {
51
64
  window.TamaraProductWidget.render();
@@ -54,10 +67,27 @@ const SallaInstallment = class {
54
67
  }
55
68
  // tabby
56
69
  if (this.tabbyIsActive) {
57
- var script = document.createElement('script');
58
- script.setAttribute('src', 'https://checkout.tabby.ai/tabby-promo.js');
59
- document.head.appendChild(script);
60
- script.onload = () => {
70
+ if (isUpdating) {
71
+ // remove #tabbyPromoWrapper and re append it
72
+ var oldTabbyWrapper = this.host.querySelector('#tabbyPromoWrapper');
73
+ if (oldTabbyWrapper) {
74
+ oldTabbyWrapper.remove();
75
+ }
76
+ var tabbyPromoWrapper = document.createElement('div');
77
+ tabbyPromoWrapper.setAttribute('id', 'tabbyPromoWrapper');
78
+ var tabbyPromo = document.createElement('div');
79
+ tabbyPromo.setAttribute('id', 'tabbyPromo');
80
+ tabbyPromoWrapper.appendChild(tabbyPromo);
81
+ this.host.appendChild(tabbyPromoWrapper);
82
+ var oldTabbyScript = document.querySelector('script[src="https://checkout.tabby.ai/tabby-promo.js"]');
83
+ if (oldTabbyScript) {
84
+ oldTabbyScript.remove();
85
+ }
86
+ }
87
+ var tabbyScript = document.createElement('script');
88
+ tabbyScript.setAttribute('src', 'https://checkout.tabby.ai/tabby-promo.js');
89
+ document.head.appendChild(tabbyScript);
90
+ tabbyScript.onload = () => {
61
91
  const TabbyPromo = window.TabbyPromo;
62
92
  new TabbyPromo({
63
93
  selector: '#tabbyPromo',
@@ -69,11 +99,27 @@ const SallaInstallment = class {
69
99
  element.setAttribute('aria-label', 'Tabby Logo');
70
100
  });
71
101
  };
72
- //this is workaround to remove the default border and add margin
102
+ // this is a workaround to remove the default border and add margin
73
103
  this.removeTabbyBorder();
74
104
  }
75
105
  // Spotii
76
106
  if (this.spotiiIsActive) {
107
+ if (isUpdating) {
108
+ var oldSpotiiWrapper = this.host.querySelector('.spotii-wrapper');
109
+ if (oldSpotiiWrapper) {
110
+ oldSpotiiWrapper.remove();
111
+ }
112
+ var spotiiPromoWrapper = document.createElement('div');
113
+ spotiiPromoWrapper.classList.add('spotii-wrapper');
114
+ var spotiiPromo = document.createElement('div');
115
+ spotiiPromo.classList.add('spotii-promo');
116
+ spotiiPromoWrapper.appendChild(spotiiPromo);
117
+ this.host.appendChild(spotiiPromoWrapper);
118
+ var oldSpotiiScript = document.querySelector('script[src="' + salla.url.cdn('js/price-widget-ar-salla.js') + '"]');
119
+ if (oldSpotiiScript) {
120
+ oldSpotiiScript.remove();
121
+ }
122
+ }
77
123
  let amount = salla.money((Number(this.price) / 3).toFixed(2));
78
124
  let isRTL = salla.config.get('theme.is_rtl', true);
79
125
  window.spotiiConfig = {
@@ -90,10 +136,10 @@ const SallaInstallment = class {
90
136
  // forcedShow: false,
91
137
  // merchantID: null,
92
138
  };
93
- var script = document.createElement('script');
94
- script.setAttribute('src', salla.url.cdn('js/price-widget-ar-salla.js'));
95
- document.head.appendChild(script);
96
- // script.onload = () => {
139
+ var spotiiScript = document.createElement('script');
140
+ spotiiScript.setAttribute('src', salla.url.cdn('js/price-widget-ar-salla.js'));
141
+ document.head.appendChild(spotiiScript);
142
+ // spotiiScript.onload = () => {
97
143
  // // setTimeout()
98
144
  // }
99
145
  }
@@ -119,6 +165,7 @@ const SallaInstallment = class {
119
165
  }
120
166
  }, this.tabbyRemoveBorderTries * 500);
121
167
  }
168
+ get host() { return index.getElement(this); }
122
169
  };
123
170
  SallaInstallment.style = sallaInstallmentCss;
124
171
 
package/dist/cjs/salla-installment.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"salla-installment.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["./src/components/salla-installment/salla-installment.scss?tag=salla-installment","./src/components/salla-installment/salla-installment.tsx"],"sourcesContent":["/*\n The whole installment methods is a third-party widgets,\n So there aren't a custom classes (as other components) to style them.\n*/\n\nsalla-installment:empty {\n display: none;\n}\n/*\n* Installment::Tabby\n*/\n#tabbyPromoWrapper {\n background: white;\n border-radius: 0.375rem;\n transition: box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n margin-bottom: 20px;\n\n .salla-y &{\n border: 1px solid var(--color-grey-dark);\n border-radius: 12px\n }\n\n &:hover{\n box-shadow: 0 0 #0000, 0 0 #0000, 5px 10px 30px #2B2D340D;\n }\n\n #tabbyPromo {\n * {\n font-family: var(--font-main);\n }\n\n > div > div {\n max-width: none;\n //padding: 15px;\n box-shadow: none;\n border: none;\n }\n\n .tabby-promo-snippet {\n max-width: 100%;\n min-height: 100px;\n padding: 18px 20px;\n // border-color: var(--color-grey-dark);\n border: none !important;\n\n\n &__text, &__link {\n font-size: var(--font-sm);\n color: var(--color-text) !important;\n }\n\n &__link {\n font-weight: bold;\n }\n }\n }\n}\n\n.tabby-promo-wrapper {\n #tabby-promo {\n font-family: var(--font-main) !important;\n\n .tabby-promo {\n &__feature-title {\n font-size: var(--font-md);\n }\n\n &__feature-desc {\n font-size: var(--font-sm);\n line-height: 20px;\n }\n }\n }\n}\n\n/*\n* Installment::Tamara & Spotii\n*/\n.tamara-product-widget{\n margin-bottom: 20px;\n}\n\n.tamara-product-widget,\n.spotii-wrapper {\n min-height: 100px;\n position: relative;\n color: var(--color-text);\n font-size: var(--font-sm);\n line-height: 1.25;\n padding: 18px 20px 18px 100px !important;\n background: white;\n border-radius: 0.375rem;\n transition: box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n\n .salla-y &{\n border-radius: 12px;\n border: 1px solid var(--color-grey-dark);\n }\n\n &:hover{\n box-shadow: 0 0 #0000, 0 0 #0000, 5px 10px 30px #2B2D340D;\n }\n .spotii-logo {\n float: left;\n margin: 0 0 0 -75px;\n }\n}\n.ltr .tamara-product-widget,\n.ltr .spotii-wrapper{\n text-align: left;\n padding: 18px 100px 18px 20px !important;\n .spotii-logo {\n float: right;\n margin: 0 -75px 0 0;\n }\n .spotii-product-widget {\n text-align: left !important;\n }\n}\n\n.spotii-wrapper {\n margin-bottom: 20px;\n .spotii-promo {\n font-size: var(--font-md);\n }\n\n .spotii-product-widget {\n font-size: var(--font-sm) !important;\n margin-top: 10px;\n }\n}\n\n.tamara-product-widget{\n .tamara-logo {\n position: absolute;\n left: 20px;\n top: 18px;\n margin: 0 !important;\n\n .ltr &{\n right: 20px;\n left: auto;\n }\n }\n\n span {\n font-family: var(--font-main);\n font-size: var(--font-sm);\n color: var(--color-text);\n\n &:last-child {\n display: block;\n position: relative;\n margin-top: 8px;\n }\n }\n}\n\n.tamara-popup {\n &__wrap {\n overflow: auto !important;\n }\n}\n","import {Component, Host, h, Prop, State} from '@stencil/core';\n\n@Component({\n tag: 'salla-installment',\n styleUrl: 'salla-installment.scss',\n})\n\nexport class SallaInstallment {\n private tabbyBorderRemoved: boolean = false;\n private tabbyRemoveBorderTries: number = 0;\n\n constructor() {\n salla.lang.onLoaded(() => {\n const installment = salla.config.get('store.settings.installments');\n if (installment) {\n this.tamaraIsActive = installment.includes('tamara_installment');\n this.tabbyIsActive = installment.includes('tabby_installment');\n this.spotiiIsActive = installment.includes('spotii_pay');\n }\n this.renderInstallments();\n });\n }\n\n /**\n * Current product price\n */\n @Prop() price: string;\n /**\n * Language code\n */\n @Prop() language: string = salla.config.get('user.language_code');\n /**\n * Currency code\n */\n @Prop() currency: string = salla.config.get('user.currency_code');\n\n @State() tamaraIsActive: boolean;\n @State() tabbyIsActive: boolean;\n @State() spotiiIsActive: boolean;\n\n render() {\n return (\n <Host>\n {this.tamaraIsActive ?\n <div class=\"tamara-product-widget\"\n data-price={this.price}\n data-currency={this.currency}\n data-lang={this.language}\n data-payment-type=\"installment\">\n </div>\n : ''}\n\n {this.tabbyIsActive ?\n <div id=\"tabbyPromoWrapper\">\n <div id=\"tabbyPromo\"></div>\n </div>\n : ''}\n\n {this.spotiiIsActive ?\n <div class=\"spotii-wrapper\">\n {/*No need for the price, the price already in the page, and also tammara & tabby doesn't have price */}\n <div class=\"spotii-promo\"></div>\n </div>\n : ''}\n </Host>\n );\n }\n\n renderInstallments() {\n // Tamara\n if (this.tamaraIsActive) {\n var script = document.createElement('script');\n script.setAttribute('src', 'https://cdn.tamara.co/widget/product-widget.min.js');\n document.head.appendChild(script);\n script.onload = () => {\n window.TamaraProductWidget.init({lang: this.language})\n setTimeout(() => {\n window.TamaraProductWidget.render()\n }, 300)\n }\n }\n\n // tabby\n if (this.tabbyIsActive) {\n var script = document.createElement('script');\n script.setAttribute('src', 'https://checkout.tabby.ai/tabby-promo.js');\n document.head.appendChild(script);\n script.onload = () => {\n const TabbyPromo = window.TabbyPromo;\n new TabbyPromo({\n selector: '#tabbyPromo',\n currency: this.currency,\n price: this.price,\n lang: this.language,\n });\n document.querySelectorAll('.tabby-promo-snippet__logo').forEach(function (element) {\n element.setAttribute('aria-label', 'Tabby Logo')\n });\n }\n //this is workaround to remove the default border and add margin\n this.removeTabbyBorder();\n }\n\n // Spotii\n if (this.spotiiIsActive) {\n let amount = salla.money((Number(this.price) / 3).toFixed(2));\n let isRTL = salla.config.get('theme.is_rtl', true);\n window.spotiiConfig = {\n targetXPath: ['.spotii-wrapper'],\n renderToPath: ['.spotii-promo'],\n numberOfPayment: 3,\n currency: this.currency,\n templateLine: \"${textOne} ${number} ${textTwo} \" + amount + \"${logo} ${info}\",\n //todo:: translate these\n textOne: isRTL ? \"جزء الدفع على\" : \"Split it into\",\n textTwo: isRTL ? \"أقساط متساوية بدون تكاليف اضافية بقيمة\" : \"payments of\",\n textThree: \"مع\",\n price: this.price,\n // forcedShow: false,\n // merchantID: null,\n }\n\n var script = document.createElement('script');\n\n script.setAttribute('src', salla.url.cdn('js/price-widget-ar-salla.js'));\n document.head.appendChild(script);\n // script.onload = () => {\n // // setTimeout()\n // }\n }\n\n }\n\n /**\n * this is workaround to remove the default border and add margin\n * we will try to remove tabby border 5 times for 7.5 seconds\n */\n removeTabbyBorder() {\n if (this.tabbyBorderRemoved || this.tabbyRemoveBorderTries > 5) {\n return;\n }\n this.tabbyRemoveBorderTries++;\n setTimeout(() => {\n let promo: any = document.querySelector('#tabbyPromo>div>div');\n promo = promo ? promo.shadowRoot.querySelector('div[class^=\"styles__tabby-promo-snippet--\"]') : null;\n if (promo) {\n promo.style = 'border: none; margin: 15px 0!important;';\n this.tabbyBorderRemoved = true;\n } else {\n this.removeTabbyBorder();\n }\n }, this.tabbyRemoveBorderTries * 500)\n }\n}\n"],"version":3}
1
+ {"file":"salla-installment.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["./src/components/salla-installment/salla-installment.scss?tag=salla-installment","./src/components/salla-installment/salla-installment.tsx"],"sourcesContent":["/*\n The whole installment methods is a third-party widgets,\n So there aren't a custom classes (as other components) to style them.\n*/\n\nsalla-installment:empty {\n display: none;\n}\n/*\n* Installment::Tabby\n*/\n#tabbyPromoWrapper {\n background: white;\n border-radius: 0.375rem;\n transition: box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n margin-bottom: 20px;\n\n .salla-y &{\n border: 1px solid var(--color-grey-dark);\n border-radius: 12px\n }\n\n &:hover{\n box-shadow: 0 0 #0000, 0 0 #0000, 5px 10px 30px #2B2D340D;\n }\n\n #tabbyPromo {\n * {\n font-family: var(--font-main);\n }\n\n > div > div {\n max-width: none;\n //padding: 15px;\n box-shadow: none;\n border: none;\n }\n\n .tabby-promo-snippet {\n max-width: 100%;\n min-height: 100px;\n padding: 18px 20px;\n // border-color: var(--color-grey-dark);\n border: none !important;\n\n\n &__text, &__link {\n font-size: var(--font-sm);\n color: var(--color-text) !important;\n }\n\n &__link {\n font-weight: bold;\n }\n }\n }\n}\n\n.tabby-promo-wrapper {\n #tabby-promo {\n font-family: var(--font-main) !important;\n\n .tabby-promo {\n &__feature-title {\n font-size: var(--font-md);\n }\n\n &__feature-desc {\n font-size: var(--font-sm);\n line-height: 20px;\n }\n }\n }\n}\n\n/*\n* Installment::Tamara & Spotii\n*/\n.tamara-product-widget{\n margin-bottom: 20px;\n}\n\n.tamara-product-widget,\n.spotii-wrapper {\n min-height: 100px;\n position: relative;\n color: var(--color-text);\n font-size: var(--font-sm);\n line-height: 1.25;\n padding: 18px 20px 18px 100px !important;\n background: white;\n border-radius: 0.375rem;\n transition: box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n\n .salla-y &{\n border-radius: 12px;\n border: 1px solid var(--color-grey-dark);\n }\n\n &:hover{\n box-shadow: 0 0 #0000, 0 0 #0000, 5px 10px 30px #2B2D340D;\n }\n .spotii-logo {\n float: left;\n margin: 0 0 0 -75px;\n }\n}\n.ltr .tamara-product-widget,\n.ltr .spotii-wrapper{\n text-align: left;\n padding: 18px 100px 18px 20px !important;\n .spotii-logo {\n float: right;\n margin: 0 -75px 0 0;\n }\n .spotii-product-widget {\n text-align: left !important;\n }\n}\n\n.spotii-wrapper {\n margin-bottom: 20px;\n .spotii-promo {\n font-size: var(--font-md);\n }\n\n .spotii-product-widget {\n font-size: var(--font-sm) !important;\n margin-top: 10px;\n }\n}\n\n.tamara-product-widget{\n .tamara-logo {\n position: absolute;\n left: 20px;\n top: 18px;\n margin: 0 !important;\n\n .ltr &{\n right: 20px;\n left: auto;\n }\n }\n\n span {\n font-family: var(--font-main);\n font-size: var(--font-sm);\n color: var(--color-text);\n\n &:last-child {\n display: block;\n position: relative;\n margin-top: 8px;\n }\n }\n}\n\n.tamara-popup {\n &__wrap {\n overflow: auto !important;\n }\n}\n","import { Component, Host, h, Prop, State, Element } from '@stencil/core';\n\n@Component({\n tag: 'salla-installment',\n styleUrl: 'salla-installment.scss',\n})\n\nexport class SallaInstallment {\n private tabbyBorderRemoved: boolean = false;\n private tabbyRemoveBorderTries: number = 0;\n @Element() host: HTMLElement;\n constructor() {\n salla.lang.onLoaded(() => {\n const installment = salla.config.get('store.settings.installments');\n if (installment) {\n this.tamaraIsActive = installment.includes('tamara_installment');\n this.tabbyIsActive = installment.includes('tabby_installment');\n this.spotiiIsActive = installment.includes('spotii_pay');\n }\n this.renderInstallments();\n });\n\n salla.event.on('product::price.updated', ({ data }) => {\n if (!data.price || data.price == this.price) {\n return;\n }\n this.price = data.price;\n this.renderInstallments(true);\n });\n }\n\n /**\n * Current product price\n */\n @Prop() price: string;\n /**\n * Language code\n */\n @Prop() language: string = salla.config.get('user.language_code');\n /**\n * Currency code\n */\n @Prop() currency: string = salla.config.get('user.currency_code');\n\n @State() tamaraIsActive: boolean;\n @State() tabbyIsActive: boolean;\n @State() spotiiIsActive: boolean;\n\n render() {\n return (\n <Host>\n {this.tamaraIsActive ?\n <div class=\"tamara-product-widget\"\n data-price={this.price}\n data-currency={this.currency}\n data-lang={this.language}\n data-payment-type=\"installment\">\n </div>\n : ''}\n\n {this.tabbyIsActive ?\n <div id=\"tabbyPromoWrapper\">\n <div id=\"tabbyPromo\"></div>\n </div>\n : ''}\n\n {this.spotiiIsActive ?\n <div class=\"spotii-wrapper\">\n {/*No need for the price, the price already in the page, and also tammara & tabby doesn't have price */}\n <div class=\"spotii-promo\"></div>\n </div>\n : ''}\n </Host>\n );\n }\n\n renderInstallments(isUpdating: boolean = false) {\n // Tamara\n if (this.tamaraIsActive) {\n if (isUpdating) {\n var oldTamaraScript = document.querySelector('script[src=\"https://cdn.tamara.co/widget/product-widget.min.js\"]');\n if (oldTamaraScript) {\n oldTamaraScript.remove();\n }\n }\n\n var tamaraScript = document.createElement('script');\n tamaraScript.setAttribute('src', 'https://cdn.tamara.co/widget/product-widget.min.js');\n document.head.appendChild(tamaraScript);\n tamaraScript.onload = () => {\n window.TamaraProductWidget.init({ lang: this.language });\n setTimeout(() => {\n window.TamaraProductWidget.render();\n }, 300);\n };\n }\n\n // tabby\n if (this.tabbyIsActive) {\n if (isUpdating) {\n\n // remove #tabbyPromoWrapper and re append it\n var oldTabbyWrapper = this.host.querySelector('#tabbyPromoWrapper');\n if (oldTabbyWrapper) {\n oldTabbyWrapper.remove();\n }\n\n var tabbyPromoWrapper = document.createElement('div');\n tabbyPromoWrapper.setAttribute('id', 'tabbyPromoWrapper');\n var tabbyPromo = document.createElement('div');\n tabbyPromo.setAttribute('id', 'tabbyPromo');\n tabbyPromoWrapper.appendChild(tabbyPromo);\n this.host.appendChild(tabbyPromoWrapper);\n\n var oldTabbyScript = document.querySelector('script[src=\"https://checkout.tabby.ai/tabby-promo.js\"]');\n if (oldTabbyScript) {\n oldTabbyScript.remove();\n }\n }\n\n var tabbyScript = document.createElement('script');\n tabbyScript.setAttribute('src', 'https://checkout.tabby.ai/tabby-promo.js');\n document.head.appendChild(tabbyScript);\n tabbyScript.onload = () => {\n const TabbyPromo = window.TabbyPromo;\n new TabbyPromo({\n selector: '#tabbyPromo',\n currency: this.currency,\n price: this.price,\n lang: this.language,\n });\n document.querySelectorAll('.tabby-promo-snippet__logo').forEach(function (element) {\n element.setAttribute('aria-label', 'Tabby Logo');\n });\n }\n // this is a workaround to remove the default border and add margin\n this.removeTabbyBorder();\n }\n\n // Spotii\n if (this.spotiiIsActive) {\n if (isUpdating) {\n\n var oldSpotiiWrapper = this.host.querySelector('.spotii-wrapper');\n if (oldSpotiiWrapper) {\n oldSpotiiWrapper.remove();\n }\n\n var spotiiPromoWrapper = document.createElement('div');\n spotiiPromoWrapper.classList.add('spotii-wrapper');\n var spotiiPromo = document.createElement('div');\n spotiiPromo.classList.add('spotii-promo');\n spotiiPromoWrapper.appendChild(spotiiPromo);\n this.host.appendChild(spotiiPromoWrapper);\n var oldSpotiiScript = document.querySelector('script[src=\"' + salla.url.cdn('js/price-widget-ar-salla.js') + '\"]');\n if (oldSpotiiScript) {\n oldSpotiiScript.remove();\n }\n }\n\n let amount = salla.money((Number(this.price) / 3).toFixed(2));\n let isRTL = salla.config.get('theme.is_rtl', true);\n window.spotiiConfig = {\n targetXPath: ['.spotii-wrapper'],\n renderToPath: ['.spotii-promo'],\n numberOfPayment: 3,\n currency: this.currency,\n templateLine: \"${textOne} ${number} ${textTwo} \" + amount + \"${logo} ${info}\",\n //todo:: translate these\n textOne: isRTL ? \"جزء الدفع على\" : \"Split it into\",\n textTwo: isRTL ? \"أقساط متساوية بدون تكاليف اضافية بقيمة\" : \"payments of\",\n textThree: \"مع\",\n price: this.price,\n // forcedShow: false,\n // merchantID: null,\n };\n\n var spotiiScript = document.createElement('script');\n spotiiScript.setAttribute('src', salla.url.cdn('js/price-widget-ar-salla.js'));\n document.head.appendChild(spotiiScript);\n // spotiiScript.onload = () => {\n // // setTimeout()\n // }\n }\n }\n\n\n /**\n * this is workaround to remove the default border and add margin\n * we will try to remove tabby border 5 times for 7.5 seconds\n */\n removeTabbyBorder() {\n if (this.tabbyBorderRemoved || this.tabbyRemoveBorderTries > 5) {\n return;\n }\n this.tabbyRemoveBorderTries++;\n setTimeout(() => {\n let promo: any = document.querySelector('#tabbyPromo>div>div');\n promo = promo ? promo.shadowRoot.querySelector('div[class^=\"styles__tabby-promo-snippet--\"]') : null;\n if (promo) {\n promo.style = 'border: none; margin: 15px 0!important;';\n this.tabbyBorderRemoved = true;\n } else {\n this.removeTabbyBorder();\n }\n }, this.tabbyRemoveBorderTries * 500)\n }\n}\n"],"version":3}
package/dist/collection/components/salla-installment/salla-installment.js CHANGED
@@ -21,6 +21,13 @@ export class SallaInstallment {
21
21
  }
22
22
  this.renderInstallments();
23
23
  });
24
+ salla.event.on('product::price.updated', ({ data }) => {
25
+ if (!data.price || data.price == this.price) {
26
+ return;
27
+ }
28
+ this.price = data.price;
29
+ this.renderInstallments(true);
30
+ });
24
31
  }
25
32
  render() {
26
33
  return (h(Host, null, this.tamaraIsActive ?
@@ -31,13 +38,19 @@ export class SallaInstallment {
31
38
  h("div", { class: "spotii-wrapper" }, h("div", { class: "spotii-promo" }))
32
39
  : ''));
33
40
  }
34
- renderInstallments() {
41
+ renderInstallments(isUpdating = false) {
35
42
  // Tamara
36
43
  if (this.tamaraIsActive) {
37
- var script = document.createElement('script');
38
- script.setAttribute('src', 'https://cdn.tamara.co/widget/product-widget.min.js');
39
- document.head.appendChild(script);
40
- script.onload = () => {
44
+ if (isUpdating) {
45
+ var oldTamaraScript = document.querySelector('script[src="https://cdn.tamara.co/widget/product-widget.min.js"]');
46
+ if (oldTamaraScript) {
47
+ oldTamaraScript.remove();
48
+ }
49
+ }
50
+ var tamaraScript = document.createElement('script');
51
+ tamaraScript.setAttribute('src', 'https://cdn.tamara.co/widget/product-widget.min.js');
52
+ document.head.appendChild(tamaraScript);
53
+ tamaraScript.onload = () => {
41
54
  window.TamaraProductWidget.init({ lang: this.language });
42
55
  setTimeout(() => {
43
56
  window.TamaraProductWidget.render();
@@ -46,10 +59,27 @@ export class SallaInstallment {
46
59
  }
47
60
  // tabby
48
61
  if (this.tabbyIsActive) {
49
- var script = document.createElement('script');
50
- script.setAttribute('src', 'https://checkout.tabby.ai/tabby-promo.js');
51
- document.head.appendChild(script);
52
- script.onload = () => {
62
+ if (isUpdating) {
63
+ // remove #tabbyPromoWrapper and re append it
64
+ var oldTabbyWrapper = this.host.querySelector('#tabbyPromoWrapper');
65
+ if (oldTabbyWrapper) {
66
+ oldTabbyWrapper.remove();
67
+ }
68
+ var tabbyPromoWrapper = document.createElement('div');
69
+ tabbyPromoWrapper.setAttribute('id', 'tabbyPromoWrapper');
70
+ var tabbyPromo = document.createElement('div');
71
+ tabbyPromo.setAttribute('id', 'tabbyPromo');
72
+ tabbyPromoWrapper.appendChild(tabbyPromo);
73
+ this.host.appendChild(tabbyPromoWrapper);
74
+ var oldTabbyScript = document.querySelector('script[src="https://checkout.tabby.ai/tabby-promo.js"]');
75
+ if (oldTabbyScript) {
76
+ oldTabbyScript.remove();
77
+ }
78
+ }
79
+ var tabbyScript = document.createElement('script');
80
+ tabbyScript.setAttribute('src', 'https://checkout.tabby.ai/tabby-promo.js');
81
+ document.head.appendChild(tabbyScript);
82
+ tabbyScript.onload = () => {
53
83
  const TabbyPromo = window.TabbyPromo;
54
84
  new TabbyPromo({
55
85
  selector: '#tabbyPromo',
@@ -61,11 +91,27 @@ export class SallaInstallment {
61
91
  element.setAttribute('aria-label', 'Tabby Logo');
62
92
  });
63
93
  };
64
- //this is workaround to remove the default border and add margin
94
+ // this is a workaround to remove the default border and add margin
65
95
  this.removeTabbyBorder();
66
96
  }
67
97
  // Spotii
68
98
  if (this.spotiiIsActive) {
99
+ if (isUpdating) {
100
+ var oldSpotiiWrapper = this.host.querySelector('.spotii-wrapper');
101
+ if (oldSpotiiWrapper) {
102
+ oldSpotiiWrapper.remove();
103
+ }
104
+ var spotiiPromoWrapper = document.createElement('div');
105
+ spotiiPromoWrapper.classList.add('spotii-wrapper');
106
+ var spotiiPromo = document.createElement('div');
107
+ spotiiPromo.classList.add('spotii-promo');
108
+ spotiiPromoWrapper.appendChild(spotiiPromo);
109
+ this.host.appendChild(spotiiPromoWrapper);
110
+ var oldSpotiiScript = document.querySelector('script[src="' + salla.url.cdn('js/price-widget-ar-salla.js') + '"]');
111
+ if (oldSpotiiScript) {
112
+ oldSpotiiScript.remove();
113
+ }
114
+ }
69
115
  let amount = salla.money((Number(this.price) / 3).toFixed(2));
70
116
  let isRTL = salla.config.get('theme.is_rtl', true);
71
117
  window.spotiiConfig = {
@@ -82,10 +128,10 @@ export class SallaInstallment {
82
128
  // forcedShow: false,
83
129
  // merchantID: null,
84
130
  };
85
- var script = document.createElement('script');
86
- script.setAttribute('src', salla.url.cdn('js/price-widget-ar-salla.js'));
87
- document.head.appendChild(script);
88
- // script.onload = () => {
131
+ var spotiiScript = document.createElement('script');
132
+ spotiiScript.setAttribute('src', salla.url.cdn('js/price-widget-ar-salla.js'));
133
+ document.head.appendChild(spotiiScript);
134
+ // spotiiScript.onload = () => {
89
135
  // // setTimeout()
90
136
  // }
91
137
  }
@@ -186,5 +232,6 @@ export class SallaInstallment {
186
232
  "spotiiIsActive": {}
187
233
  };
188
234
  }
235
+ static get elementRef() { return "host"; }
189
236
  }
190
237
  //# sourceMappingURL=salla-installment.js.map
package/dist/collection/components/salla-installment/salla-installment.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"salla-installment.js","sourceRoot":"","sources":["../../../src/components/salla-installment/salla-installment.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AAO9D,MAAM,OAAO,gBAAgB;EAI3B;IAHQ,uBAAkB,GAAY,KAAK,CAAC;IACpC,2BAAsB,GAAW,CAAC,CAAC;;oBAqBhB,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,oBAAoB,CAAC;oBAItC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,oBAAoB,CAAC;;;;IAtB/D,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;MACvB,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,6BAA6B,CAAC,CAAC;MACpE,IAAI,WAAW,EAAE;QACf,IAAI,CAAC,cAAc,GAAG,WAAW,CAAC,QAAQ,CAAC,oBAAoB,CAAC,CAAC;QACjE,IAAI,CAAC,aAAa,GAAG,WAAW,CAAC,QAAQ,CAAC,mBAAmB,CAAC,CAAC;QAC/D,IAAI,CAAC,cAAc,GAAG,WAAW,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;OAC1D;MACD,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC,CAAC,CAAC;GACJ;EAmBD,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACF,IAAI,CAAC,cAAc,CAAC,CAAC;QACpB,WAAK,KAAK,EAAC,uBAAuB,gBACjB,IAAI,CAAC,KAAK,mBACP,IAAI,CAAC,QAAQ,eACjB,IAAI,CAAC,QAAQ,uBACN,aAAa,GAC9B;QACN,CAAC,CAAC,EAAE;MAEL,IAAI,CAAC,aAAa,CAAC,CAAC;QACnB,WAAK,EAAE,EAAC,mBAAmB;UACzB,WAAK,EAAE,EAAC,YAAY,GAAO,CACvB;QACN,CAAC,CAAC,EAAE;MAEL,IAAI,CAAC,cAAc,CAAC,CAAC;QACpB,WAAK,KAAK,EAAC,gBAAgB;UAEzB,WAAK,KAAK,EAAC,cAAc,GAAO,CAC5B;QACN,CAAC,CAAC,EAAE,CACD,CACR,CAAC;EACJ,CAAC;EAED,kBAAkB;IAChB,SAAS;IACT,IAAI,IAAI,CAAC,cAAc,EAAE;MACvB,IAAI,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;MAC9C,MAAM,CAAC,YAAY,CAAC,KAAK,EAAE,oDAAoD,CAAC,CAAC;MACjF,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;MAClC,MAAM,CAAC,MAAM,GAAG,GAAG,EAAE;QACnB,MAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAC,CAAC,CAAA;QACtD,UAAU,CAAC,GAAG,EAAE;UACd,MAAM,CAAC,mBAAmB,CAAC,MAAM,EAAE,CAAA;QACrC,CAAC,EAAE,GAAG,CAAC,CAAA;MACT,CAAC,CAAA;KACF;IAED,QAAQ;IACR,IAAI,IAAI,CAAC,aAAa,EAAE;MACtB,IAAI,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;MAC9C,MAAM,CAAC,YAAY,CAAC,KAAK,EAAE,0CAA0C,CAAC,CAAC;MACvE,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;MAClC,MAAM,CAAC,MAAM,GAAG,GAAG,EAAE;QACnB,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;QACrC,IAAI,UAAU,CAAC;UACb,QAAQ,EAAE,aAAa;UACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;UACvB,KAAK,EAAE,IAAI,CAAC,KAAK;UACjB,IAAI,EAAE,IAAI,CAAC,QAAQ;SACpB,CAAC,CAAC;QACH,QAAQ,CAAC,gBAAgB,CAAC,4BAA4B,CAAC,CAAC,OAAO,CAAC,UAAU,OAAO;UAC/E,OAAO,CAAC,YAAY,CAAC,YAAY,EAAE,YAAY,CAAC,CAAA;QAClD,CAAC,CAAC,CAAC;MACL,CAAC,CAAA;MACD,gEAAgE;MAChE,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC1B;IAED,SAAS;IACT,IAAI,IAAI,CAAC,cAAc,EAAE;MACvB,IAAI,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;MAC9D,IAAI,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;MACnD,MAAM,CAAC,YAAY,GAAG;QACpB,WAAW,EAAE,CAAC,iBAAiB,CAAC;QAChC,YAAY,EAAE,CAAC,eAAe,CAAC;QAC/B,eAAe,EAAE,CAAC;QAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,YAAY,EAAE,kCAAkC,GAAG,MAAM,GAAG,iBAAiB;QAC7E,wBAAwB;QACxB,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe;QAClD,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,wCAAwC,CAAC,CAAC,CAAC,aAAa;QACzE,SAAS,EAAE,IAAI;QACf,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,qBAAqB;QACrB,oBAAoB;OACrB,CAAA;MAED,IAAI,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;MAE9C,MAAM,CAAC,YAAY,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,6BAA6B,CAAC,CAAC,CAAC;MACzE,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;MAClC,0BAA0B;MAC1B,oBAAoB;MACpB,IAAI;KACL;EAEH,CAAC;EAED;;;KAGG;EACH,iBAAiB;IACf,IAAI,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,sBAAsB,GAAG,CAAC,EAAE;MAC9D,OAAO;KACR;IACD,IAAI,CAAC,sBAAsB,EAAE,CAAC;IAC9B,UAAU,CAAC,GAAG,EAAE;MACd,IAAI,KAAK,GAAQ,QAAQ,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;MAC/D,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,6CAA6C,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;MACrG,IAAI,KAAK,EAAE;QACT,KAAK,CAAC,KAAK,GAAG,yCAAyC,CAAC;QACxD,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;OAChC;WAAM;QACL,IAAI,CAAC,iBAAiB,EAAE,CAAC;OAC1B;IACH,CAAC,EAAE,IAAI,CAAC,sBAAsB,GAAG,GAAG,CAAC,CAAA;EACvC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, h, Prop, State} from '@stencil/core';\n\n@Component({\n tag: 'salla-installment',\n styleUrl: 'salla-installment.scss',\n})\n\nexport class SallaInstallment {\n private tabbyBorderRemoved: boolean = false;\n private tabbyRemoveBorderTries: number = 0;\n\n constructor() {\n salla.lang.onLoaded(() => {\n const installment = salla.config.get('store.settings.installments');\n if (installment) {\n this.tamaraIsActive = installment.includes('tamara_installment');\n this.tabbyIsActive = installment.includes('tabby_installment');\n this.spotiiIsActive = installment.includes('spotii_pay');\n }\n this.renderInstallments();\n });\n }\n\n /**\n * Current product price\n */\n @Prop() price: string;\n /**\n * Language code\n */\n @Prop() language: string = salla.config.get('user.language_code');\n /**\n * Currency code\n */\n @Prop() currency: string = salla.config.get('user.currency_code');\n\n @State() tamaraIsActive: boolean;\n @State() tabbyIsActive: boolean;\n @State() spotiiIsActive: boolean;\n\n render() {\n return (\n <Host>\n {this.tamaraIsActive ?\n <div class=\"tamara-product-widget\"\n data-price={this.price}\n data-currency={this.currency}\n data-lang={this.language}\n data-payment-type=\"installment\">\n </div>\n : ''}\n\n {this.tabbyIsActive ?\n <div id=\"tabbyPromoWrapper\">\n <div id=\"tabbyPromo\"></div>\n </div>\n : ''}\n\n {this.spotiiIsActive ?\n <div class=\"spotii-wrapper\">\n {/*No need for the price, the price already in the page, and also tammara & tabby doesn't have price */}\n <div class=\"spotii-promo\"></div>\n </div>\n : ''}\n </Host>\n );\n }\n\n renderInstallments() {\n // Tamara\n if (this.tamaraIsActive) {\n var script = document.createElement('script');\n script.setAttribute('src', 'https://cdn.tamara.co/widget/product-widget.min.js');\n document.head.appendChild(script);\n script.onload = () => {\n window.TamaraProductWidget.init({lang: this.language})\n setTimeout(() => {\n window.TamaraProductWidget.render()\n }, 300)\n }\n }\n\n // tabby\n if (this.tabbyIsActive) {\n var script = document.createElement('script');\n script.setAttribute('src', 'https://checkout.tabby.ai/tabby-promo.js');\n document.head.appendChild(script);\n script.onload = () => {\n const TabbyPromo = window.TabbyPromo;\n new TabbyPromo({\n selector: '#tabbyPromo',\n currency: this.currency,\n price: this.price,\n lang: this.language,\n });\n document.querySelectorAll('.tabby-promo-snippet__logo').forEach(function (element) {\n element.setAttribute('aria-label', 'Tabby Logo')\n });\n }\n //this is workaround to remove the default border and add margin\n this.removeTabbyBorder();\n }\n\n // Spotii\n if (this.spotiiIsActive) {\n let amount = salla.money((Number(this.price) / 3).toFixed(2));\n let isRTL = salla.config.get('theme.is_rtl', true);\n window.spotiiConfig = {\n targetXPath: ['.spotii-wrapper'],\n renderToPath: ['.spotii-promo'],\n numberOfPayment: 3,\n currency: this.currency,\n templateLine: \"${textOne} ${number} ${textTwo} \" + amount + \"${logo} ${info}\",\n //todo:: translate these\n textOne: isRTL ? \"جزء الدفع على\" : \"Split it into\",\n textTwo: isRTL ? \"أقساط متساوية بدون تكاليف اضافية بقيمة\" : \"payments of\",\n textThree: \"مع\",\n price: this.price,\n // forcedShow: false,\n // merchantID: null,\n }\n\n var script = document.createElement('script');\n\n script.setAttribute('src', salla.url.cdn('js/price-widget-ar-salla.js'));\n document.head.appendChild(script);\n // script.onload = () => {\n // // setTimeout()\n // }\n }\n\n }\n\n /**\n * this is workaround to remove the default border and add margin\n * we will try to remove tabby border 5 times for 7.5 seconds\n */\n removeTabbyBorder() {\n if (this.tabbyBorderRemoved || this.tabbyRemoveBorderTries > 5) {\n return;\n }\n this.tabbyRemoveBorderTries++;\n setTimeout(() => {\n let promo: any = document.querySelector('#tabbyPromo>div>div');\n promo = promo ? promo.shadowRoot.querySelector('div[class^=\"styles__tabby-promo-snippet--\"]') : null;\n if (promo) {\n promo.style = 'border: none; margin: 15px 0!important;';\n this.tabbyBorderRemoved = true;\n } else {\n this.removeTabbyBorder();\n }\n }, this.tabbyRemoveBorderTries * 500)\n }\n}\n"]}
1
+ {"version":3,"file":"salla-installment.js","sourceRoot":"","sources":["../../../src/components/salla-installment/salla-installment.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAOzE,MAAM,OAAO,gBAAgB;EAI3B;IAHQ,uBAAkB,GAAY,KAAK,CAAC;IACpC,2BAAsB,GAAW,CAAC,CAAC;;oBA6BhB,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,oBAAoB,CAAC;oBAItC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,oBAAoB,CAAC;;;;IA9B/D,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;MACvB,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,6BAA6B,CAAC,CAAC;MACpE,IAAI,WAAW,EAAE;QACf,IAAI,CAAC,cAAc,GAAG,WAAW,CAAC,QAAQ,CAAC,oBAAoB,CAAC,CAAC;QACjE,IAAI,CAAC,aAAa,GAAG,WAAW,CAAC,QAAQ,CAAC,mBAAmB,CAAC,CAAC;QAC/D,IAAI,CAAC,cAAc,GAAG,WAAW,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;OAC1D;MACD,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC,CAAC,CAAC;IAEH,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,wBAAwB,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;MACpD,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE;QAC3C,OAAO;OACR;MACD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;MACxB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC,CAAC,CAAC;GACJ;EAmBD,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACF,IAAI,CAAC,cAAc,CAAC,CAAC;QACpB,WAAK,KAAK,EAAC,uBAAuB,gBACpB,IAAI,CAAC,KAAK,mBACP,IAAI,CAAC,QAAQ,eACjB,IAAI,CAAC,QAAQ,uBACN,aAAa,GAC3B;QACN,CAAC,CAAC,EAAE;MAEL,IAAI,CAAC,aAAa,CAAC,CAAC;QACnB,WAAK,EAAE,EAAC,mBAAmB;UACzB,WAAK,EAAE,EAAC,YAAY,GAAO,CACvB;QACN,CAAC,CAAC,EAAE;MAEL,IAAI,CAAC,cAAc,CAAC,CAAC;QACpB,WAAK,KAAK,EAAC,gBAAgB;UAEzB,WAAK,KAAK,EAAC,cAAc,GAAO,CAC5B;QACN,CAAC,CAAC,EAAE,CACD,CACR,CAAC;EACJ,CAAC;EAED,kBAAkB,CAAC,aAAsB,KAAK;IAC5C,SAAS;IACT,IAAI,IAAI,CAAC,cAAc,EAAE;MACvB,IAAI,UAAU,EAAE;QACd,IAAI,eAAe,GAAG,QAAQ,CAAC,aAAa,CAAC,kEAAkE,CAAC,CAAC;QACjH,IAAI,eAAe,EAAE;UACnB,eAAe,CAAC,MAAM,EAAE,CAAC;SAC1B;OACF;MAED,IAAI,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;MACpD,YAAY,CAAC,YAAY,CAAC,KAAK,EAAE,oDAAoD,CAAC,CAAC;MACvF,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;MACxC,YAAY,CAAC,MAAM,GAAG,GAAG,EAAE;QACzB,MAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;QACzD,UAAU,CAAC,GAAG,EAAE;UACd,MAAM,CAAC,mBAAmB,CAAC,MAAM,EAAE,CAAC;QACtC,CAAC,EAAE,GAAG,CAAC,CAAC;MACV,CAAC,CAAC;KACH;IAED,QAAQ;IACR,IAAI,IAAI,CAAC,aAAa,EAAE;MACtB,IAAI,UAAU,EAAE;QAEd,6CAA6C;QAC7C,IAAI,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;QACpE,IAAI,eAAe,EAAE;UACnB,eAAe,CAAC,MAAM,EAAE,CAAC;SAC1B;QAED,IAAI,iBAAiB,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACtD,iBAAiB,CAAC,YAAY,CAAC,IAAI,EAAE,mBAAmB,CAAC,CAAC;QAC1D,IAAI,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC/C,UAAU,CAAC,YAAY,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;QAC5C,iBAAiB,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QAC1C,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC;QAEzC,IAAI,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,wDAAwD,CAAC,CAAC;QACtG,IAAI,cAAc,EAAE;UAClB,cAAc,CAAC,MAAM,EAAE,CAAC;SACzB;OACF;MAED,IAAI,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;MACnD,WAAW,CAAC,YAAY,CAAC,KAAK,EAAE,0CAA0C,CAAC,CAAC;MAC5E,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;MACvC,WAAW,CAAC,MAAM,GAAG,GAAG,EAAE;QACxB,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;QACrC,IAAI,UAAU,CAAC;UACb,QAAQ,EAAE,aAAa;UACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;UACvB,KAAK,EAAE,IAAI,CAAC,KAAK;UACjB,IAAI,EAAE,IAAI,CAAC,QAAQ;SACpB,CAAC,CAAC;QACH,QAAQ,CAAC,gBAAgB,CAAC,4BAA4B,CAAC,CAAC,OAAO,CAAC,UAAU,OAAO;UAC/E,OAAO,CAAC,YAAY,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;QACnD,CAAC,CAAC,CAAC;MACL,CAAC,CAAA;MACD,mEAAmE;MACnE,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC1B;IAED,SAAS;IACT,IAAI,IAAI,CAAC,cAAc,EAAE;MACvB,IAAI,UAAU,EAAE;QAEd,IAAI,gBAAgB,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;QAClE,IAAI,gBAAgB,EAAE;UACpB,gBAAgB,CAAC,MAAM,EAAE,CAAC;SAC3B;QAED,IAAI,kBAAkB,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACvD,kBAAkB,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;QACnD,IAAI,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAChD,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;QAC1C,kBAAkB,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;QAC5C,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,kBAAkB,CAAC,CAAC;QAC1C,IAAI,eAAe,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,GAAG,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,6BAA6B,CAAC,GAAG,IAAI,CAAC,CAAC;QACnH,IAAI,eAAe,EAAE;UACnB,eAAe,CAAC,MAAM,EAAE,CAAC;SAC1B;OACF;MAED,IAAI,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;MAC9D,IAAI,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;MACnD,MAAM,CAAC,YAAY,GAAG;QACpB,WAAW,EAAE,CAAC,iBAAiB,CAAC;QAChC,YAAY,EAAE,CAAC,eAAe,CAAC;QAC/B,eAAe,EAAE,CAAC;QAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,YAAY,EAAE,kCAAkC,GAAG,MAAM,GAAG,iBAAiB;QAC7E,wBAAwB;QACxB,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe;QAClD,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,wCAAwC,CAAC,CAAC,CAAC,aAAa;QACzE,SAAS,EAAE,IAAI;QACf,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,qBAAqB;QACrB,oBAAoB;OACrB,CAAC;MAEF,IAAI,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;MACpD,YAAY,CAAC,YAAY,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,6BAA6B,CAAC,CAAC,CAAC;MAC/E,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;MACxC,gCAAgC;MAChC,oBAAoB;MACpB,IAAI;KACL;EACH,CAAC;EAGD;;;KAGG;EACH,iBAAiB;IACf,IAAI,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,sBAAsB,GAAG,CAAC,EAAE;MAC9D,OAAO;KACR;IACD,IAAI,CAAC,sBAAsB,EAAE,CAAC;IAC9B,UAAU,CAAC,GAAG,EAAE;MACd,IAAI,KAAK,GAAQ,QAAQ,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;MAC/D,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,6CAA6C,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;MACrG,IAAI,KAAK,EAAE;QACT,KAAK,CAAC,KAAK,GAAG,yCAAyC,CAAC;QACxD,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;OAChC;WAAM;QACL,IAAI,CAAC,iBAAiB,EAAE,CAAC;OAC1B;IACH,CAAC,EAAE,IAAI,CAAC,sBAAsB,GAAG,GAAG,CAAC,CAAA;EACvC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, State, Element } from '@stencil/core';\n\n@Component({\n tag: 'salla-installment',\n styleUrl: 'salla-installment.scss',\n})\n\nexport class SallaInstallment {\n private tabbyBorderRemoved: boolean = false;\n private tabbyRemoveBorderTries: number = 0;\n @Element() host: HTMLElement;\n constructor() {\n salla.lang.onLoaded(() => {\n const installment = salla.config.get('store.settings.installments');\n if (installment) {\n this.tamaraIsActive = installment.includes('tamara_installment');\n this.tabbyIsActive = installment.includes('tabby_installment');\n this.spotiiIsActive = installment.includes('spotii_pay');\n }\n this.renderInstallments();\n });\n\n salla.event.on('product::price.updated', ({ data }) => {\n if (!data.price || data.price == this.price) {\n return;\n }\n this.price = data.price;\n this.renderInstallments(true);\n });\n }\n\n /**\n * Current product price\n */\n @Prop() price: string;\n /**\n * Language code\n */\n @Prop() language: string = salla.config.get('user.language_code');\n /**\n * Currency code\n */\n @Prop() currency: string = salla.config.get('user.currency_code');\n\n @State() tamaraIsActive: boolean;\n @State() tabbyIsActive: boolean;\n @State() spotiiIsActive: boolean;\n\n render() {\n return (\n <Host>\n {this.tamaraIsActive ?\n <div class=\"tamara-product-widget\"\n data-price={this.price}\n data-currency={this.currency}\n data-lang={this.language}\n data-payment-type=\"installment\">\n </div>\n : ''}\n\n {this.tabbyIsActive ?\n <div id=\"tabbyPromoWrapper\">\n <div id=\"tabbyPromo\"></div>\n </div>\n : ''}\n\n {this.spotiiIsActive ?\n <div class=\"spotii-wrapper\">\n {/*No need for the price, the price already in the page, and also tammara & tabby doesn't have price */}\n <div class=\"spotii-promo\"></div>\n </div>\n : ''}\n </Host>\n );\n }\n\n renderInstallments(isUpdating: boolean = false) {\n // Tamara\n if (this.tamaraIsActive) {\n if (isUpdating) {\n var oldTamaraScript = document.querySelector('script[src=\"https://cdn.tamara.co/widget/product-widget.min.js\"]');\n if (oldTamaraScript) {\n oldTamaraScript.remove();\n }\n }\n\n var tamaraScript = document.createElement('script');\n tamaraScript.setAttribute('src', 'https://cdn.tamara.co/widget/product-widget.min.js');\n document.head.appendChild(tamaraScript);\n tamaraScript.onload = () => {\n window.TamaraProductWidget.init({ lang: this.language });\n setTimeout(() => {\n window.TamaraProductWidget.render();\n }, 300);\n };\n }\n\n // tabby\n if (this.tabbyIsActive) {\n if (isUpdating) {\n\n // remove #tabbyPromoWrapper and re append it\n var oldTabbyWrapper = this.host.querySelector('#tabbyPromoWrapper');\n if (oldTabbyWrapper) {\n oldTabbyWrapper.remove();\n }\n\n var tabbyPromoWrapper = document.createElement('div');\n tabbyPromoWrapper.setAttribute('id', 'tabbyPromoWrapper');\n var tabbyPromo = document.createElement('div');\n tabbyPromo.setAttribute('id', 'tabbyPromo');\n tabbyPromoWrapper.appendChild(tabbyPromo);\n this.host.appendChild(tabbyPromoWrapper);\n\n var oldTabbyScript = document.querySelector('script[src=\"https://checkout.tabby.ai/tabby-promo.js\"]');\n if (oldTabbyScript) {\n oldTabbyScript.remove();\n }\n }\n\n var tabbyScript = document.createElement('script');\n tabbyScript.setAttribute('src', 'https://checkout.tabby.ai/tabby-promo.js');\n document.head.appendChild(tabbyScript);\n tabbyScript.onload = () => {\n const TabbyPromo = window.TabbyPromo;\n new TabbyPromo({\n selector: '#tabbyPromo',\n currency: this.currency,\n price: this.price,\n lang: this.language,\n });\n document.querySelectorAll('.tabby-promo-snippet__logo').forEach(function (element) {\n element.setAttribute('aria-label', 'Tabby Logo');\n });\n }\n // this is a workaround to remove the default border and add margin\n this.removeTabbyBorder();\n }\n\n // Spotii\n if (this.spotiiIsActive) {\n if (isUpdating) {\n\n var oldSpotiiWrapper = this.host.querySelector('.spotii-wrapper');\n if (oldSpotiiWrapper) {\n oldSpotiiWrapper.remove();\n }\n\n var spotiiPromoWrapper = document.createElement('div');\n spotiiPromoWrapper.classList.add('spotii-wrapper');\n var spotiiPromo = document.createElement('div');\n spotiiPromo.classList.add('spotii-promo');\n spotiiPromoWrapper.appendChild(spotiiPromo);\n this.host.appendChild(spotiiPromoWrapper);\n var oldSpotiiScript = document.querySelector('script[src=\"' + salla.url.cdn('js/price-widget-ar-salla.js') + '\"]');\n if (oldSpotiiScript) {\n oldSpotiiScript.remove();\n }\n }\n\n let amount = salla.money((Number(this.price) / 3).toFixed(2));\n let isRTL = salla.config.get('theme.is_rtl', true);\n window.spotiiConfig = {\n targetXPath: ['.spotii-wrapper'],\n renderToPath: ['.spotii-promo'],\n numberOfPayment: 3,\n currency: this.currency,\n templateLine: \"${textOne} ${number} ${textTwo} \" + amount + \"${logo} ${info}\",\n //todo:: translate these\n textOne: isRTL ? \"جزء الدفع على\" : \"Split it into\",\n textTwo: isRTL ? \"أقساط متساوية بدون تكاليف اضافية بقيمة\" : \"payments of\",\n textThree: \"مع\",\n price: this.price,\n // forcedShow: false,\n // merchantID: null,\n };\n\n var spotiiScript = document.createElement('script');\n spotiiScript.setAttribute('src', salla.url.cdn('js/price-widget-ar-salla.js'));\n document.head.appendChild(spotiiScript);\n // spotiiScript.onload = () => {\n // // setTimeout()\n // }\n }\n }\n\n\n /**\n * this is workaround to remove the default border and add margin\n * we will try to remove tabby border 5 times for 7.5 seconds\n */\n removeTabbyBorder() {\n if (this.tabbyBorderRemoved || this.tabbyRemoveBorderTries > 5) {\n return;\n }\n this.tabbyRemoveBorderTries++;\n setTimeout(() => {\n let promo: any = document.querySelector('#tabbyPromo>div>div');\n promo = promo ? promo.shadowRoot.querySelector('div[class^=\"styles__tabby-promo-snippet--\"]') : null;\n if (promo) {\n promo.style = 'border: none; margin: 15px 0!important;';\n this.tabbyBorderRemoved = true;\n } else {\n this.removeTabbyBorder();\n }\n }, this.tabbyRemoveBorderTries * 500)\n }\n}\n"]}
package/dist/components/salla-installment.js CHANGED
@@ -26,6 +26,13 @@ const SallaInstallment$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
26
26
  }
27
27
  this.renderInstallments();
28
28
  });
29
+ salla.event.on('product::price.updated', ({ data }) => {
30
+ if (!data.price || data.price == this.price) {
31
+ return;
32
+ }
33
+ this.price = data.price;
34
+ this.renderInstallments(true);
35
+ });
29
36
  }
30
37
  render() {
31
38
  return (h(Host, null, this.tamaraIsActive ?
@@ -36,13 +43,19 @@ const SallaInstallment$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
36
43
  h("div", { class: "spotii-wrapper" }, h("div", { class: "spotii-promo" }))
37
44
  : ''));
38
45
  }
39
- renderInstallments() {
46
+ renderInstallments(isUpdating = false) {
40
47
  // Tamara
41
48
  if (this.tamaraIsActive) {
42
- var script = document.createElement('script');
43
- script.setAttribute('src', 'https://cdn.tamara.co/widget/product-widget.min.js');
44
- document.head.appendChild(script);
45
- script.onload = () => {
49
+ if (isUpdating) {
50
+ var oldTamaraScript = document.querySelector('script[src="https://cdn.tamara.co/widget/product-widget.min.js"]');
51
+ if (oldTamaraScript) {
52
+ oldTamaraScript.remove();
53
+ }
54
+ }
55
+ var tamaraScript = document.createElement('script');
56
+ tamaraScript.setAttribute('src', 'https://cdn.tamara.co/widget/product-widget.min.js');
57
+ document.head.appendChild(tamaraScript);
58
+ tamaraScript.onload = () => {
46
59
  window.TamaraProductWidget.init({ lang: this.language });
47
60
  setTimeout(() => {
48
61
  window.TamaraProductWidget.render();
@@ -51,10 +64,27 @@ const SallaInstallment$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
51
64
  }
52
65
  // tabby
53
66
  if (this.tabbyIsActive) {
54
- var script = document.createElement('script');
55
- script.setAttribute('src', 'https://checkout.tabby.ai/tabby-promo.js');
56
- document.head.appendChild(script);
57
- script.onload = () => {
67
+ if (isUpdating) {
68
+ // remove #tabbyPromoWrapper and re append it
69
+ var oldTabbyWrapper = this.host.querySelector('#tabbyPromoWrapper');
70
+ if (oldTabbyWrapper) {
71
+ oldTabbyWrapper.remove();
72
+ }
73
+ var tabbyPromoWrapper = document.createElement('div');
74
+ tabbyPromoWrapper.setAttribute('id', 'tabbyPromoWrapper');
75
+ var tabbyPromo = document.createElement('div');
76
+ tabbyPromo.setAttribute('id', 'tabbyPromo');
77
+ tabbyPromoWrapper.appendChild(tabbyPromo);
78
+ this.host.appendChild(tabbyPromoWrapper);
79
+ var oldTabbyScript = document.querySelector('script[src="https://checkout.tabby.ai/tabby-promo.js"]');
80
+ if (oldTabbyScript) {
81
+ oldTabbyScript.remove();
82
+ }
83
+ }
84
+ var tabbyScript = document.createElement('script');
85
+ tabbyScript.setAttribute('src', 'https://checkout.tabby.ai/tabby-promo.js');
86
+ document.head.appendChild(tabbyScript);
87
+ tabbyScript.onload = () => {
58
88
  const TabbyPromo = window.TabbyPromo;
59
89
  new TabbyPromo({
60
90
  selector: '#tabbyPromo',
@@ -66,11 +96,27 @@ const SallaInstallment$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
66
96
  element.setAttribute('aria-label', 'Tabby Logo');
67
97
  });
68
98
  };
69
- //this is workaround to remove the default border and add margin
99
+ // this is a workaround to remove the default border and add margin
70
100
  this.removeTabbyBorder();
71
101
  }
72
102
  // Spotii
73
103
  if (this.spotiiIsActive) {
104
+ if (isUpdating) {
105
+ var oldSpotiiWrapper = this.host.querySelector('.spotii-wrapper');
106
+ if (oldSpotiiWrapper) {
107
+ oldSpotiiWrapper.remove();
108
+ }
109
+ var spotiiPromoWrapper = document.createElement('div');
110
+ spotiiPromoWrapper.classList.add('spotii-wrapper');
111
+ var spotiiPromo = document.createElement('div');
112
+ spotiiPromo.classList.add('spotii-promo');
113
+ spotiiPromoWrapper.appendChild(spotiiPromo);
114
+ this.host.appendChild(spotiiPromoWrapper);
115
+ var oldSpotiiScript = document.querySelector('script[src="' + salla.url.cdn('js/price-widget-ar-salla.js') + '"]');
116
+ if (oldSpotiiScript) {
117
+ oldSpotiiScript.remove();
118
+ }
119
+ }
74
120
  let amount = salla.money((Number(this.price) / 3).toFixed(2));
75
121
  let isRTL = salla.config.get('theme.is_rtl', true);
76
122
  window.spotiiConfig = {
@@ -87,10 +133,10 @@ const SallaInstallment$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
87
133
  // forcedShow: false,
88
134
  // merchantID: null,
89
135
  };
90
- var script = document.createElement('script');
91
- script.setAttribute('src', salla.url.cdn('js/price-widget-ar-salla.js'));
92
- document.head.appendChild(script);
93
- // script.onload = () => {
136
+ var spotiiScript = document.createElement('script');
137
+ spotiiScript.setAttribute('src', salla.url.cdn('js/price-widget-ar-salla.js'));
138
+ document.head.appendChild(spotiiScript);
139
+ // spotiiScript.onload = () => {
94
140
  // // setTimeout()
95
141
  // }
96
142
  }
@@ -116,6 +162,7 @@ const SallaInstallment$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
116
162
  }
117
163
  }, this.tabbyRemoveBorderTries * 500);
118
164
  }
165
+ get host() { return this; }
119
166
  static get style() { return sallaInstallmentCss; }
120
167
  }, [0, "salla-installment", {
121
168
  "price": [1],
package/dist/components/salla-installment.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"salla-installment.js","mappings":"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","names":["SallaInstallment"],"sources":["./src/components/salla-installment/salla-installment.scss?tag=salla-installment","./src/components/salla-installment/salla-installment.tsx"],"sourcesContent":["/*\n The whole installment methods is a third-party widgets,\n So there aren't a custom classes (as other components) to style them.\n*/\n\nsalla-installment:empty {\n display: none;\n}\n/*\n* Installment::Tabby\n*/\n#tabbyPromoWrapper {\n background: white;\n border-radius: 0.375rem;\n transition: box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n margin-bottom: 20px;\n\n .salla-y &{\n border: 1px solid var(--color-grey-dark);\n border-radius: 12px\n }\n\n &:hover{\n box-shadow: 0 0 #0000, 0 0 #0000, 5px 10px 30px #2B2D340D;\n }\n\n #tabbyPromo {\n * {\n font-family: var(--font-main);\n }\n\n > div > div {\n max-width: none;\n //padding: 15px;\n box-shadow: none;\n border: none;\n }\n\n .tabby-promo-snippet {\n max-width: 100%;\n min-height: 100px;\n padding: 18px 20px;\n // border-color: var(--color-grey-dark);\n border: none !important;\n\n\n &__text, &__link {\n font-size: var(--font-sm);\n color: var(--color-text) !important;\n }\n\n &__link {\n font-weight: bold;\n }\n }\n }\n}\n\n.tabby-promo-wrapper {\n #tabby-promo {\n font-family: var(--font-main) !important;\n\n .tabby-promo {\n &__feature-title {\n font-size: var(--font-md);\n }\n\n &__feature-desc {\n font-size: var(--font-sm);\n line-height: 20px;\n }\n }\n }\n}\n\n/*\n* Installment::Tamara & Spotii\n*/\n.tamara-product-widget{\n margin-bottom: 20px;\n}\n\n.tamara-product-widget,\n.spotii-wrapper {\n min-height: 100px;\n position: relative;\n color: var(--color-text);\n font-size: var(--font-sm);\n line-height: 1.25;\n padding: 18px 20px 18px 100px !important;\n background: white;\n border-radius: 0.375rem;\n transition: box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n\n .salla-y &{\n border-radius: 12px;\n border: 1px solid var(--color-grey-dark);\n }\n\n &:hover{\n box-shadow: 0 0 #0000, 0 0 #0000, 5px 10px 30px #2B2D340D;\n }\n .spotii-logo {\n float: left;\n margin: 0 0 0 -75px;\n }\n}\n.ltr .tamara-product-widget,\n.ltr .spotii-wrapper{\n text-align: left;\n padding: 18px 100px 18px 20px !important;\n .spotii-logo {\n float: right;\n margin: 0 -75px 0 0;\n }\n .spotii-product-widget {\n text-align: left !important;\n }\n}\n\n.spotii-wrapper {\n margin-bottom: 20px;\n .spotii-promo {\n font-size: var(--font-md);\n }\n\n .spotii-product-widget {\n font-size: var(--font-sm) !important;\n margin-top: 10px;\n }\n}\n\n.tamara-product-widget{\n .tamara-logo {\n position: absolute;\n left: 20px;\n top: 18px;\n margin: 0 !important;\n\n .ltr &{\n right: 20px;\n left: auto;\n }\n }\n\n span {\n font-family: var(--font-main);\n font-size: var(--font-sm);\n color: var(--color-text);\n\n &:last-child {\n display: block;\n position: relative;\n margin-top: 8px;\n }\n }\n}\n\n.tamara-popup {\n &__wrap {\n overflow: auto !important;\n }\n}\n","import {Component, Host, h, Prop, State} from '@stencil/core';\n\n@Component({\n tag: 'salla-installment',\n styleUrl: 'salla-installment.scss',\n})\n\nexport class SallaInstallment {\n private tabbyBorderRemoved: boolean = false;\n private tabbyRemoveBorderTries: number = 0;\n\n constructor() {\n salla.lang.onLoaded(() => {\n const installment = salla.config.get('store.settings.installments');\n if (installment) {\n this.tamaraIsActive = installment.includes('tamara_installment');\n this.tabbyIsActive = installment.includes('tabby_installment');\n this.spotiiIsActive = installment.includes('spotii_pay');\n }\n this.renderInstallments();\n });\n }\n\n /**\n * Current product price\n */\n @Prop() price: string;\n /**\n * Language code\n */\n @Prop() language: string = salla.config.get('user.language_code');\n /**\n * Currency code\n */\n @Prop() currency: string = salla.config.get('user.currency_code');\n\n @State() tamaraIsActive: boolean;\n @State() tabbyIsActive: boolean;\n @State() spotiiIsActive: boolean;\n\n render() {\n return (\n <Host>\n {this.tamaraIsActive ?\n <div class=\"tamara-product-widget\"\n data-price={this.price}\n data-currency={this.currency}\n data-lang={this.language}\n data-payment-type=\"installment\">\n </div>\n : ''}\n\n {this.tabbyIsActive ?\n <div id=\"tabbyPromoWrapper\">\n <div id=\"tabbyPromo\"></div>\n </div>\n : ''}\n\n {this.spotiiIsActive ?\n <div class=\"spotii-wrapper\">\n {/*No need for the price, the price already in the page, and also tammara & tabby doesn't have price */}\n <div class=\"spotii-promo\"></div>\n </div>\n : ''}\n </Host>\n );\n }\n\n renderInstallments() {\n // Tamara\n if (this.tamaraIsActive) {\n var script = document.createElement('script');\n script.setAttribute('src', 'https://cdn.tamara.co/widget/product-widget.min.js');\n document.head.appendChild(script);\n script.onload = () => {\n window.TamaraProductWidget.init({lang: this.language})\n setTimeout(() => {\n window.TamaraProductWidget.render()\n }, 300)\n }\n }\n\n // tabby\n if (this.tabbyIsActive) {\n var script = document.createElement('script');\n script.setAttribute('src', 'https://checkout.tabby.ai/tabby-promo.js');\n document.head.appendChild(script);\n script.onload = () => {\n const TabbyPromo = window.TabbyPromo;\n new TabbyPromo({\n selector: '#tabbyPromo',\n currency: this.currency,\n price: this.price,\n lang: this.language,\n });\n document.querySelectorAll('.tabby-promo-snippet__logo').forEach(function (element) {\n element.setAttribute('aria-label', 'Tabby Logo')\n });\n }\n //this is workaround to remove the default border and add margin\n this.removeTabbyBorder();\n }\n\n // Spotii\n if (this.spotiiIsActive) {\n let amount = salla.money((Number(this.price) / 3).toFixed(2));\n let isRTL = salla.config.get('theme.is_rtl', true);\n window.spotiiConfig = {\n targetXPath: ['.spotii-wrapper'],\n renderToPath: ['.spotii-promo'],\n numberOfPayment: 3,\n currency: this.currency,\n templateLine: \"${textOne} ${number} ${textTwo} \" + amount + \"${logo} ${info}\",\n //todo:: translate these\n textOne: isRTL ? \"جزء الدفع على\" : \"Split it into\",\n textTwo: isRTL ? \"أقساط متساوية بدون تكاليف اضافية بقيمة\" : \"payments of\",\n textThree: \"مع\",\n price: this.price,\n // forcedShow: false,\n // merchantID: null,\n }\n\n var script = document.createElement('script');\n\n script.setAttribute('src', salla.url.cdn('js/price-widget-ar-salla.js'));\n document.head.appendChild(script);\n // script.onload = () => {\n // // setTimeout()\n // }\n }\n\n }\n\n /**\n * this is workaround to remove the default border and add margin\n * we will try to remove tabby border 5 times for 7.5 seconds\n */\n removeTabbyBorder() {\n if (this.tabbyBorderRemoved || this.tabbyRemoveBorderTries > 5) {\n return;\n }\n this.tabbyRemoveBorderTries++;\n setTimeout(() => {\n let promo: any = document.querySelector('#tabbyPromo>div>div');\n promo = promo ? promo.shadowRoot.querySelector('div[class^=\"styles__tabby-promo-snippet--\"]') : null;\n if (promo) {\n promo.style = 'border: none; margin: 15px 0!important;';\n this.tabbyBorderRemoved = true;\n } else {\n this.removeTabbyBorder();\n }\n }, this.tabbyRemoveBorderTries * 500)\n }\n}\n"],"version":3}
1
+ {"file":"salla-installment.js","mappings":"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","names":["SallaInstallment"],"sources":["./src/components/salla-installment/salla-installment.scss?tag=salla-installment","./src/components/salla-installment/salla-installment.tsx"],"sourcesContent":["/*\n The whole installment methods is a third-party widgets,\n So there aren't a custom classes (as other components) to style them.\n*/\n\nsalla-installment:empty {\n display: none;\n}\n/*\n* Installment::Tabby\n*/\n#tabbyPromoWrapper {\n background: white;\n border-radius: 0.375rem;\n transition: box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n margin-bottom: 20px;\n\n .salla-y &{\n border: 1px solid var(--color-grey-dark);\n border-radius: 12px\n }\n\n &:hover{\n box-shadow: 0 0 #0000, 0 0 #0000, 5px 10px 30px #2B2D340D;\n }\n\n #tabbyPromo {\n * {\n font-family: var(--font-main);\n }\n\n > div > div {\n max-width: none;\n //padding: 15px;\n box-shadow: none;\n border: none;\n }\n\n .tabby-promo-snippet {\n max-width: 100%;\n min-height: 100px;\n padding: 18px 20px;\n // border-color: var(--color-grey-dark);\n border: none !important;\n\n\n &__text, &__link {\n font-size: var(--font-sm);\n color: var(--color-text) !important;\n }\n\n &__link {\n font-weight: bold;\n }\n }\n }\n}\n\n.tabby-promo-wrapper {\n #tabby-promo {\n font-family: var(--font-main) !important;\n\n .tabby-promo {\n &__feature-title {\n font-size: var(--font-md);\n }\n\n &__feature-desc {\n font-size: var(--font-sm);\n line-height: 20px;\n }\n }\n }\n}\n\n/*\n* Installment::Tamara & Spotii\n*/\n.tamara-product-widget{\n margin-bottom: 20px;\n}\n\n.tamara-product-widget,\n.spotii-wrapper {\n min-height: 100px;\n position: relative;\n color: var(--color-text);\n font-size: var(--font-sm);\n line-height: 1.25;\n padding: 18px 20px 18px 100px !important;\n background: white;\n border-radius: 0.375rem;\n transition: box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n\n .salla-y &{\n border-radius: 12px;\n border: 1px solid var(--color-grey-dark);\n }\n\n &:hover{\n box-shadow: 0 0 #0000, 0 0 #0000, 5px 10px 30px #2B2D340D;\n }\n .spotii-logo {\n float: left;\n margin: 0 0 0 -75px;\n }\n}\n.ltr .tamara-product-widget,\n.ltr .spotii-wrapper{\n text-align: left;\n padding: 18px 100px 18px 20px !important;\n .spotii-logo {\n float: right;\n margin: 0 -75px 0 0;\n }\n .spotii-product-widget {\n text-align: left !important;\n }\n}\n\n.spotii-wrapper {\n margin-bottom: 20px;\n .spotii-promo {\n font-size: var(--font-md);\n }\n\n .spotii-product-widget {\n font-size: var(--font-sm) !important;\n margin-top: 10px;\n }\n}\n\n.tamara-product-widget{\n .tamara-logo {\n position: absolute;\n left: 20px;\n top: 18px;\n margin: 0 !important;\n\n .ltr &{\n right: 20px;\n left: auto;\n }\n }\n\n span {\n font-family: var(--font-main);\n font-size: var(--font-sm);\n color: var(--color-text);\n\n &:last-child {\n display: block;\n position: relative;\n margin-top: 8px;\n }\n }\n}\n\n.tamara-popup {\n &__wrap {\n overflow: auto !important;\n }\n}\n","import { Component, Host, h, Prop, State, Element } from '@stencil/core';\n\n@Component({\n tag: 'salla-installment',\n styleUrl: 'salla-installment.scss',\n})\n\nexport class SallaInstallment {\n private tabbyBorderRemoved: boolean = false;\n private tabbyRemoveBorderTries: number = 0;\n @Element() host: HTMLElement;\n constructor() {\n salla.lang.onLoaded(() => {\n const installment = salla.config.get('store.settings.installments');\n if (installment) {\n this.tamaraIsActive = installment.includes('tamara_installment');\n this.tabbyIsActive = installment.includes('tabby_installment');\n this.spotiiIsActive = installment.includes('spotii_pay');\n }\n this.renderInstallments();\n });\n\n salla.event.on('product::price.updated', ({ data }) => {\n if (!data.price || data.price == this.price) {\n return;\n }\n this.price = data.price;\n this.renderInstallments(true);\n });\n }\n\n /**\n * Current product price\n */\n @Prop() price: string;\n /**\n * Language code\n */\n @Prop() language: string = salla.config.get('user.language_code');\n /**\n * Currency code\n */\n @Prop() currency: string = salla.config.get('user.currency_code');\n\n @State() tamaraIsActive: boolean;\n @State() tabbyIsActive: boolean;\n @State() spotiiIsActive: boolean;\n\n render() {\n return (\n <Host>\n {this.tamaraIsActive ?\n <div class=\"tamara-product-widget\"\n data-price={this.price}\n data-currency={this.currency}\n data-lang={this.language}\n data-payment-type=\"installment\">\n </div>\n : ''}\n\n {this.tabbyIsActive ?\n <div id=\"tabbyPromoWrapper\">\n <div id=\"tabbyPromo\"></div>\n </div>\n : ''}\n\n {this.spotiiIsActive ?\n <div class=\"spotii-wrapper\">\n {/*No need for the price, the price already in the page, and also tammara & tabby doesn't have price */}\n <div class=\"spotii-promo\"></div>\n </div>\n : ''}\n </Host>\n );\n }\n\n renderInstallments(isUpdating: boolean = false) {\n // Tamara\n if (this.tamaraIsActive) {\n if (isUpdating) {\n var oldTamaraScript = document.querySelector('script[src=\"https://cdn.tamara.co/widget/product-widget.min.js\"]');\n if (oldTamaraScript) {\n oldTamaraScript.remove();\n }\n }\n\n var tamaraScript = document.createElement('script');\n tamaraScript.setAttribute('src', 'https://cdn.tamara.co/widget/product-widget.min.js');\n document.head.appendChild(tamaraScript);\n tamaraScript.onload = () => {\n window.TamaraProductWidget.init({ lang: this.language });\n setTimeout(() => {\n window.TamaraProductWidget.render();\n }, 300);\n };\n }\n\n // tabby\n if (this.tabbyIsActive) {\n if (isUpdating) {\n\n // remove #tabbyPromoWrapper and re append it\n var oldTabbyWrapper = this.host.querySelector('#tabbyPromoWrapper');\n if (oldTabbyWrapper) {\n oldTabbyWrapper.remove();\n }\n\n var tabbyPromoWrapper = document.createElement('div');\n tabbyPromoWrapper.setAttribute('id', 'tabbyPromoWrapper');\n var tabbyPromo = document.createElement('div');\n tabbyPromo.setAttribute('id', 'tabbyPromo');\n tabbyPromoWrapper.appendChild(tabbyPromo);\n this.host.appendChild(tabbyPromoWrapper);\n\n var oldTabbyScript = document.querySelector('script[src=\"https://checkout.tabby.ai/tabby-promo.js\"]');\n if (oldTabbyScript) {\n oldTabbyScript.remove();\n }\n }\n\n var tabbyScript = document.createElement('script');\n tabbyScript.setAttribute('src', 'https://checkout.tabby.ai/tabby-promo.js');\n document.head.appendChild(tabbyScript);\n tabbyScript.onload = () => {\n const TabbyPromo = window.TabbyPromo;\n new TabbyPromo({\n selector: '#tabbyPromo',\n currency: this.currency,\n price: this.price,\n lang: this.language,\n });\n document.querySelectorAll('.tabby-promo-snippet__logo').forEach(function (element) {\n element.setAttribute('aria-label', 'Tabby Logo');\n });\n }\n // this is a workaround to remove the default border and add margin\n this.removeTabbyBorder();\n }\n\n // Spotii\n if (this.spotiiIsActive) {\n if (isUpdating) {\n\n var oldSpotiiWrapper = this.host.querySelector('.spotii-wrapper');\n if (oldSpotiiWrapper) {\n oldSpotiiWrapper.remove();\n }\n\n var spotiiPromoWrapper = document.createElement('div');\n spotiiPromoWrapper.classList.add('spotii-wrapper');\n var spotiiPromo = document.createElement('div');\n spotiiPromo.classList.add('spotii-promo');\n spotiiPromoWrapper.appendChild(spotiiPromo);\n this.host.appendChild(spotiiPromoWrapper);\n var oldSpotiiScript = document.querySelector('script[src=\"' + salla.url.cdn('js/price-widget-ar-salla.js') + '\"]');\n if (oldSpotiiScript) {\n oldSpotiiScript.remove();\n }\n }\n\n let amount = salla.money((Number(this.price) / 3).toFixed(2));\n let isRTL = salla.config.get('theme.is_rtl', true);\n window.spotiiConfig = {\n targetXPath: ['.spotii-wrapper'],\n renderToPath: ['.spotii-promo'],\n numberOfPayment: 3,\n currency: this.currency,\n templateLine: \"${textOne} ${number} ${textTwo} \" + amount + \"${logo} ${info}\",\n //todo:: translate these\n textOne: isRTL ? \"جزء الدفع على\" : \"Split it into\",\n textTwo: isRTL ? \"أقساط متساوية بدون تكاليف اضافية بقيمة\" : \"payments of\",\n textThree: \"مع\",\n price: this.price,\n // forcedShow: false,\n // merchantID: null,\n };\n\n var spotiiScript = document.createElement('script');\n spotiiScript.setAttribute('src', salla.url.cdn('js/price-widget-ar-salla.js'));\n document.head.appendChild(spotiiScript);\n // spotiiScript.onload = () => {\n // // setTimeout()\n // }\n }\n }\n\n\n /**\n * this is workaround to remove the default border and add margin\n * we will try to remove tabby border 5 times for 7.5 seconds\n */\n removeTabbyBorder() {\n if (this.tabbyBorderRemoved || this.tabbyRemoveBorderTries > 5) {\n return;\n }\n this.tabbyRemoveBorderTries++;\n setTimeout(() => {\n let promo: any = document.querySelector('#tabbyPromo>div>div');\n promo = promo ? promo.shadowRoot.querySelector('div[class^=\"styles__tabby-promo-snippet--\"]') : null;\n if (promo) {\n promo.style = 'border: none; margin: 15px 0!important;';\n this.tabbyBorderRemoved = true;\n } else {\n this.removeTabbyBorder();\n }\n }, this.tabbyRemoveBorderTries * 500)\n }\n}\n"],"version":3}