ui.shipaid.com 0.3.59 → 0.3.61
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/README.md +200 -200
- package/dist/widget.es.js +429 -28
- package/dist/widget.iife.js +282 -40
- package/dist/widget.umd.js +282 -40
- package/dist-types/common/shopify/index.d.ts +6 -6
- package/dist-types/common/shopify/protection.d.ts +7 -7
- package/dist-types/common/shopify/types/ShopifyCart.d.ts +29 -29
- package/dist-types/common/shopify/types/ShopifyProduct.d.ts +12 -12
- package/dist-types/common/types/ShipAid.d.ts +82 -81
- package/dist-types/widget/src/assets/confirmation-styles.d.ts +2 -2
- package/dist-types/widget/src/assets/icons.d.ts +9 -8
- package/dist-types/widget/src/assets/learn-more-styles.d.ts +2 -2
- package/dist-types/widget/src/assets/styles.d.ts +2 -2
- package/dist-types/widget/src/components/checkout-button.d.ts +7 -0
- package/dist-types/widget/src/components/checkout-package-protection.d.ts +13 -0
- package/dist-types/widget/src/components/checkoutButton.d.ts +13 -0
- package/dist-types/widget/src/components/confirmation-popup.d.ts +9 -9
- package/dist-types/widget/src/components/content-loader.d.ts +6 -0
- package/dist-types/widget/src/components/learn-more-popup.d.ts +8 -8
- package/dist-types/widget/src/components/shipaid-cart-confirmation.d.ts +15 -15
- package/dist-types/widget/src/shipaid-widget.d.ts +149 -143
- package/dist-types/widget/src/utils/fetch_interceptor.d.ts +3 -3
- package/dist-types/widget/src/utils/fetch_interceptor.test.d.ts +1 -1
- package/dist-types/widget/types/shipaid.d.ts +10 -10
- package/dist-types/widget/types/shopify.d.ts +29 -29
- package/dist-types/widget/types/widget.d.ts +13 -13
- package/package.json +48 -48
- package/dist-types/widget/src/components/product-add-confirmation.d.ts +0 -13
package/dist/widget.es.js
CHANGED
|
@@ -1162,6 +1162,28 @@ const ShipAidLogo = x`
|
|
|
1162
1162
|
</g>
|
|
1163
1163
|
</svg>
|
|
1164
1164
|
`;
|
|
1165
|
+
const ShipAidReducedLogo = x`
|
|
1166
|
+
<svg
|
|
1167
|
+
version="1.0"
|
|
1168
|
+
width="2rem"
|
|
1169
|
+
height="2rem"
|
|
1170
|
+
viewBox="0 0 500.000000 500.000000"
|
|
1171
|
+
preserveAspectRatio="xMidYMid meet"
|
|
1172
|
+
>
|
|
1173
|
+
<g
|
|
1174
|
+
transform="translate(0.000000,500.000000) scale(0.100000,-0.100000)"
|
|
1175
|
+
fill="#0056d6"
|
|
1176
|
+
stroke="none"
|
|
1177
|
+
>
|
|
1178
|
+
<path
|
|
1179
|
+
d="M2465 4855 c-5 -2 -446 -142 -979 -312 -534 -169 -984 -317 -1000 -328 -17 -11 -41 -36 -54 -55 -24 -35 -24 -37 -18 -210 9 -274 84 -1236 170 -2176 37 -401 43 -430 103 -489 25 -24 1389 -912 1702 -1107 93 -59 125 -61 202 -15 30 18 429 275 888 572 647 418 840 547 862 578 15 21 32 62 38 90 16 83 148 1610 191 2202 11 160 21 342 23 405 2 104 0 118 -21 151 -12 21 -34 45 -49 54 -34 23 -1989 645 -2022 644 -14 0 -30 -2 -36 -4z m135 -345 c30 -11 393 -125 805 -255 413 -130 768 -242 791 -250 22 -9 54 -29 70 -46 l29 -30 -1 -182 c-1 -218 -36 -669 -135 -1747 -42 -461 -47 -488 -95 -532 -11 -9 -359 -235 -774 -503 -714 -460 -757 -486 -795 -483 -33 3 -167 85 -775 477 -404 260 -750 484 -768 498 -47 35 -70 89 -81 190 -25 219 -118 1328 -151 1781 -26 368 -26 467 0 509 10 18 29 39 42 47 13 8 374 126 803 261 429 135 812 257 850 270 75 27 95 26 185 -5z"
|
|
1180
|
+
/>
|
|
1181
|
+
<path
|
|
1182
|
+
d="M2340 3816 c-252 -140 -776 -446 -797 -465 -17 -14 -23 -31 -23 -61 0 -30 6 -47 23 -62 26 -23 775 -457 862 -499 33 -16 76 -29 95 -29 48 0 90 22 440 224 l305 176 3 -427 c1 -235 -1 -430 -5 -434 -5 -4 -161 -96 -348 -204 l-340 -196 -60 3 c-58 4 -75 12 -388 192 -251 144 -331 195 -342 217 -12 22 -15 79 -15 291 0 145 -4 268 -8 275 -13 20 -253 153 -278 153 -13 0 -28 -9 -34 -19 -17 -32 -14 -843 4 -884 12 -28 75 -68 507 -317 l494 -285 65 0 65 0 495 286 c481 278 495 287 508 324 10 30 12 167 10 616 -3 548 -4 578 -22 598 -30 33 -297 183 -317 178 -9 -3 -138 -74 -286 -160 -393 -227 -401 -230 -466 -225 -45 4 -78 18 -200 89 -144 82 -164 101 -153 137 3 9 75 56 159 105 141 81 156 87 207 87 43 0 66 -7 105 -30 28 -16 60 -30 71 -30 23 0 236 119 268 150 34 33 13 54 -157 153 -291 169 -278 167 -447 73z"
|
|
1183
|
+
/>
|
|
1184
|
+
</g>
|
|
1185
|
+
</svg>
|
|
1186
|
+
`;
|
|
1165
1187
|
const ShipAidLogoText = x`
|
|
1166
1188
|
<svg
|
|
1167
1189
|
width="50.000000pt"
|
|
@@ -1431,13 +1453,13 @@ const BellIcon = x`
|
|
|
1431
1453
|
</g>
|
|
1432
1454
|
</svg>
|
|
1433
1455
|
`;
|
|
1434
|
-
var __defProp$
|
|
1435
|
-
var __decorateClass$
|
|
1456
|
+
var __defProp$4 = Object.defineProperty;
|
|
1457
|
+
var __decorateClass$4 = (decorators, target, key, kind) => {
|
|
1436
1458
|
var result = void 0;
|
|
1437
1459
|
for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
|
|
1438
1460
|
if (decorator = decorators[i2])
|
|
1439
1461
|
result = decorator(target, key, result) || result;
|
|
1440
|
-
if (result) __defProp$
|
|
1462
|
+
if (result) __defProp$4(target, key, result);
|
|
1441
1463
|
return result;
|
|
1442
1464
|
};
|
|
1443
1465
|
const _LearnMorePopup = class _LearnMorePopup extends s$1 {
|
|
@@ -1515,7 +1537,7 @@ const _LearnMorePopup = class _LearnMorePopup extends s$1 {
|
|
|
1515
1537
|
};
|
|
1516
1538
|
_LearnMorePopup.styles = styles$2;
|
|
1517
1539
|
let LearnMorePopup = _LearnMorePopup;
|
|
1518
|
-
__decorateClass$
|
|
1540
|
+
__decorateClass$4([
|
|
1519
1541
|
n$7({ type: Boolean, attribute: true })
|
|
1520
1542
|
], LearnMorePopup.prototype, "active");
|
|
1521
1543
|
if (!customElements.get("shipaid-popup-learn-more")) {
|
|
@@ -1669,13 +1691,13 @@ const styles$1 = i$2`
|
|
|
1669
1691
|
z-index: -1;
|
|
1670
1692
|
}
|
|
1671
1693
|
`;
|
|
1672
|
-
var __defProp$
|
|
1673
|
-
var __decorateClass$
|
|
1694
|
+
var __defProp$3 = Object.defineProperty;
|
|
1695
|
+
var __decorateClass$3 = (decorators, target, key, kind) => {
|
|
1674
1696
|
var result = void 0;
|
|
1675
1697
|
for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
|
|
1676
1698
|
if (decorator = decorators[i2])
|
|
1677
1699
|
result = decorator(target, key, result) || result;
|
|
1678
|
-
if (result) __defProp$
|
|
1700
|
+
if (result) __defProp$3(target, key, result);
|
|
1679
1701
|
return result;
|
|
1680
1702
|
};
|
|
1681
1703
|
const _ConfirmationPopup = class _ConfirmationPopup extends s$1 {
|
|
@@ -1721,19 +1743,19 @@ const _ConfirmationPopup = class _ConfirmationPopup extends s$1 {
|
|
|
1721
1743
|
};
|
|
1722
1744
|
_ConfirmationPopup.styles = styles$1;
|
|
1723
1745
|
let ConfirmationPopup = _ConfirmationPopup;
|
|
1724
|
-
__decorateClass$
|
|
1746
|
+
__decorateClass$3([
|
|
1725
1747
|
n$7({ type: Boolean, attribute: true })
|
|
1726
1748
|
], ConfirmationPopup.prototype, "active");
|
|
1727
1749
|
if (!customElements.get("shipaid-popup-confirmation")) {
|
|
1728
1750
|
customElements.define("shipaid-popup-confirmation", ConfirmationPopup);
|
|
1729
1751
|
}
|
|
1730
|
-
var __defProp$
|
|
1731
|
-
var __decorateClass$
|
|
1752
|
+
var __defProp$2 = Object.defineProperty;
|
|
1753
|
+
var __decorateClass$2 = (decorators, target, key, kind) => {
|
|
1732
1754
|
var result = void 0;
|
|
1733
1755
|
for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
|
|
1734
1756
|
if (decorator = decorators[i2])
|
|
1735
1757
|
result = decorator(target, key, result) || result;
|
|
1736
|
-
if (result) __defProp$
|
|
1758
|
+
if (result) __defProp$2(target, key, result);
|
|
1737
1759
|
return result;
|
|
1738
1760
|
};
|
|
1739
1761
|
const _ShipAidCartConfirmation = class _ShipAidCartConfirmation extends s$1 {
|
|
@@ -1928,27 +1950,101 @@ _ShipAidCartConfirmation.styles = i$2`
|
|
|
1928
1950
|
}
|
|
1929
1951
|
`;
|
|
1930
1952
|
let ShipAidCartConfirmation = _ShipAidCartConfirmation;
|
|
1931
|
-
__decorateClass$
|
|
1953
|
+
__decorateClass$2([
|
|
1932
1954
|
n$7({ type: Boolean, attribute: true })
|
|
1933
1955
|
], ShipAidCartConfirmation.prototype, "open");
|
|
1934
|
-
__decorateClass$
|
|
1956
|
+
__decorateClass$2([
|
|
1935
1957
|
n$7({ type: String, attribute: true })
|
|
1936
1958
|
], ShipAidCartConfirmation.prototype, "product");
|
|
1937
|
-
__decorateClass$
|
|
1959
|
+
__decorateClass$2([
|
|
1938
1960
|
n$7({ type: String, attribute: true })
|
|
1939
1961
|
], ShipAidCartConfirmation.prototype, "imageUrl");
|
|
1940
|
-
__decorateClass$
|
|
1962
|
+
__decorateClass$2([
|
|
1941
1963
|
n$7({ type: String, attribute: true })
|
|
1942
1964
|
], ShipAidCartConfirmation.prototype, "priceOfVariant");
|
|
1943
|
-
__decorateClass$
|
|
1965
|
+
__decorateClass$2([
|
|
1944
1966
|
n$7({ type: String, attribute: true })
|
|
1945
1967
|
], ShipAidCartConfirmation.prototype, "quantity");
|
|
1946
|
-
__decorateClass$
|
|
1968
|
+
__decorateClass$2([
|
|
1947
1969
|
n$7({ type: Boolean })
|
|
1948
1970
|
], ShipAidCartConfirmation.prototype, "dontShowAgain");
|
|
1949
1971
|
if (!customElements.get("shipaid-cart-confirmation")) {
|
|
1950
1972
|
customElements.define("shipaid-cart-confirmation", ShipAidCartConfirmation);
|
|
1951
1973
|
}
|
|
1974
|
+
var __defProp$1 = Object.defineProperty;
|
|
1975
|
+
var __decorateClass$1 = (decorators, target, key, kind) => {
|
|
1976
|
+
var result = void 0;
|
|
1977
|
+
for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
|
|
1978
|
+
if (decorator = decorators[i2])
|
|
1979
|
+
result = decorator(target, key, result) || result;
|
|
1980
|
+
if (result) __defProp$1(target, key, result);
|
|
1981
|
+
return result;
|
|
1982
|
+
};
|
|
1983
|
+
class CheckoutPackageProtection extends s$1 {
|
|
1984
|
+
constructor() {
|
|
1985
|
+
super(...arguments);
|
|
1986
|
+
this.protectionPrice = 0;
|
|
1987
|
+
this.checkoutTotal = 0;
|
|
1988
|
+
this.logo = "";
|
|
1989
|
+
this.originalClasses = "";
|
|
1990
|
+
}
|
|
1991
|
+
createRenderRoot() {
|
|
1992
|
+
return this;
|
|
1993
|
+
}
|
|
1994
|
+
handleAbout() {
|
|
1995
|
+
this.dispatchEvent(new Event("shipaid-about"));
|
|
1996
|
+
}
|
|
1997
|
+
handleCheckoutWithProtection() {
|
|
1998
|
+
this.dispatchEvent(new Event("shipaid-add-protection"));
|
|
1999
|
+
}
|
|
2000
|
+
handleCheckoutWithoutProtection() {
|
|
2001
|
+
this.dispatchEvent(new Event("shipaid-remove-protection"));
|
|
2002
|
+
}
|
|
2003
|
+
render() {
|
|
2004
|
+
return x`
|
|
2005
|
+
<div class="container">
|
|
2006
|
+
<div class="protection-info">
|
|
2007
|
+
<div class="protection-text">
|
|
2008
|
+
${this.logo}
|
|
2009
|
+
<p><strong>Checkout+</strong> ShipAid Delivery Guarantee - ${this.protectionPrice}</p>
|
|
2010
|
+
</div>
|
|
2011
|
+
<div
|
|
2012
|
+
class="help-icon"
|
|
2013
|
+
@click=${this.handleAbout}
|
|
2014
|
+
>
|
|
2015
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="100%" focusable="false" aria-hidden="true" viewBox="0 0 24 24">
|
|
2016
|
+
<path d="M11 18h2v-2h-2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8m0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4">
|
|
2017
|
+
</path>
|
|
2018
|
+
</svg>
|
|
2019
|
+
</div>
|
|
2020
|
+
</div>
|
|
2021
|
+
|
|
2022
|
+
<button id="shipaid-checkout-button" class="${this.originalClasses}" @click=${this.handleCheckoutWithProtection}>
|
|
2023
|
+
CHECKOUT+ ${this.checkoutTotal}
|
|
2024
|
+
</button>
|
|
2025
|
+
|
|
2026
|
+
<a href="#" class="continue-link" @click=${this.handleCheckoutWithoutProtection}>
|
|
2027
|
+
Continue without delivery guarantee
|
|
2028
|
+
</a>
|
|
2029
|
+
</div>
|
|
2030
|
+
`;
|
|
2031
|
+
}
|
|
2032
|
+
}
|
|
2033
|
+
__decorateClass$1([
|
|
2034
|
+
n$7()
|
|
2035
|
+
], CheckoutPackageProtection.prototype, "protectionPrice");
|
|
2036
|
+
__decorateClass$1([
|
|
2037
|
+
n$7()
|
|
2038
|
+
], CheckoutPackageProtection.prototype, "checkoutTotal");
|
|
2039
|
+
__decorateClass$1([
|
|
2040
|
+
n$7()
|
|
2041
|
+
], CheckoutPackageProtection.prototype, "logo");
|
|
2042
|
+
__decorateClass$1([
|
|
2043
|
+
n$7({ type: String })
|
|
2044
|
+
], CheckoutPackageProtection.prototype, "originalClasses");
|
|
2045
|
+
if (!customElements.get("checkout-package-protection")) {
|
|
2046
|
+
customElements.define("checkout-package-protection", CheckoutPackageProtection);
|
|
2047
|
+
}
|
|
1952
2048
|
const loading = "Loading ShipAid Widget...";
|
|
1953
2049
|
const title = "Delivery Guarantee";
|
|
1954
2050
|
const description = "in case of Loss, Damage or Theft";
|
|
@@ -2277,6 +2373,8 @@ const _ShipAidWidget = class _ShipAidWidget extends s$1 {
|
|
|
2277
2373
|
this.currency = void 0;
|
|
2278
2374
|
this.customerId = void 0;
|
|
2279
2375
|
this.supportSubscriptions = false;
|
|
2376
|
+
this.dataSelector = "";
|
|
2377
|
+
this.useShipAidCheckout = false;
|
|
2280
2378
|
this._apiEndpoint = "/apps/shipaid";
|
|
2281
2379
|
this._storeDomain = ((_a = window.Shopify) == null ? void 0 : _a.shop) ?? ((_c = (_b = window.Shopify) == null ? void 0 : _b.Checkout) == null ? void 0 : _c.apiHost);
|
|
2282
2380
|
this._hasFinishedSetup = false;
|
|
@@ -2736,7 +2834,7 @@ const _ShipAidWidget = class _ShipAidWidget extends s$1 {
|
|
|
2736
2834
|
/** Try adding ShipAid shipping protection during polling if applicable */
|
|
2737
2835
|
async attemptAddProtection() {
|
|
2738
2836
|
var _a, _b, _c, _d, _e, _f;
|
|
2739
|
-
if (!((_a = this._store) == null ? void 0 : _a.widgetAutoOptIn)) return;
|
|
2837
|
+
if (!((_a = this._store) == null ? void 0 : _a.widgetAutoOptIn) || !this._store.useCustomApp) return;
|
|
2740
2838
|
if (!((_b = this._cart) == null ? void 0 : _b.items) || !((_c = this._cart) == null ? void 0 : _c.item_count)) return;
|
|
2741
2839
|
const protectionCartItemIndex = (_d = this._cart.items) == null ? void 0 : _d.findIndex((item) => {
|
|
2742
2840
|
var _a2, _b2;
|
|
@@ -2848,6 +2946,289 @@ const _ShipAidWidget = class _ShipAidWidget extends s$1 {
|
|
|
2848
2946
|
></shipaid-cart-confirmation>
|
|
2849
2947
|
`;
|
|
2850
2948
|
}
|
|
2949
|
+
contactlessCheckoutButtonTemplate() {
|
|
2950
|
+
if (!document.getElementById("shipaid-styles")) {
|
|
2951
|
+
const style = document.createElement("style");
|
|
2952
|
+
style.id = "shipaid-styles";
|
|
2953
|
+
style.textContent = `
|
|
2954
|
+
[shipaid-hidden] {
|
|
2955
|
+
display: none !important;
|
|
2956
|
+
}
|
|
2957
|
+
shipaid-widget {
|
|
2958
|
+
width: 100%;
|
|
2959
|
+
}
|
|
2960
|
+
`;
|
|
2961
|
+
document.head.appendChild(style);
|
|
2962
|
+
}
|
|
2963
|
+
const originalCheckoutButtons = document.querySelectorAll(`${sessionStorage.getItem("shipaidWidgetTheme")}:not(#shipaid-checkout-button)`);
|
|
2964
|
+
if (!originalCheckoutButtons.length) return;
|
|
2965
|
+
originalCheckoutButtons.forEach((originalCheckoutButton, index) => {
|
|
2966
|
+
var _a, _b;
|
|
2967
|
+
const containerId = `shipaid-checkout-container-${index}`;
|
|
2968
|
+
originalCheckoutButton.setAttribute("shipaid-hidden", "");
|
|
2969
|
+
const originalClasses = originalCheckoutButton.className;
|
|
2970
|
+
let container = document.getElementById(containerId);
|
|
2971
|
+
if (!container) {
|
|
2972
|
+
container = document.createElement("div");
|
|
2973
|
+
container.id = containerId;
|
|
2974
|
+
container.style.width = "100%";
|
|
2975
|
+
originalCheckoutButton.insertAdjacentElement("afterend", container);
|
|
2976
|
+
}
|
|
2977
|
+
const protectionPrice = Number((_a = this._protectionVariant) == null ? void 0 : _a.price) || 0;
|
|
2978
|
+
const cartPrice = (Number((_b = this._cart) == null ? void 0 : _b.total_price) || 0) / 100;
|
|
2979
|
+
const cartTotal = !this._hasProtectionInCart ? protectionPrice + cartPrice : cartPrice;
|
|
2980
|
+
const loading2 = x`
|
|
2981
|
+
<svg width="1.5rem" height="1.5rem" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="4" class="shipaid-loader">
|
|
2982
|
+
<circle cx="25" cy="25" r="20" stroke-opacity="0.5"/>
|
|
2983
|
+
<path d="M45 25a20 20 0 0 1-40 0" stroke="currentColor">
|
|
2984
|
+
<animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1s" repeatCount="indefinite"/>
|
|
2985
|
+
</path>
|
|
2986
|
+
</svg>
|
|
2987
|
+
`;
|
|
2988
|
+
D(
|
|
2989
|
+
x`
|
|
2990
|
+
<style>
|
|
2991
|
+
:host {
|
|
2992
|
+
display: inline-block;
|
|
2993
|
+
font-family: Arial, sans-serif;
|
|
2994
|
+
width: 100%;
|
|
2995
|
+
}
|
|
2996
|
+
.container button {
|
|
2997
|
+
width: 100%;
|
|
2998
|
+
}
|
|
2999
|
+
.shipaid-loader {
|
|
3000
|
+
margin-left: 0.5rem;
|
|
3001
|
+
}
|
|
3002
|
+
.protection-info {
|
|
3003
|
+
display: flex;
|
|
3004
|
+
align-items: center;
|
|
3005
|
+
justify-content: space-between;
|
|
3006
|
+
font-size: 14px;
|
|
3007
|
+
margin-bottom: 1rem;
|
|
3008
|
+
}
|
|
3009
|
+
.protection-text {
|
|
3010
|
+
font-weight: 500;
|
|
3011
|
+
display: flex;
|
|
3012
|
+
align-items: center;
|
|
3013
|
+
gap: 0.5rem;
|
|
3014
|
+
}
|
|
3015
|
+
|
|
3016
|
+
.protection-text p {
|
|
3017
|
+
font-size: 1.3rem;
|
|
3018
|
+
}
|
|
3019
|
+
.help-icon {
|
|
3020
|
+
cursor: pointer;
|
|
3021
|
+
opacity: 0.7;
|
|
3022
|
+
margin: 0rem 0 0.2rem 0.5rem;
|
|
3023
|
+
display: flex;
|
|
3024
|
+
align-items: center;
|
|
3025
|
+
}
|
|
3026
|
+
.checkout-button {
|
|
3027
|
+
background-color: #000;
|
|
3028
|
+
color: #fff;
|
|
3029
|
+
border: none;
|
|
3030
|
+
padding: 12px;
|
|
3031
|
+
font-size: 16px;
|
|
3032
|
+
font-weight: bold;
|
|
3033
|
+
cursor: pointer;
|
|
3034
|
+
text-transform: uppercase;
|
|
3035
|
+
width: 100%;
|
|
3036
|
+
}
|
|
3037
|
+
.checkout-button:hover {
|
|
3038
|
+
opacity: 0.9;
|
|
3039
|
+
}
|
|
3040
|
+
.continue-link {
|
|
3041
|
+
display: block;
|
|
3042
|
+
margin-top: 12px;
|
|
3043
|
+
text-align: center;
|
|
3044
|
+
font-size: 14px;
|
|
3045
|
+
text-decoration: none;
|
|
3046
|
+
color: #555;
|
|
3047
|
+
}
|
|
3048
|
+
.continue-link:hover {
|
|
3049
|
+
text-decoration: underline;
|
|
3050
|
+
}
|
|
3051
|
+
.protection-value {
|
|
3052
|
+
min-height: 20px;
|
|
3053
|
+
display: flex;
|
|
3054
|
+
align-items: center;
|
|
3055
|
+
}
|
|
3056
|
+
</style>
|
|
3057
|
+
|
|
3058
|
+
<checkout-package-protection
|
|
3059
|
+
.protectionPrice=${protectionPrice ? this._currencyFormat(protectionPrice) : loading2}
|
|
3060
|
+
.checkoutTotal=${cartTotal ? this._currencyFormat(cartTotal) : loading2}
|
|
3061
|
+
.logo=${ShipAidReducedLogo}
|
|
3062
|
+
.originalClasses=${originalClasses}
|
|
3063
|
+
@shipaid-about=${() => {
|
|
3064
|
+
this._popup = "learn-more";
|
|
3065
|
+
if (this.persistPopup) {
|
|
3066
|
+
this.setPopupKey();
|
|
3067
|
+
}
|
|
3068
|
+
}}
|
|
3069
|
+
@shipaid-add-protection=${() => {
|
|
3070
|
+
var _a2, _b2;
|
|
3071
|
+
sessionStorage.setItem("shipaid_variant", JSON.stringify((_a2 = this._protectionVariant) == null ? void 0 : _a2.id));
|
|
3072
|
+
window.location.href = `/checkout?attributes[_shipaid-internal]=1&updates[${(_b2 = this._protectionVariant) == null ? void 0 : _b2.id}]=1`;
|
|
3073
|
+
}}
|
|
3074
|
+
@shipaid-remove-protection=${async () => {
|
|
3075
|
+
await this.removeProtection();
|
|
3076
|
+
window.location.href = "/checkout";
|
|
3077
|
+
}}
|
|
3078
|
+
></checkout-package-protection>
|
|
3079
|
+
`,
|
|
3080
|
+
container
|
|
3081
|
+
);
|
|
3082
|
+
});
|
|
3083
|
+
return A;
|
|
3084
|
+
}
|
|
3085
|
+
createRenderRoot() {
|
|
3086
|
+
return this.useShipAidCheckout ? this : super.createRenderRoot();
|
|
3087
|
+
}
|
|
3088
|
+
checkoutButtonTemplate() {
|
|
3089
|
+
var _a, _b;
|
|
3090
|
+
if (!document.getElementById("shipaid-styles")) {
|
|
3091
|
+
const style = document.createElement("style");
|
|
3092
|
+
style.id = "shipaid-styles";
|
|
3093
|
+
style.textContent = `
|
|
3094
|
+
[shipaid-hidden] {
|
|
3095
|
+
display: none !important;
|
|
3096
|
+
}
|
|
3097
|
+
shipaid-widget {
|
|
3098
|
+
width: 100%;
|
|
3099
|
+
}
|
|
3100
|
+
`;
|
|
3101
|
+
document.head.appendChild(style);
|
|
3102
|
+
}
|
|
3103
|
+
const originalCheckoutButton = document.querySelector(`${this.dataSelector}:not(#shipaid-checkout-button)`);
|
|
3104
|
+
if (!originalCheckoutButton) return;
|
|
3105
|
+
const originalClasses = originalCheckoutButton.className;
|
|
3106
|
+
const protectionPrice = Number((_a = this._protectionVariant) == null ? void 0 : _a.price) || 0;
|
|
3107
|
+
const cartPrice = Number((_b = this._cart) == null ? void 0 : _b.total_price) || 0;
|
|
3108
|
+
const cartTotal = !this._hasProtectionInCart ? protectionPrice + cartPrice : cartPrice;
|
|
3109
|
+
const loading2 = x`
|
|
3110
|
+
<svg width="1.5rem" height="1.5rem" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="4" class="shipaid-loader">
|
|
3111
|
+
<circle cx="25" cy="25" r="20" stroke-opacity="0.5"/>
|
|
3112
|
+
<path d="M45 25a20 20 0 0 1-40 0" stroke="currentColor">
|
|
3113
|
+
<animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1s" repeatCount="indefinite"/>
|
|
3114
|
+
</path>
|
|
3115
|
+
</svg>
|
|
3116
|
+
`;
|
|
3117
|
+
return x`
|
|
3118
|
+
<style>
|
|
3119
|
+
:host {
|
|
3120
|
+
display: inline-block;
|
|
3121
|
+
font-family: Arial, sans-serif;
|
|
3122
|
+
width: 100%;
|
|
3123
|
+
}
|
|
3124
|
+
|
|
3125
|
+
.container button {
|
|
3126
|
+
width: 100%;
|
|
3127
|
+
}
|
|
3128
|
+
|
|
3129
|
+
.shipaid-loader {
|
|
3130
|
+
margin-left: 0.5rem;
|
|
3131
|
+
}
|
|
3132
|
+
|
|
3133
|
+
.protection-info {
|
|
3134
|
+
display: flex;
|
|
3135
|
+
align-items: center;
|
|
3136
|
+
justify-content: space-between;
|
|
3137
|
+
font-size: 14px;
|
|
3138
|
+
margin-bottom: 1rem;
|
|
3139
|
+
}
|
|
3140
|
+
|
|
3141
|
+
.protection-text {
|
|
3142
|
+
font-weight: 500;
|
|
3143
|
+
display: flex;
|
|
3144
|
+
align-items: center;
|
|
3145
|
+
gap: 0.5rem;
|
|
3146
|
+
}
|
|
3147
|
+
|
|
3148
|
+
.help-icon {
|
|
3149
|
+
cursor: pointer;
|
|
3150
|
+
opacity: 0.7;
|
|
3151
|
+
margin: 0rem 0 0.2rem 0.5rem;
|
|
3152
|
+
display: flex;
|
|
3153
|
+
align-items: center;
|
|
3154
|
+
}
|
|
3155
|
+
|
|
3156
|
+
.checkout-button {
|
|
3157
|
+
background-color: #000;
|
|
3158
|
+
color: #fff;
|
|
3159
|
+
border: none;
|
|
3160
|
+
padding: 12px;
|
|
3161
|
+
font-size: 16px;
|
|
3162
|
+
font-weight: bold;
|
|
3163
|
+
cursor: pointer;
|
|
3164
|
+
text-transform: uppercase;
|
|
3165
|
+
width: 100%;
|
|
3166
|
+
}
|
|
3167
|
+
|
|
3168
|
+
.checkout-button:hover {
|
|
3169
|
+
opacity: 0.9;
|
|
3170
|
+
}
|
|
3171
|
+
|
|
3172
|
+
.continue-link {
|
|
3173
|
+
display: block;
|
|
3174
|
+
margin-top: 12px;
|
|
3175
|
+
text-align: center;
|
|
3176
|
+
font-size: 14px;
|
|
3177
|
+
text-decoration: none;
|
|
3178
|
+
color: #555;
|
|
3179
|
+
}
|
|
3180
|
+
|
|
3181
|
+
.continue-link:hover {
|
|
3182
|
+
text-decoration: underline;
|
|
3183
|
+
}
|
|
3184
|
+
|
|
3185
|
+
.protection-value {
|
|
3186
|
+
min-height: 20px;
|
|
3187
|
+
display: flex;
|
|
3188
|
+
align-items: center;
|
|
3189
|
+
}
|
|
3190
|
+
</style>
|
|
3191
|
+
|
|
3192
|
+
<div class="container">
|
|
3193
|
+
<div class="protection-info">
|
|
3194
|
+
<div class="protection-text">
|
|
3195
|
+
${ShipAidReducedLogo}
|
|
3196
|
+
<strong>Checkout+</strong>
|
|
3197
|
+
<div class="protection-value">
|
|
3198
|
+
<slot name="title">ShipAid Delivery Guarantee</slot>
|
|
3199
|
+
- ${protectionPrice ? this._currencyFormat(protectionPrice) : loading2}
|
|
3200
|
+
</div>
|
|
3201
|
+
</div>
|
|
3202
|
+
<div class="help-icon" @click=${() => {
|
|
3203
|
+
this._popup = "learn-more";
|
|
3204
|
+
if (this.persistPopup) {
|
|
3205
|
+
this.setPopupKey();
|
|
3206
|
+
}
|
|
3207
|
+
}}>
|
|
3208
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="100%" focusable="false" aria-hidden="true" viewBox="0 0 24 24">
|
|
3209
|
+
<path d="M11 18h2v-2h-2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8m0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4">
|
|
3210
|
+
</path>
|
|
3211
|
+
</svg>
|
|
3212
|
+
</div>
|
|
3213
|
+
</div>
|
|
3214
|
+
|
|
3215
|
+
<button id="shipaid-checkout-button" class="${originalClasses}" @click=${() => {
|
|
3216
|
+
var _a2, _b2;
|
|
3217
|
+
sessionStorage.setItem("shipaid_variant", JSON.stringify((_a2 = this._protectionVariant) == null ? void 0 : _a2.id));
|
|
3218
|
+
window.location.href = `/checkout?attributes[_shipaid-internal]=1&updates[${(_b2 = this._protectionVariant) == null ? void 0 : _b2.id}]=1`;
|
|
3219
|
+
}}>
|
|
3220
|
+
<slot name="checkout-button-text">CHECKOUT+</slot> ${cartTotal ? this._currencyFormat(cartTotal) : loading2}
|
|
3221
|
+
</button>
|
|
3222
|
+
|
|
3223
|
+
<a href="#" class="continue-link" @click=${async () => {
|
|
3224
|
+
await this.removeProtection();
|
|
3225
|
+
window.location.href = "/checkout";
|
|
3226
|
+
}}>
|
|
3227
|
+
<slot name="link-continue">Continue without delivery guarantee</slot>
|
|
3228
|
+
</a>
|
|
3229
|
+
</div>
|
|
3230
|
+
`;
|
|
3231
|
+
}
|
|
2851
3232
|
renderPopups() {
|
|
2852
3233
|
if (this.persistPopup) {
|
|
2853
3234
|
this._popup = this.shouldPersistPopup();
|
|
@@ -2865,6 +3246,9 @@ const _ShipAidWidget = class _ShipAidWidget extends s$1 {
|
|
|
2865
3246
|
}
|
|
2866
3247
|
promptTemplate() {
|
|
2867
3248
|
var _a, _b, _c;
|
|
3249
|
+
if (this.useShipAidCheckout && this.dataSelector) {
|
|
3250
|
+
return this.checkoutButtonTemplate();
|
|
3251
|
+
}
|
|
2868
3252
|
const { useToggle, useCheckbox, leftCheckbox } = ((_b = (_a = this._store) == null ? void 0 : _a.widgetConfigurations) == null ? void 0 : _b.widget) || { useToggle: false, useCheckbox: false, leftCheckbox: false };
|
|
2869
3253
|
return x`
|
|
2870
3254
|
<div class="shipaid-prompt">
|
|
@@ -3146,7 +3530,7 @@ const _ShipAidWidget = class _ShipAidWidget extends s$1 {
|
|
|
3146
3530
|
this._dispatchEvent(Events.LOADED, this._store);
|
|
3147
3531
|
setTimeout(async () => {
|
|
3148
3532
|
var _a2, _b2, _c2, _d2;
|
|
3149
|
-
if (!((_a2 = this._store) == null ? void 0 : _a2.widgetAutoOptIn)) return;
|
|
3533
|
+
if (!((_a2 = this._store) == null ? void 0 : _a2.widgetAutoOptIn) || !this._store.useCustomApp) return;
|
|
3150
3534
|
if (!((_b2 = this._cart) == null ? void 0 : _b2.item_count)) return;
|
|
3151
3535
|
if (this.customerId && this._store.excludedCustomersIdsAutoOptIn && ((_c2 = this._store.excludedCustomersIdsAutoOptIn) == null ? void 0 : _c2.length) && this._store.excludedCustomersIdsAutoOptIn.includes(`gid://shopify/Customer/${this.customerId}`)) {
|
|
3152
3536
|
return;
|
|
@@ -3224,6 +3608,7 @@ const _ShipAidWidget = class _ShipAidWidget extends s$1 {
|
|
|
3224
3608
|
--shipaid-font-regular: 400;
|
|
3225
3609
|
--shipaid-font-heavy: 700;
|
|
3226
3610
|
--shipaid-prompt-badge: #f2f7ff;
|
|
3611
|
+
width: 100%;
|
|
3227
3612
|
}
|
|
3228
3613
|
|
|
3229
3614
|
* {
|
|
@@ -3474,19 +3859,29 @@ const _ShipAidWidget = class _ShipAidWidget extends s$1 {
|
|
|
3474
3859
|
}
|
|
3475
3860
|
</style>
|
|
3476
3861
|
<div class="shipaid">
|
|
3477
|
-
|
|
3862
|
+
${n(
|
|
3478
3863
|
this._hasFinishedSetup,
|
|
3479
3864
|
() => {
|
|
3480
|
-
var _a;
|
|
3481
|
-
|
|
3482
|
-
|
|
3483
|
-
|
|
3484
|
-
()
|
|
3485
|
-
|
|
3865
|
+
var _a, _b, _c, _d, _e, _f;
|
|
3866
|
+
const dbContactlessCheckoutSelector = (_d = (_c = (_b = (_a = this._store) == null ? void 0 : _a.widgetConfigurations) == null ? void 0 : _b.widget) == null ? void 0 : _c.theme_checkout) == null ? void 0 : _d.checkoutButtonSelector;
|
|
3867
|
+
const inSessionStorageCheckoutButtonSelector = sessionStorage.getItem("shipaidWidgetTheme");
|
|
3868
|
+
if (!inSessionStorageCheckoutButtonSelector && dbContactlessCheckoutSelector) {
|
|
3869
|
+
sessionStorage.setItem("shipaidWidgetTheme", dbContactlessCheckoutSelector);
|
|
3870
|
+
}
|
|
3871
|
+
if (this.useShipAidCheckout || !dbContactlessCheckoutSelector) {
|
|
3872
|
+
sessionStorage.removeItem("shipaidWidgetTheme");
|
|
3873
|
+
}
|
|
3874
|
+
const configOk = this._shouldShowWidget && this.planActive && ((_e = this._store) == null ? void 0 : _e.widgetShowCart);
|
|
3875
|
+
if (configOk) {
|
|
3876
|
+
return inSessionStorageCheckoutButtonSelector ? this.contactlessCheckoutButtonTemplate() : this.promptTemplate();
|
|
3877
|
+
}
|
|
3878
|
+
console.log("Showing nothing ==========================>", this._shouldShowWidget, this.planActive, (_f = this._store) == null ? void 0 : _f.widgetShowCart);
|
|
3879
|
+
return A;
|
|
3486
3880
|
},
|
|
3487
|
-
() => this.promptTemplate()
|
|
3881
|
+
() => sessionStorage.getItem("shipaidWidgetTheme") ? this.contactlessCheckoutButtonTemplate() : this.promptTemplate()
|
|
3488
3882
|
)}
|
|
3489
|
-
|
|
3883
|
+
</div>
|
|
3884
|
+
|
|
3490
3885
|
`;
|
|
3491
3886
|
}
|
|
3492
3887
|
};
|
|
@@ -3540,6 +3935,12 @@ __decorateClass([
|
|
|
3540
3935
|
__decorateClass([
|
|
3541
3936
|
n$7({ type: Boolean, attribute: true })
|
|
3542
3937
|
], ShipAidWidget.prototype, "supportSubscriptions");
|
|
3938
|
+
__decorateClass([
|
|
3939
|
+
n$7({ type: String, attribute: "data-selector" })
|
|
3940
|
+
], ShipAidWidget.prototype, "dataSelector");
|
|
3941
|
+
__decorateClass([
|
|
3942
|
+
n$7({ type: Boolean, attribute: "use-shipaid-checkout" })
|
|
3943
|
+
], ShipAidWidget.prototype, "useShipAidCheckout");
|
|
3543
3944
|
__decorateClass([
|
|
3544
3945
|
t$3()
|
|
3545
3946
|
], ShipAidWidget.prototype, "_storeDomain");
|