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.
Files changed (28) hide show
  1. package/README.md +200 -200
  2. package/dist/widget.es.js +429 -28
  3. package/dist/widget.iife.js +282 -40
  4. package/dist/widget.umd.js +282 -40
  5. package/dist-types/common/shopify/index.d.ts +6 -6
  6. package/dist-types/common/shopify/protection.d.ts +7 -7
  7. package/dist-types/common/shopify/types/ShopifyCart.d.ts +29 -29
  8. package/dist-types/common/shopify/types/ShopifyProduct.d.ts +12 -12
  9. package/dist-types/common/types/ShipAid.d.ts +82 -81
  10. package/dist-types/widget/src/assets/confirmation-styles.d.ts +2 -2
  11. package/dist-types/widget/src/assets/icons.d.ts +9 -8
  12. package/dist-types/widget/src/assets/learn-more-styles.d.ts +2 -2
  13. package/dist-types/widget/src/assets/styles.d.ts +2 -2
  14. package/dist-types/widget/src/components/checkout-button.d.ts +7 -0
  15. package/dist-types/widget/src/components/checkout-package-protection.d.ts +13 -0
  16. package/dist-types/widget/src/components/checkoutButton.d.ts +13 -0
  17. package/dist-types/widget/src/components/confirmation-popup.d.ts +9 -9
  18. package/dist-types/widget/src/components/content-loader.d.ts +6 -0
  19. package/dist-types/widget/src/components/learn-more-popup.d.ts +8 -8
  20. package/dist-types/widget/src/components/shipaid-cart-confirmation.d.ts +15 -15
  21. package/dist-types/widget/src/shipaid-widget.d.ts +149 -143
  22. package/dist-types/widget/src/utils/fetch_interceptor.d.ts +3 -3
  23. package/dist-types/widget/src/utils/fetch_interceptor.test.d.ts +1 -1
  24. package/dist-types/widget/types/shipaid.d.ts +10 -10
  25. package/dist-types/widget/types/shopify.d.ts +29 -29
  26. package/dist-types/widget/types/widget.d.ts +13 -13
  27. package/package.json +48 -48
  28. 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$3 = Object.defineProperty;
1435
- var __decorateClass$3 = (decorators, target, key, kind) => {
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$3(target, key, result);
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$3([
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$2 = Object.defineProperty;
1673
- var __decorateClass$2 = (decorators, target, key, kind) => {
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$2(target, key, result);
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$2([
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$1 = Object.defineProperty;
1731
- var __decorateClass$1 = (decorators, target, key, kind) => {
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$1(target, key, result);
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$1([
1953
+ __decorateClass$2([
1932
1954
  n$7({ type: Boolean, attribute: true })
1933
1955
  ], ShipAidCartConfirmation.prototype, "open");
1934
- __decorateClass$1([
1956
+ __decorateClass$2([
1935
1957
  n$7({ type: String, attribute: true })
1936
1958
  ], ShipAidCartConfirmation.prototype, "product");
1937
- __decorateClass$1([
1959
+ __decorateClass$2([
1938
1960
  n$7({ type: String, attribute: true })
1939
1961
  ], ShipAidCartConfirmation.prototype, "imageUrl");
1940
- __decorateClass$1([
1962
+ __decorateClass$2([
1941
1963
  n$7({ type: String, attribute: true })
1942
1964
  ], ShipAidCartConfirmation.prototype, "priceOfVariant");
1943
- __decorateClass$1([
1965
+ __decorateClass$2([
1944
1966
  n$7({ type: String, attribute: true })
1945
1967
  ], ShipAidCartConfirmation.prototype, "quantity");
1946
- __decorateClass$1([
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
- ${n(
3862
+ ${n(
3478
3863
  this._hasFinishedSetup,
3479
3864
  () => {
3480
- var _a;
3481
- return n(
3482
- this._shouldShowWidget && this.planActive && ((_a = this._store) == null ? void 0 : _a.widgetShowCart),
3483
- () => this.promptTemplate(),
3484
- () => A
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
- </div>
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");