@blotoutio/providers-blotout-wallet-sdk 0.48.0 → 0.50.0

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 (4) hide show
  1. package/index.cjs.js +106 -156
  2. package/index.js +106 -156
  3. package/index.mjs +106 -156
  4. package/package.json +1 -1
package/index.cjs.js CHANGED
@@ -36,13 +36,14 @@ new Set([
36
36
 
37
37
  const packageName = 'blotoutWallet';
38
38
  const customAttributes = {
39
- '--bw-primary': { type: 'color', defaultValue: '#f25c2b' },
40
- '--bw-secondary': { type: 'color', defaultValue: '#172a41' },
41
- '--bw-button': { type: 'color', defaultValue: '#da2e3a' },
42
- '--bw-foreground': { type: 'color', defaultValue: 'white' },
39
+ '--bw-primary': { type: 'color', defaultValue: '#000000' },
40
+ '--bw-secondary': { type: 'color', defaultValue: '#4e647f' },
41
+ '--bw-background': { type: 'color', defaultValue: '#ffffff' },
42
+ '--bw-button-foreground': { type: 'color', defaultValue: '#ffffff' },
43
+ '--bw-button-background': { type: 'color', defaultValue: '#2b65cf' },
43
44
  '--bw-input-border': { type: 'color', defaultValue: '#dbe2eb' },
44
- '--bw-input-foreground': { type: 'color', defaultValue: '#172a41' },
45
- '--bw-input-background': { type: 'color', defaultValue: 'white' },
45
+ '--bw-input-foreground': { type: 'color', defaultValue: '#52525B' },
46
+ '--bw-input-background': { type: 'color', defaultValue: '#ffffff' },
46
47
  '--bw-backdrop': { type: 'color', defaultValue: '#00000077' },
47
48
  '--bw-z-index': { type: 'number', defaultValue: '9999' },
48
49
  };
@@ -73,12 +74,29 @@ const getCookieValue = (key) => {
73
74
  return '';
74
75
  }
75
76
  };
76
- const setCookie = (key, value) => {
77
+ const setCookie = (key, value, options) => {
78
+ var _a;
77
79
  try {
78
80
  if (!document) {
79
81
  return;
80
82
  }
81
- document.cookie = `${key}=${value};path=/`;
83
+ const extras = [`path=${(_a = options === null || options === void 0 ? void 0 : options.path) !== null && _a !== void 0 ? _a : '/'}`];
84
+ if (options === null || options === void 0 ? void 0 : options['maxAge']) {
85
+ extras.push(`max-age=${options['maxAge']}`);
86
+ }
87
+ if (options === null || options === void 0 ? void 0 : options.expires) {
88
+ extras.push(`expires=${options.expires}`);
89
+ }
90
+ if (options === null || options === void 0 ? void 0 : options.partitioned) {
91
+ extras.push('partitioned');
92
+ }
93
+ if (options === null || options === void 0 ? void 0 : options.samesite) {
94
+ extras.push(`samesite=${options.samesite}`);
95
+ }
96
+ if (options === null || options === void 0 ? void 0 : options.secure) {
97
+ extras.push('secure');
98
+ }
99
+ document.cookie = `${key}=${value};${extras.join(';')}`;
82
100
  }
83
101
  catch {
84
102
  return;
@@ -270,13 +288,17 @@ const cssVars = i$4 `
270
288
  --bw-secondary,
271
289
  ${r$5(customAttributes['--bw-secondary'].defaultValue)}
272
290
  );
273
- --button: var(
274
- --bw-button,
275
- ${r$5(customAttributes['--bw-button'].defaultValue)}
291
+ --background: var(
292
+ --bw-background,
293
+ ${r$5(customAttributes['--bw-background'].defaultValue)}
294
+ );
295
+ --button-foreground: var(
296
+ --bw-button-foreground,
297
+ ${r$5(customAttributes['--bw-button-foreground'].defaultValue)}
276
298
  );
277
- --foreground: var(
278
- --bw-foreground,
279
- ${r$5(customAttributes['--bw-foreground'].defaultValue)}
299
+ --button-background: var(
300
+ --bw-button-background,
301
+ ${r$5(customAttributes['--bw-button-background'].defaultValue)}
280
302
  );
281
303
  --input-border: var(
282
304
  --bw-input-border,
@@ -303,38 +325,20 @@ const cssVars = i$4 `
303
325
  }
304
326
  `;
305
327
 
306
- const blotout = (attrs) => b `<svg
307
- width="26"
308
- height="36"
309
- viewBox="0 0 26 36"
310
- fill="none"
311
- xmlns="http://www.w3.org/2000/svg"
312
- class=${attrs === null || attrs === void 0 ? void 0 : attrs.class}
313
- style=${attrs === null || attrs === void 0 ? void 0 : attrs.style}
314
- >
315
- <path
316
- fill-rule="evenodd"
317
- clip-rule="evenodd"
318
- d="M0.830995 0.42104C0.75879 0.56208 0.758789 0.746712 0.758789 1.11598V34.5089C0.758789 34.8782 0.75879 35.0628 0.830995 35.2038C0.894508 35.3279 0.995851 35.4288 1.1205 35.4921C1.26221 35.5638 1.44772 35.5638 1.81874 35.5638H4.28515C4.65617 35.5638 4.84167 35.5638 4.98338 35.4921C5.10803 35.4288 5.20938 35.3279 5.27289 35.2038C5.3451 35.0628 5.3451 34.8782 5.3451 34.5089V33.3303C7.4389 35.0007 10.0967 36 12.9889 36C19.7435 36 25.2191 30.5502 25.2191 23.8275C25.2191 17.1049 19.7435 11.6552 12.9889 11.6552C10.0967 11.6552 7.4389 12.6544 5.3451 14.3249V1.11598C5.3451 0.746712 5.3451 0.56208 5.27289 0.42104C5.20938 0.296978 5.10803 0.196112 4.98338 0.132899C4.84167 0.0610352 4.65617 0.0610352 4.28515 0.0610352H1.81874C1.44772 0.0610352 1.26221 0.0610352 1.1205 0.132899C0.995851 0.196112 0.894508 0.296978 0.830995 0.42104ZM5.3451 23.8275C5.3451 28.0292 8.76736 31.4353 12.9889 31.4353C17.2105 31.4353 20.6328 28.0292 20.6328 23.8275C20.6328 19.626 17.2105 16.2198 12.9889 16.2198C8.76736 16.2198 5.3451 19.626 5.3451 23.8275Z"
319
- fill="currentColor"
320
- />
321
- </svg>`;
322
- const cross = (attrs) => b `<svg
323
- width="32"
324
- height="32"
325
- viewBox="0 0 32 32"
326
- fill="none"
327
- xmlns="http://www.w3.org/2000/svg"
328
- class=${attrs === null || attrs === void 0 ? void 0 : attrs.class}
329
- style=${attrs === null || attrs === void 0 ? void 0 : attrs.style}
330
- >
331
- <g>
332
- <path
333
- d="M17.4141 16L24 9.4141L22.5859 8L16 14.5859L9.4143 8L8 9.4141L14.5859 16L8 22.5859L9.4143 24L16 17.4141L22.5859 24L24 22.5859L17.4141 16Z"
334
- fill="currentColor"
335
- />
336
- </g>
337
- </svg> `;
328
+ const wink = (attrs) => b `<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg" class=${attrs === null || attrs === void 0 ? void 0 : attrs.class} style=${attrs === null || attrs === void 0 ? void 0 : attrs.style}>
329
+ <g clip-path="url(#clip0_146_560)">
330
+ <path d="M9.5 1.125C7.94248 1.125 6.41992 1.58686 5.12489 2.45218C3.82985 3.31749 2.82049 4.5474 2.22445 5.98637C1.62841 7.42534 1.47246 9.00874 1.77632 10.5363C2.08018 12.0639 2.8302 13.4671 3.93154 14.5685C5.03288 15.6698 6.43607 16.4198 7.96367 16.7237C9.49127 17.0275 11.0747 16.8716 12.5136 16.2756C13.9526 15.6795 15.1825 14.6702 16.0478 13.3751C16.9131 12.0801 17.375 10.5575 17.375 9C17.375 6.91142 16.5453 4.90838 15.0685 3.43153C13.5916 1.95469 11.5886 1.125 9.5 1.125ZM9.5 15.75C8.16498 15.75 6.85994 15.3541 5.7499 14.6124C4.63987 13.8707 3.77471 12.8165 3.26382 11.5831C2.75293 10.3497 2.61925 8.99251 2.8797 7.68314C3.14015 6.37377 3.78303 5.17103 4.72703 4.22703C5.67104 3.28302 6.87377 2.64015 8.18314 2.3797C9.49252 2.11925 10.8497 2.25292 12.0831 2.76381C13.3165 3.2747 14.3707 4.13987 15.1124 5.2499C15.8541 6.35993 16.25 7.66498 16.25 9C16.25 10.7902 15.5388 12.5071 14.273 13.773C13.0071 15.0388 11.2902 15.75 9.5 15.75Z" fill="black"/>
331
+ <path d="M12.0313 6.1875C11.7531 6.1875 11.4812 6.26997 11.25 6.4245C11.0187 6.57902 10.8385 6.79864 10.732 7.0556C10.6256 7.31256 10.5978 7.59531 10.652 7.8681C10.7063 8.14088 10.8402 8.39145 11.0369 8.58812C11.2335 8.78479 11.4841 8.91872 11.7569 8.97298C12.0297 9.02724 12.3124 8.99939 12.5694 8.89296C12.8264 8.78652 13.046 8.60628 13.2005 8.37502C13.355 8.14376 13.4375 7.87188 13.4375 7.59375C13.4375 7.22079 13.2893 6.8631 13.0256 6.59938C12.7619 6.33566 12.4042 6.1875 12.0313 6.1875Z" fill="black"/>
332
+ <path d="M8.375 7.3125H5V8.4375H8.375V7.3125Z" fill="currentColor"/>
333
+ <path d="M9.49961 13.4996C10.2761 13.4983 11.039 13.2961 11.7142 12.9127C12.3893 12.5293 12.9538 11.9777 13.3527 11.3115L12.3909 10.749C12.0907 11.2475 11.6667 11.6599 11.1601 11.9462C10.6535 12.2325 10.0815 12.383 9.49961 12.383C8.91771 12.383 8.3457 12.2325 7.83911 11.9462C7.33251 11.6599 6.90854 11.2475 6.60836 10.749L5.64648 11.3115C6.04539 11.9777 6.60987 12.5293 7.28506 12.9127C7.96024 13.2961 8.72315 13.4983 9.49961 13.4996Z" fill="black"/>
334
+ </g>
335
+ <defs>
336
+ <clip-path id="clip0_146_560">
337
+ <rect width="18" height="18" fill="currentColor" transform="translate(0.5)"/>
338
+ </clip-path>
339
+ </defs>
340
+ </svg>
341
+ `;
338
342
 
339
343
  const fadeInDialog = (element) => {
340
344
  const dialogAnimation = element.animate([
@@ -363,13 +367,15 @@ const fadeOutToBottom = (element) => {
363
367
  return Promise.all([dialogAnimation.finished, backdropAnimation.finished]);
364
368
  };
365
369
 
370
+ /**
371
+ * Sets the max-age for the dismissed popup cookie
372
+ */
373
+ const DISMISSED_COOKIE_LIFETIME = 1800;
366
374
  let BlotoutWallet = class BlotoutWallet extends s {
367
375
  constructor() {
368
376
  super(...arguments);
369
- this.emailHasBeenSaved = false;
370
377
  this.hasEmail = false;
371
378
  this.lastExpiredCart = undefined;
372
- this.showCheckoutModal = false;
373
379
  this.onSubmit = async (ev) => {
374
380
  var _a;
375
381
  ev.preventDefault();
@@ -392,11 +398,6 @@ let BlotoutWallet = class BlotoutWallet extends s {
392
398
  }
393
399
  if (this.lastExpiredCart) {
394
400
  await this.storeApi.addItems(this.lastExpiredCart.items);
395
- this.showCheckoutModal = true;
396
- this.hasEmail = this.emailHasBeenSaved;
397
- if (this.emailHasBeenSaved) {
398
- this.email.value = '';
399
- }
400
401
  this.dispatchEvent(new CustomEvent('blotout-wallet-restored', {
401
402
  bubbles: true,
402
403
  }));
@@ -408,6 +409,8 @@ let BlotoutWallet = class BlotoutWallet extends s {
408
409
  throw new Error(`Could not update status in DB ${response.status}: ${await response.text()}`);
409
410
  }
410
411
  this.lastExpiredCart = undefined;
412
+ this.hideModal();
413
+ window.location.href = `https://${window.location.host}/cart`;
411
414
  }
412
415
  }
413
416
  catch (e) {
@@ -415,46 +418,33 @@ let BlotoutWallet = class BlotoutWallet extends s {
415
418
  }
416
419
  };
417
420
  this.expiredCartContent = () => {
418
- return x `<form method="dialog" @submit=${this.onSubmit}>
419
- <p>
420
- ${this.hasEmail
421
- ? x `<strong>Your cart is waiting!</strong><br />It's one click to
422
- restore it.`
423
- : x `Your cart is waiting!<br />Just enter your email to bring it
424
- back.`}
425
- </p>
426
- <p>
421
+ return x `<form
422
+ class="restore-form"
423
+ method="dialog"
424
+ @submit=${this.onSubmit}
425
+ >
426
+ <div class="info">
427
+ <p>${x `Hey! Your <strong>cart has expired!</strong>`}</p>
428
+ <p>
429
+ But we've got you covered!
430
+ ${wink({ style: 'vertical-align: text-bottom' })}
431
+ </p>
432
+ </div>
427
433
  <input
428
434
  type="email"
429
435
  name="email"
430
- placeholder="Enter email"
436
+ placeholder="Enter your email ID"
431
437
  ?required=${!this.hasEmail}
432
438
  style=${o({
433
439
  display: this.hasEmail ? 'none' : 'block',
434
440
  })}
435
441
  />
436
- </p>
437
- <div class="actions">
438
- <button class="action" type="submit">Restore Cart</button>
439
- <button class="action" type="button" @click=${this.skipExpiredCart}>
440
- Skip
441
- </button>
442
- </div>
443
- </form>`;
442
+ <button class="restore" type="submit">Restore Cart</button>
443
+ </form>
444
+ <button class="delete" type="button" @click=${this.skipCarts}>
445
+ No thanks, delete my expired cart
446
+ </button> `;
444
447
  };
445
- this.cartRestoredContent = () => x `<p>Cart Restored!</p>
446
- <div class="actions">
447
- <button class="action" type="button" @click=${this.checkoutHandler}>
448
- Checkout
449
- </button>
450
- <button
451
- class="action"
452
- type="button"
453
- @click=${this.continueShoppingHandler}
454
- >
455
- Continue Shopping
456
- </button>
457
- </div>`;
458
448
  }
459
449
  get storeApi() {
460
450
  var _a;
@@ -464,7 +454,7 @@ let BlotoutWallet = class BlotoutWallet extends s {
464
454
  return getCookieValue('isPopUpDismissed') === '1';
465
455
  }
466
456
  dismissPopUp() {
467
- setCookie('isPopUpDismissed', '1');
457
+ setCookie('isPopUpDismissed', '1', { maxAge: DISMISSED_COOKIE_LIFETIME });
468
458
  }
469
459
  connectedCallback() {
470
460
  super.connectedCallback();
@@ -522,24 +512,7 @@ let BlotoutWallet = class BlotoutWallet extends s {
522
512
  }
523
513
  return url;
524
514
  }
525
- closeCartHandler() {
526
- this.email.value = '';
527
- this.dismissPopUp();
528
- this.hideModal();
529
- }
530
- checkoutHandler() {
531
- this.hideModal();
532
- window.location.href = `https://${window.location.host}/cart`;
533
- }
534
- continueShoppingHandler() {
535
- this.hideModal();
536
- window.location.reload();
537
- }
538
- async skipExpiredCart() {
539
- if (!this.email.value && !this.hasEmail) {
540
- logger.error('Email not entered to skip!');
541
- return;
542
- }
515
+ async skipCarts() {
543
516
  this.hideModal();
544
517
  await fetch(this.getUrl('/cart/skip'), {
545
518
  method: 'POST',
@@ -570,15 +543,7 @@ let BlotoutWallet = class BlotoutWallet extends s {
570
543
  return T;
571
544
  }
572
545
  return x `<dialog @click=${this.clickDialogHandler}>
573
- ${!this.showCheckoutModal
574
- ? x ` <button class="dismiss" @click=${this.closeCartHandler}>
575
- ${cross()}
576
- </button>`
577
- : T}
578
- ${blotout({ class: 'logo' })}
579
- ${this.showCheckoutModal
580
- ? this.cartRestoredContent()
581
- : this.expiredCartContent()}
546
+ ${this.expiredCartContent()}
582
547
  </dialog>`;
583
548
  }
584
549
  };
@@ -600,25 +565,12 @@ BlotoutWallet.styles = [
600
565
  cursor: pointer;
601
566
  }
602
567
 
603
- .hidden {
604
- display: none;
605
- }
606
-
607
- .icon {
608
- display: block;
609
- }
610
-
611
- .logo {
612
- color: var(--primary);
613
- }
614
-
615
568
  dialog {
616
569
  width: 430px;
617
570
  max-width: 100vw;
618
- background: var(--secondary);
619
- color: var(--foreground);
620
- border: 0 solid transparent;
621
- border-top: 4px solid var(--primary);
571
+ color: var(--primary);
572
+ background: var(--background);
573
+ border: none;
622
574
  border-radius: 20px;
623
575
  padding: 24px;
624
576
  text-align: center;
@@ -629,26 +581,23 @@ BlotoutWallet.styles = [
629
581
  backdrop-filter: blur(4px);
630
582
  }
631
583
 
632
- .dismiss {
633
- position: absolute;
634
- right: 20px;
635
- top: 20px;
636
- padding: 0;
637
- border: 0;
638
- border: 0;
639
- background: transparent;
640
- color: var(--foreground);
641
- cursor: pointer;
584
+ form.restore-form {
585
+ display: flex;
586
+ flex-direction: column;
587
+ gap: 16px;
642
588
  }
643
589
 
644
- .dismiss > svg {
645
- display: block;
646
- width: 32px;
647
- height: 32px;
590
+ div.info {
591
+ display: flex;
592
+ flex-direction: column;
593
+ gap: 4px;
594
+
595
+ p {
596
+ margin: 0;
597
+ }
648
598
  }
649
599
 
650
600
  input[name='email'] {
651
- box-sizing: border-box;
652
601
  width: 100%;
653
602
  border: 1px solid var(--input-border);
654
603
  color: var(--input-foreground);
@@ -661,19 +610,24 @@ BlotoutWallet.styles = [
661
610
  color: var(--input-foreground);
662
611
  }
663
612
 
664
- .action {
613
+ .restore {
665
614
  width: 100%;
666
615
  border: none;
667
- color: var(--foreground);
668
- background: var(--primary);
616
+ color: var(--button-foreground);
617
+ background: var(--button-background);
669
618
  border-radius: 5px;
670
- padding: 10px 16px;
619
+ padding: 12px 20px;
671
620
  }
672
621
 
673
- div.actions {
674
- display: flex;
675
- justify-content: space-between;
676
- gap: 10px;
622
+ .delete {
623
+ margin-top: 7px;
624
+ font-size: 14px;
625
+ line-height: 20px;
626
+ color: var(--secondary);
627
+ border: none;
628
+ background: none;
629
+ padding: 0;
630
+ border-bottom: 1px solid var(--secondary);
677
631
  }
678
632
  `,
679
633
  ];
@@ -693,10 +647,6 @@ __decorate([
693
647
  r(),
694
648
  __metadata("design:type", Object)
695
649
  ], BlotoutWallet.prototype, "lastExpiredCart", void 0);
696
- __decorate([
697
- r(),
698
- __metadata("design:type", Boolean)
699
- ], BlotoutWallet.prototype, "showCheckoutModal", void 0);
700
650
  BlotoutWallet = __decorate([
701
651
  t$1('blotout-wallet')
702
652
  ], BlotoutWallet);
@@ -718,7 +668,7 @@ const init = (params) => {
718
668
  throw new Error('Implementation for store API missing!');
719
669
  }
720
670
  }
721
- if ((_c = params.manifest.variables) === null || _c === void 0 ? void 0 : _c['enableUI']) {
671
+ if ((_c = params.manifest.variables) === null || _c === void 0 ? void 0 : _c['enabled']) {
722
672
  const element = (window[registryKey].wallet =
723
673
  document.createElement('blotout-wallet'));
724
674
  const theme = (_d = params.manifest.variables) === null || _d === void 0 ? void 0 : _d['theme'];
package/index.js CHANGED
@@ -37,13 +37,14 @@ var ProvidersBlotoutWalletSdk = (function () {
37
37
 
38
38
  const packageName = 'blotoutWallet';
39
39
  const customAttributes = {
40
- '--bw-primary': { type: 'color', defaultValue: '#f25c2b' },
41
- '--bw-secondary': { type: 'color', defaultValue: '#172a41' },
42
- '--bw-button': { type: 'color', defaultValue: '#da2e3a' },
43
- '--bw-foreground': { type: 'color', defaultValue: 'white' },
40
+ '--bw-primary': { type: 'color', defaultValue: '#000000' },
41
+ '--bw-secondary': { type: 'color', defaultValue: '#4e647f' },
42
+ '--bw-background': { type: 'color', defaultValue: '#ffffff' },
43
+ '--bw-button-foreground': { type: 'color', defaultValue: '#ffffff' },
44
+ '--bw-button-background': { type: 'color', defaultValue: '#2b65cf' },
44
45
  '--bw-input-border': { type: 'color', defaultValue: '#dbe2eb' },
45
- '--bw-input-foreground': { type: 'color', defaultValue: '#172a41' },
46
- '--bw-input-background': { type: 'color', defaultValue: 'white' },
46
+ '--bw-input-foreground': { type: 'color', defaultValue: '#52525B' },
47
+ '--bw-input-background': { type: 'color', defaultValue: '#ffffff' },
47
48
  '--bw-backdrop': { type: 'color', defaultValue: '#00000077' },
48
49
  '--bw-z-index': { type: 'number', defaultValue: '9999' },
49
50
  };
@@ -74,12 +75,29 @@ var ProvidersBlotoutWalletSdk = (function () {
74
75
  return '';
75
76
  }
76
77
  };
77
- const setCookie = (key, value) => {
78
+ const setCookie = (key, value, options) => {
79
+ var _a;
78
80
  try {
79
81
  if (!document) {
80
82
  return;
81
83
  }
82
- document.cookie = `${key}=${value};path=/`;
84
+ const extras = [`path=${(_a = options === null || options === void 0 ? void 0 : options.path) !== null && _a !== void 0 ? _a : '/'}`];
85
+ if (options === null || options === void 0 ? void 0 : options['maxAge']) {
86
+ extras.push(`max-age=${options['maxAge']}`);
87
+ }
88
+ if (options === null || options === void 0 ? void 0 : options.expires) {
89
+ extras.push(`expires=${options.expires}`);
90
+ }
91
+ if (options === null || options === void 0 ? void 0 : options.partitioned) {
92
+ extras.push('partitioned');
93
+ }
94
+ if (options === null || options === void 0 ? void 0 : options.samesite) {
95
+ extras.push(`samesite=${options.samesite}`);
96
+ }
97
+ if (options === null || options === void 0 ? void 0 : options.secure) {
98
+ extras.push('secure');
99
+ }
100
+ document.cookie = `${key}=${value};${extras.join(';')}`;
83
101
  }
84
102
  catch {
85
103
  return;
@@ -271,13 +289,17 @@ var ProvidersBlotoutWalletSdk = (function () {
271
289
  --bw-secondary,
272
290
  ${r$5(customAttributes['--bw-secondary'].defaultValue)}
273
291
  );
274
- --button: var(
275
- --bw-button,
276
- ${r$5(customAttributes['--bw-button'].defaultValue)}
292
+ --background: var(
293
+ --bw-background,
294
+ ${r$5(customAttributes['--bw-background'].defaultValue)}
295
+ );
296
+ --button-foreground: var(
297
+ --bw-button-foreground,
298
+ ${r$5(customAttributes['--bw-button-foreground'].defaultValue)}
277
299
  );
278
- --foreground: var(
279
- --bw-foreground,
280
- ${r$5(customAttributes['--bw-foreground'].defaultValue)}
300
+ --button-background: var(
301
+ --bw-button-background,
302
+ ${r$5(customAttributes['--bw-button-background'].defaultValue)}
281
303
  );
282
304
  --input-border: var(
283
305
  --bw-input-border,
@@ -304,38 +326,20 @@ var ProvidersBlotoutWalletSdk = (function () {
304
326
  }
305
327
  `;
306
328
 
307
- const blotout = (attrs) => b `<svg
308
- width="26"
309
- height="36"
310
- viewBox="0 0 26 36"
311
- fill="none"
312
- xmlns="http://www.w3.org/2000/svg"
313
- class=${attrs === null || attrs === void 0 ? void 0 : attrs.class}
314
- style=${attrs === null || attrs === void 0 ? void 0 : attrs.style}
315
- >
316
- <path
317
- fill-rule="evenodd"
318
- clip-rule="evenodd"
319
- d="M0.830995 0.42104C0.75879 0.56208 0.758789 0.746712 0.758789 1.11598V34.5089C0.758789 34.8782 0.75879 35.0628 0.830995 35.2038C0.894508 35.3279 0.995851 35.4288 1.1205 35.4921C1.26221 35.5638 1.44772 35.5638 1.81874 35.5638H4.28515C4.65617 35.5638 4.84167 35.5638 4.98338 35.4921C5.10803 35.4288 5.20938 35.3279 5.27289 35.2038C5.3451 35.0628 5.3451 34.8782 5.3451 34.5089V33.3303C7.4389 35.0007 10.0967 36 12.9889 36C19.7435 36 25.2191 30.5502 25.2191 23.8275C25.2191 17.1049 19.7435 11.6552 12.9889 11.6552C10.0967 11.6552 7.4389 12.6544 5.3451 14.3249V1.11598C5.3451 0.746712 5.3451 0.56208 5.27289 0.42104C5.20938 0.296978 5.10803 0.196112 4.98338 0.132899C4.84167 0.0610352 4.65617 0.0610352 4.28515 0.0610352H1.81874C1.44772 0.0610352 1.26221 0.0610352 1.1205 0.132899C0.995851 0.196112 0.894508 0.296978 0.830995 0.42104ZM5.3451 23.8275C5.3451 28.0292 8.76736 31.4353 12.9889 31.4353C17.2105 31.4353 20.6328 28.0292 20.6328 23.8275C20.6328 19.626 17.2105 16.2198 12.9889 16.2198C8.76736 16.2198 5.3451 19.626 5.3451 23.8275Z"
320
- fill="currentColor"
321
- />
322
- </svg>`;
323
- const cross = (attrs) => b `<svg
324
- width="32"
325
- height="32"
326
- viewBox="0 0 32 32"
327
- fill="none"
328
- xmlns="http://www.w3.org/2000/svg"
329
- class=${attrs === null || attrs === void 0 ? void 0 : attrs.class}
330
- style=${attrs === null || attrs === void 0 ? void 0 : attrs.style}
331
- >
332
- <g>
333
- <path
334
- d="M17.4141 16L24 9.4141L22.5859 8L16 14.5859L9.4143 8L8 9.4141L14.5859 16L8 22.5859L9.4143 24L16 17.4141L22.5859 24L24 22.5859L17.4141 16Z"
335
- fill="currentColor"
336
- />
337
- </g>
338
- </svg> `;
329
+ const wink = (attrs) => b `<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg" class=${attrs === null || attrs === void 0 ? void 0 : attrs.class} style=${attrs === null || attrs === void 0 ? void 0 : attrs.style}>
330
+ <g clip-path="url(#clip0_146_560)">
331
+ <path d="M9.5 1.125C7.94248 1.125 6.41992 1.58686 5.12489 2.45218C3.82985 3.31749 2.82049 4.5474 2.22445 5.98637C1.62841 7.42534 1.47246 9.00874 1.77632 10.5363C2.08018 12.0639 2.8302 13.4671 3.93154 14.5685C5.03288 15.6698 6.43607 16.4198 7.96367 16.7237C9.49127 17.0275 11.0747 16.8716 12.5136 16.2756C13.9526 15.6795 15.1825 14.6702 16.0478 13.3751C16.9131 12.0801 17.375 10.5575 17.375 9C17.375 6.91142 16.5453 4.90838 15.0685 3.43153C13.5916 1.95469 11.5886 1.125 9.5 1.125ZM9.5 15.75C8.16498 15.75 6.85994 15.3541 5.7499 14.6124C4.63987 13.8707 3.77471 12.8165 3.26382 11.5831C2.75293 10.3497 2.61925 8.99251 2.8797 7.68314C3.14015 6.37377 3.78303 5.17103 4.72703 4.22703C5.67104 3.28302 6.87377 2.64015 8.18314 2.3797C9.49252 2.11925 10.8497 2.25292 12.0831 2.76381C13.3165 3.2747 14.3707 4.13987 15.1124 5.2499C15.8541 6.35993 16.25 7.66498 16.25 9C16.25 10.7902 15.5388 12.5071 14.273 13.773C13.0071 15.0388 11.2902 15.75 9.5 15.75Z" fill="black"/>
332
+ <path d="M12.0313 6.1875C11.7531 6.1875 11.4812 6.26997 11.25 6.4245C11.0187 6.57902 10.8385 6.79864 10.732 7.0556C10.6256 7.31256 10.5978 7.59531 10.652 7.8681C10.7063 8.14088 10.8402 8.39145 11.0369 8.58812C11.2335 8.78479 11.4841 8.91872 11.7569 8.97298C12.0297 9.02724 12.3124 8.99939 12.5694 8.89296C12.8264 8.78652 13.046 8.60628 13.2005 8.37502C13.355 8.14376 13.4375 7.87188 13.4375 7.59375C13.4375 7.22079 13.2893 6.8631 13.0256 6.59938C12.7619 6.33566 12.4042 6.1875 12.0313 6.1875Z" fill="black"/>
333
+ <path d="M8.375 7.3125H5V8.4375H8.375V7.3125Z" fill="currentColor"/>
334
+ <path d="M9.49961 13.4996C10.2761 13.4983 11.039 13.2961 11.7142 12.9127C12.3893 12.5293 12.9538 11.9777 13.3527 11.3115L12.3909 10.749C12.0907 11.2475 11.6667 11.6599 11.1601 11.9462C10.6535 12.2325 10.0815 12.383 9.49961 12.383C8.91771 12.383 8.3457 12.2325 7.83911 11.9462C7.33251 11.6599 6.90854 11.2475 6.60836 10.749L5.64648 11.3115C6.04539 11.9777 6.60987 12.5293 7.28506 12.9127C7.96024 13.2961 8.72315 13.4983 9.49961 13.4996Z" fill="black"/>
335
+ </g>
336
+ <defs>
337
+ <clip-path id="clip0_146_560">
338
+ <rect width="18" height="18" fill="currentColor" transform="translate(0.5)"/>
339
+ </clip-path>
340
+ </defs>
341
+ </svg>
342
+ `;
339
343
 
340
344
  const fadeInDialog = (element) => {
341
345
  const dialogAnimation = element.animate([
@@ -364,13 +368,15 @@ var ProvidersBlotoutWalletSdk = (function () {
364
368
  return Promise.all([dialogAnimation.finished, backdropAnimation.finished]);
365
369
  };
366
370
 
371
+ /**
372
+ * Sets the max-age for the dismissed popup cookie
373
+ */
374
+ const DISMISSED_COOKIE_LIFETIME = 1800;
367
375
  let BlotoutWallet = class BlotoutWallet extends s {
368
376
  constructor() {
369
377
  super(...arguments);
370
- this.emailHasBeenSaved = false;
371
378
  this.hasEmail = false;
372
379
  this.lastExpiredCart = undefined;
373
- this.showCheckoutModal = false;
374
380
  this.onSubmit = async (ev) => {
375
381
  var _a;
376
382
  ev.preventDefault();
@@ -393,11 +399,6 @@ var ProvidersBlotoutWalletSdk = (function () {
393
399
  }
394
400
  if (this.lastExpiredCart) {
395
401
  await this.storeApi.addItems(this.lastExpiredCart.items);
396
- this.showCheckoutModal = true;
397
- this.hasEmail = this.emailHasBeenSaved;
398
- if (this.emailHasBeenSaved) {
399
- this.email.value = '';
400
- }
401
402
  this.dispatchEvent(new CustomEvent('blotout-wallet-restored', {
402
403
  bubbles: true,
403
404
  }));
@@ -409,6 +410,8 @@ var ProvidersBlotoutWalletSdk = (function () {
409
410
  throw new Error(`Could not update status in DB ${response.status}: ${await response.text()}`);
410
411
  }
411
412
  this.lastExpiredCart = undefined;
413
+ this.hideModal();
414
+ window.location.href = `https://${window.location.host}/cart`;
412
415
  }
413
416
  }
414
417
  catch (e) {
@@ -416,46 +419,33 @@ var ProvidersBlotoutWalletSdk = (function () {
416
419
  }
417
420
  };
418
421
  this.expiredCartContent = () => {
419
- return x `<form method="dialog" @submit=${this.onSubmit}>
420
- <p>
421
- ${this.hasEmail
422
- ? x `<strong>Your cart is waiting!</strong><br />It's one click to
423
- restore it.`
424
- : x `Your cart is waiting!<br />Just enter your email to bring it
425
- back.`}
426
- </p>
427
- <p>
422
+ return x `<form
423
+ class="restore-form"
424
+ method="dialog"
425
+ @submit=${this.onSubmit}
426
+ >
427
+ <div class="info">
428
+ <p>${x `Hey! Your <strong>cart has expired!</strong>`}</p>
429
+ <p>
430
+ But we've got you covered!
431
+ ${wink({ style: 'vertical-align: text-bottom' })}
432
+ </p>
433
+ </div>
428
434
  <input
429
435
  type="email"
430
436
  name="email"
431
- placeholder="Enter email"
437
+ placeholder="Enter your email ID"
432
438
  ?required=${!this.hasEmail}
433
439
  style=${o({
434
440
  display: this.hasEmail ? 'none' : 'block',
435
441
  })}
436
442
  />
437
- </p>
438
- <div class="actions">
439
- <button class="action" type="submit">Restore Cart</button>
440
- <button class="action" type="button" @click=${this.skipExpiredCart}>
441
- Skip
442
- </button>
443
- </div>
444
- </form>`;
443
+ <button class="restore" type="submit">Restore Cart</button>
444
+ </form>
445
+ <button class="delete" type="button" @click=${this.skipCarts}>
446
+ No thanks, delete my expired cart
447
+ </button> `;
445
448
  };
446
- this.cartRestoredContent = () => x `<p>Cart Restored!</p>
447
- <div class="actions">
448
- <button class="action" type="button" @click=${this.checkoutHandler}>
449
- Checkout
450
- </button>
451
- <button
452
- class="action"
453
- type="button"
454
- @click=${this.continueShoppingHandler}
455
- >
456
- Continue Shopping
457
- </button>
458
- </div>`;
459
449
  }
460
450
  get storeApi() {
461
451
  var _a;
@@ -465,7 +455,7 @@ var ProvidersBlotoutWalletSdk = (function () {
465
455
  return getCookieValue('isPopUpDismissed') === '1';
466
456
  }
467
457
  dismissPopUp() {
468
- setCookie('isPopUpDismissed', '1');
458
+ setCookie('isPopUpDismissed', '1', { maxAge: DISMISSED_COOKIE_LIFETIME });
469
459
  }
470
460
  connectedCallback() {
471
461
  super.connectedCallback();
@@ -523,24 +513,7 @@ var ProvidersBlotoutWalletSdk = (function () {
523
513
  }
524
514
  return url;
525
515
  }
526
- closeCartHandler() {
527
- this.email.value = '';
528
- this.dismissPopUp();
529
- this.hideModal();
530
- }
531
- checkoutHandler() {
532
- this.hideModal();
533
- window.location.href = `https://${window.location.host}/cart`;
534
- }
535
- continueShoppingHandler() {
536
- this.hideModal();
537
- window.location.reload();
538
- }
539
- async skipExpiredCart() {
540
- if (!this.email.value && !this.hasEmail) {
541
- logger.error('Email not entered to skip!');
542
- return;
543
- }
516
+ async skipCarts() {
544
517
  this.hideModal();
545
518
  await fetch(this.getUrl('/cart/skip'), {
546
519
  method: 'POST',
@@ -571,15 +544,7 @@ var ProvidersBlotoutWalletSdk = (function () {
571
544
  return T;
572
545
  }
573
546
  return x `<dialog @click=${this.clickDialogHandler}>
574
- ${!this.showCheckoutModal
575
- ? x ` <button class="dismiss" @click=${this.closeCartHandler}>
576
- ${cross()}
577
- </button>`
578
- : T}
579
- ${blotout({ class: 'logo' })}
580
- ${this.showCheckoutModal
581
- ? this.cartRestoredContent()
582
- : this.expiredCartContent()}
547
+ ${this.expiredCartContent()}
583
548
  </dialog>`;
584
549
  }
585
550
  };
@@ -601,25 +566,12 @@ var ProvidersBlotoutWalletSdk = (function () {
601
566
  cursor: pointer;
602
567
  }
603
568
 
604
- .hidden {
605
- display: none;
606
- }
607
-
608
- .icon {
609
- display: block;
610
- }
611
-
612
- .logo {
613
- color: var(--primary);
614
- }
615
-
616
569
  dialog {
617
570
  width: 430px;
618
571
  max-width: 100vw;
619
- background: var(--secondary);
620
- color: var(--foreground);
621
- border: 0 solid transparent;
622
- border-top: 4px solid var(--primary);
572
+ color: var(--primary);
573
+ background: var(--background);
574
+ border: none;
623
575
  border-radius: 20px;
624
576
  padding: 24px;
625
577
  text-align: center;
@@ -630,26 +582,23 @@ var ProvidersBlotoutWalletSdk = (function () {
630
582
  backdrop-filter: blur(4px);
631
583
  }
632
584
 
633
- .dismiss {
634
- position: absolute;
635
- right: 20px;
636
- top: 20px;
637
- padding: 0;
638
- border: 0;
639
- border: 0;
640
- background: transparent;
641
- color: var(--foreground);
642
- cursor: pointer;
585
+ form.restore-form {
586
+ display: flex;
587
+ flex-direction: column;
588
+ gap: 16px;
643
589
  }
644
590
 
645
- .dismiss > svg {
646
- display: block;
647
- width: 32px;
648
- height: 32px;
591
+ div.info {
592
+ display: flex;
593
+ flex-direction: column;
594
+ gap: 4px;
595
+
596
+ p {
597
+ margin: 0;
598
+ }
649
599
  }
650
600
 
651
601
  input[name='email'] {
652
- box-sizing: border-box;
653
602
  width: 100%;
654
603
  border: 1px solid var(--input-border);
655
604
  color: var(--input-foreground);
@@ -662,19 +611,24 @@ var ProvidersBlotoutWalletSdk = (function () {
662
611
  color: var(--input-foreground);
663
612
  }
664
613
 
665
- .action {
614
+ .restore {
666
615
  width: 100%;
667
616
  border: none;
668
- color: var(--foreground);
669
- background: var(--primary);
617
+ color: var(--button-foreground);
618
+ background: var(--button-background);
670
619
  border-radius: 5px;
671
- padding: 10px 16px;
620
+ padding: 12px 20px;
672
621
  }
673
622
 
674
- div.actions {
675
- display: flex;
676
- justify-content: space-between;
677
- gap: 10px;
623
+ .delete {
624
+ margin-top: 7px;
625
+ font-size: 14px;
626
+ line-height: 20px;
627
+ color: var(--secondary);
628
+ border: none;
629
+ background: none;
630
+ padding: 0;
631
+ border-bottom: 1px solid var(--secondary);
678
632
  }
679
633
  `,
680
634
  ];
@@ -694,10 +648,6 @@ var ProvidersBlotoutWalletSdk = (function () {
694
648
  r(),
695
649
  __metadata("design:type", Object)
696
650
  ], BlotoutWallet.prototype, "lastExpiredCart", void 0);
697
- __decorate([
698
- r(),
699
- __metadata("design:type", Boolean)
700
- ], BlotoutWallet.prototype, "showCheckoutModal", void 0);
701
651
  BlotoutWallet = __decorate([
702
652
  t$1('blotout-wallet')
703
653
  ], BlotoutWallet);
@@ -719,7 +669,7 @@ var ProvidersBlotoutWalletSdk = (function () {
719
669
  throw new Error('Implementation for store API missing!');
720
670
  }
721
671
  }
722
- if ((_c = params.manifest.variables) === null || _c === void 0 ? void 0 : _c['enableUI']) {
672
+ if ((_c = params.manifest.variables) === null || _c === void 0 ? void 0 : _c['enabled']) {
723
673
  const element = (window[registryKey].wallet =
724
674
  document.createElement('blotout-wallet'));
725
675
  const theme = (_d = params.manifest.variables) === null || _d === void 0 ? void 0 : _d['theme'];
package/index.mjs CHANGED
@@ -34,13 +34,14 @@ new Set([
34
34
 
35
35
  const packageName = 'blotoutWallet';
36
36
  const customAttributes = {
37
- '--bw-primary': { type: 'color', defaultValue: '#f25c2b' },
38
- '--bw-secondary': { type: 'color', defaultValue: '#172a41' },
39
- '--bw-button': { type: 'color', defaultValue: '#da2e3a' },
40
- '--bw-foreground': { type: 'color', defaultValue: 'white' },
37
+ '--bw-primary': { type: 'color', defaultValue: '#000000' },
38
+ '--bw-secondary': { type: 'color', defaultValue: '#4e647f' },
39
+ '--bw-background': { type: 'color', defaultValue: '#ffffff' },
40
+ '--bw-button-foreground': { type: 'color', defaultValue: '#ffffff' },
41
+ '--bw-button-background': { type: 'color', defaultValue: '#2b65cf' },
41
42
  '--bw-input-border': { type: 'color', defaultValue: '#dbe2eb' },
42
- '--bw-input-foreground': { type: 'color', defaultValue: '#172a41' },
43
- '--bw-input-background': { type: 'color', defaultValue: 'white' },
43
+ '--bw-input-foreground': { type: 'color', defaultValue: '#52525B' },
44
+ '--bw-input-background': { type: 'color', defaultValue: '#ffffff' },
44
45
  '--bw-backdrop': { type: 'color', defaultValue: '#00000077' },
45
46
  '--bw-z-index': { type: 'number', defaultValue: '9999' },
46
47
  };
@@ -71,12 +72,29 @@ const getCookieValue = (key) => {
71
72
  return '';
72
73
  }
73
74
  };
74
- const setCookie = (key, value) => {
75
+ const setCookie = (key, value, options) => {
76
+ var _a;
75
77
  try {
76
78
  if (!document) {
77
79
  return;
78
80
  }
79
- document.cookie = `${key}=${value};path=/`;
81
+ const extras = [`path=${(_a = options === null || options === void 0 ? void 0 : options.path) !== null && _a !== void 0 ? _a : '/'}`];
82
+ if (options === null || options === void 0 ? void 0 : options['maxAge']) {
83
+ extras.push(`max-age=${options['maxAge']}`);
84
+ }
85
+ if (options === null || options === void 0 ? void 0 : options.expires) {
86
+ extras.push(`expires=${options.expires}`);
87
+ }
88
+ if (options === null || options === void 0 ? void 0 : options.partitioned) {
89
+ extras.push('partitioned');
90
+ }
91
+ if (options === null || options === void 0 ? void 0 : options.samesite) {
92
+ extras.push(`samesite=${options.samesite}`);
93
+ }
94
+ if (options === null || options === void 0 ? void 0 : options.secure) {
95
+ extras.push('secure');
96
+ }
97
+ document.cookie = `${key}=${value};${extras.join(';')}`;
80
98
  }
81
99
  catch {
82
100
  return;
@@ -268,13 +286,17 @@ const cssVars = i$4 `
268
286
  --bw-secondary,
269
287
  ${r$5(customAttributes['--bw-secondary'].defaultValue)}
270
288
  );
271
- --button: var(
272
- --bw-button,
273
- ${r$5(customAttributes['--bw-button'].defaultValue)}
289
+ --background: var(
290
+ --bw-background,
291
+ ${r$5(customAttributes['--bw-background'].defaultValue)}
292
+ );
293
+ --button-foreground: var(
294
+ --bw-button-foreground,
295
+ ${r$5(customAttributes['--bw-button-foreground'].defaultValue)}
274
296
  );
275
- --foreground: var(
276
- --bw-foreground,
277
- ${r$5(customAttributes['--bw-foreground'].defaultValue)}
297
+ --button-background: var(
298
+ --bw-button-background,
299
+ ${r$5(customAttributes['--bw-button-background'].defaultValue)}
278
300
  );
279
301
  --input-border: var(
280
302
  --bw-input-border,
@@ -301,38 +323,20 @@ const cssVars = i$4 `
301
323
  }
302
324
  `;
303
325
 
304
- const blotout = (attrs) => b `<svg
305
- width="26"
306
- height="36"
307
- viewBox="0 0 26 36"
308
- fill="none"
309
- xmlns="http://www.w3.org/2000/svg"
310
- class=${attrs === null || attrs === void 0 ? void 0 : attrs.class}
311
- style=${attrs === null || attrs === void 0 ? void 0 : attrs.style}
312
- >
313
- <path
314
- fill-rule="evenodd"
315
- clip-rule="evenodd"
316
- d="M0.830995 0.42104C0.75879 0.56208 0.758789 0.746712 0.758789 1.11598V34.5089C0.758789 34.8782 0.75879 35.0628 0.830995 35.2038C0.894508 35.3279 0.995851 35.4288 1.1205 35.4921C1.26221 35.5638 1.44772 35.5638 1.81874 35.5638H4.28515C4.65617 35.5638 4.84167 35.5638 4.98338 35.4921C5.10803 35.4288 5.20938 35.3279 5.27289 35.2038C5.3451 35.0628 5.3451 34.8782 5.3451 34.5089V33.3303C7.4389 35.0007 10.0967 36 12.9889 36C19.7435 36 25.2191 30.5502 25.2191 23.8275C25.2191 17.1049 19.7435 11.6552 12.9889 11.6552C10.0967 11.6552 7.4389 12.6544 5.3451 14.3249V1.11598C5.3451 0.746712 5.3451 0.56208 5.27289 0.42104C5.20938 0.296978 5.10803 0.196112 4.98338 0.132899C4.84167 0.0610352 4.65617 0.0610352 4.28515 0.0610352H1.81874C1.44772 0.0610352 1.26221 0.0610352 1.1205 0.132899C0.995851 0.196112 0.894508 0.296978 0.830995 0.42104ZM5.3451 23.8275C5.3451 28.0292 8.76736 31.4353 12.9889 31.4353C17.2105 31.4353 20.6328 28.0292 20.6328 23.8275C20.6328 19.626 17.2105 16.2198 12.9889 16.2198C8.76736 16.2198 5.3451 19.626 5.3451 23.8275Z"
317
- fill="currentColor"
318
- />
319
- </svg>`;
320
- const cross = (attrs) => b `<svg
321
- width="32"
322
- height="32"
323
- viewBox="0 0 32 32"
324
- fill="none"
325
- xmlns="http://www.w3.org/2000/svg"
326
- class=${attrs === null || attrs === void 0 ? void 0 : attrs.class}
327
- style=${attrs === null || attrs === void 0 ? void 0 : attrs.style}
328
- >
329
- <g>
330
- <path
331
- d="M17.4141 16L24 9.4141L22.5859 8L16 14.5859L9.4143 8L8 9.4141L14.5859 16L8 22.5859L9.4143 24L16 17.4141L22.5859 24L24 22.5859L17.4141 16Z"
332
- fill="currentColor"
333
- />
334
- </g>
335
- </svg> `;
326
+ const wink = (attrs) => b `<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg" class=${attrs === null || attrs === void 0 ? void 0 : attrs.class} style=${attrs === null || attrs === void 0 ? void 0 : attrs.style}>
327
+ <g clip-path="url(#clip0_146_560)">
328
+ <path d="M9.5 1.125C7.94248 1.125 6.41992 1.58686 5.12489 2.45218C3.82985 3.31749 2.82049 4.5474 2.22445 5.98637C1.62841 7.42534 1.47246 9.00874 1.77632 10.5363C2.08018 12.0639 2.8302 13.4671 3.93154 14.5685C5.03288 15.6698 6.43607 16.4198 7.96367 16.7237C9.49127 17.0275 11.0747 16.8716 12.5136 16.2756C13.9526 15.6795 15.1825 14.6702 16.0478 13.3751C16.9131 12.0801 17.375 10.5575 17.375 9C17.375 6.91142 16.5453 4.90838 15.0685 3.43153C13.5916 1.95469 11.5886 1.125 9.5 1.125ZM9.5 15.75C8.16498 15.75 6.85994 15.3541 5.7499 14.6124C4.63987 13.8707 3.77471 12.8165 3.26382 11.5831C2.75293 10.3497 2.61925 8.99251 2.8797 7.68314C3.14015 6.37377 3.78303 5.17103 4.72703 4.22703C5.67104 3.28302 6.87377 2.64015 8.18314 2.3797C9.49252 2.11925 10.8497 2.25292 12.0831 2.76381C13.3165 3.2747 14.3707 4.13987 15.1124 5.2499C15.8541 6.35993 16.25 7.66498 16.25 9C16.25 10.7902 15.5388 12.5071 14.273 13.773C13.0071 15.0388 11.2902 15.75 9.5 15.75Z" fill="black"/>
329
+ <path d="M12.0313 6.1875C11.7531 6.1875 11.4812 6.26997 11.25 6.4245C11.0187 6.57902 10.8385 6.79864 10.732 7.0556C10.6256 7.31256 10.5978 7.59531 10.652 7.8681C10.7063 8.14088 10.8402 8.39145 11.0369 8.58812C11.2335 8.78479 11.4841 8.91872 11.7569 8.97298C12.0297 9.02724 12.3124 8.99939 12.5694 8.89296C12.8264 8.78652 13.046 8.60628 13.2005 8.37502C13.355 8.14376 13.4375 7.87188 13.4375 7.59375C13.4375 7.22079 13.2893 6.8631 13.0256 6.59938C12.7619 6.33566 12.4042 6.1875 12.0313 6.1875Z" fill="black"/>
330
+ <path d="M8.375 7.3125H5V8.4375H8.375V7.3125Z" fill="currentColor"/>
331
+ <path d="M9.49961 13.4996C10.2761 13.4983 11.039 13.2961 11.7142 12.9127C12.3893 12.5293 12.9538 11.9777 13.3527 11.3115L12.3909 10.749C12.0907 11.2475 11.6667 11.6599 11.1601 11.9462C10.6535 12.2325 10.0815 12.383 9.49961 12.383C8.91771 12.383 8.3457 12.2325 7.83911 11.9462C7.33251 11.6599 6.90854 11.2475 6.60836 10.749L5.64648 11.3115C6.04539 11.9777 6.60987 12.5293 7.28506 12.9127C7.96024 13.2961 8.72315 13.4983 9.49961 13.4996Z" fill="black"/>
332
+ </g>
333
+ <defs>
334
+ <clip-path id="clip0_146_560">
335
+ <rect width="18" height="18" fill="currentColor" transform="translate(0.5)"/>
336
+ </clip-path>
337
+ </defs>
338
+ </svg>
339
+ `;
336
340
 
337
341
  const fadeInDialog = (element) => {
338
342
  const dialogAnimation = element.animate([
@@ -361,13 +365,15 @@ const fadeOutToBottom = (element) => {
361
365
  return Promise.all([dialogAnimation.finished, backdropAnimation.finished]);
362
366
  };
363
367
 
368
+ /**
369
+ * Sets the max-age for the dismissed popup cookie
370
+ */
371
+ const DISMISSED_COOKIE_LIFETIME = 1800;
364
372
  let BlotoutWallet = class BlotoutWallet extends s {
365
373
  constructor() {
366
374
  super(...arguments);
367
- this.emailHasBeenSaved = false;
368
375
  this.hasEmail = false;
369
376
  this.lastExpiredCart = undefined;
370
- this.showCheckoutModal = false;
371
377
  this.onSubmit = async (ev) => {
372
378
  var _a;
373
379
  ev.preventDefault();
@@ -390,11 +396,6 @@ let BlotoutWallet = class BlotoutWallet extends s {
390
396
  }
391
397
  if (this.lastExpiredCart) {
392
398
  await this.storeApi.addItems(this.lastExpiredCart.items);
393
- this.showCheckoutModal = true;
394
- this.hasEmail = this.emailHasBeenSaved;
395
- if (this.emailHasBeenSaved) {
396
- this.email.value = '';
397
- }
398
399
  this.dispatchEvent(new CustomEvent('blotout-wallet-restored', {
399
400
  bubbles: true,
400
401
  }));
@@ -406,6 +407,8 @@ let BlotoutWallet = class BlotoutWallet extends s {
406
407
  throw new Error(`Could not update status in DB ${response.status}: ${await response.text()}`);
407
408
  }
408
409
  this.lastExpiredCart = undefined;
410
+ this.hideModal();
411
+ window.location.href = `https://${window.location.host}/cart`;
409
412
  }
410
413
  }
411
414
  catch (e) {
@@ -413,46 +416,33 @@ let BlotoutWallet = class BlotoutWallet extends s {
413
416
  }
414
417
  };
415
418
  this.expiredCartContent = () => {
416
- return x `<form method="dialog" @submit=${this.onSubmit}>
417
- <p>
418
- ${this.hasEmail
419
- ? x `<strong>Your cart is waiting!</strong><br />It's one click to
420
- restore it.`
421
- : x `Your cart is waiting!<br />Just enter your email to bring it
422
- back.`}
423
- </p>
424
- <p>
419
+ return x `<form
420
+ class="restore-form"
421
+ method="dialog"
422
+ @submit=${this.onSubmit}
423
+ >
424
+ <div class="info">
425
+ <p>${x `Hey! Your <strong>cart has expired!</strong>`}</p>
426
+ <p>
427
+ But we've got you covered!
428
+ ${wink({ style: 'vertical-align: text-bottom' })}
429
+ </p>
430
+ </div>
425
431
  <input
426
432
  type="email"
427
433
  name="email"
428
- placeholder="Enter email"
434
+ placeholder="Enter your email ID"
429
435
  ?required=${!this.hasEmail}
430
436
  style=${o({
431
437
  display: this.hasEmail ? 'none' : 'block',
432
438
  })}
433
439
  />
434
- </p>
435
- <div class="actions">
436
- <button class="action" type="submit">Restore Cart</button>
437
- <button class="action" type="button" @click=${this.skipExpiredCart}>
438
- Skip
439
- </button>
440
- </div>
441
- </form>`;
440
+ <button class="restore" type="submit">Restore Cart</button>
441
+ </form>
442
+ <button class="delete" type="button" @click=${this.skipCarts}>
443
+ No thanks, delete my expired cart
444
+ </button> `;
442
445
  };
443
- this.cartRestoredContent = () => x `<p>Cart Restored!</p>
444
- <div class="actions">
445
- <button class="action" type="button" @click=${this.checkoutHandler}>
446
- Checkout
447
- </button>
448
- <button
449
- class="action"
450
- type="button"
451
- @click=${this.continueShoppingHandler}
452
- >
453
- Continue Shopping
454
- </button>
455
- </div>`;
456
446
  }
457
447
  get storeApi() {
458
448
  var _a;
@@ -462,7 +452,7 @@ let BlotoutWallet = class BlotoutWallet extends s {
462
452
  return getCookieValue('isPopUpDismissed') === '1';
463
453
  }
464
454
  dismissPopUp() {
465
- setCookie('isPopUpDismissed', '1');
455
+ setCookie('isPopUpDismissed', '1', { maxAge: DISMISSED_COOKIE_LIFETIME });
466
456
  }
467
457
  connectedCallback() {
468
458
  super.connectedCallback();
@@ -520,24 +510,7 @@ let BlotoutWallet = class BlotoutWallet extends s {
520
510
  }
521
511
  return url;
522
512
  }
523
- closeCartHandler() {
524
- this.email.value = '';
525
- this.dismissPopUp();
526
- this.hideModal();
527
- }
528
- checkoutHandler() {
529
- this.hideModal();
530
- window.location.href = `https://${window.location.host}/cart`;
531
- }
532
- continueShoppingHandler() {
533
- this.hideModal();
534
- window.location.reload();
535
- }
536
- async skipExpiredCart() {
537
- if (!this.email.value && !this.hasEmail) {
538
- logger.error('Email not entered to skip!');
539
- return;
540
- }
513
+ async skipCarts() {
541
514
  this.hideModal();
542
515
  await fetch(this.getUrl('/cart/skip'), {
543
516
  method: 'POST',
@@ -568,15 +541,7 @@ let BlotoutWallet = class BlotoutWallet extends s {
568
541
  return T;
569
542
  }
570
543
  return x `<dialog @click=${this.clickDialogHandler}>
571
- ${!this.showCheckoutModal
572
- ? x ` <button class="dismiss" @click=${this.closeCartHandler}>
573
- ${cross()}
574
- </button>`
575
- : T}
576
- ${blotout({ class: 'logo' })}
577
- ${this.showCheckoutModal
578
- ? this.cartRestoredContent()
579
- : this.expiredCartContent()}
544
+ ${this.expiredCartContent()}
580
545
  </dialog>`;
581
546
  }
582
547
  };
@@ -598,25 +563,12 @@ BlotoutWallet.styles = [
598
563
  cursor: pointer;
599
564
  }
600
565
 
601
- .hidden {
602
- display: none;
603
- }
604
-
605
- .icon {
606
- display: block;
607
- }
608
-
609
- .logo {
610
- color: var(--primary);
611
- }
612
-
613
566
  dialog {
614
567
  width: 430px;
615
568
  max-width: 100vw;
616
- background: var(--secondary);
617
- color: var(--foreground);
618
- border: 0 solid transparent;
619
- border-top: 4px solid var(--primary);
569
+ color: var(--primary);
570
+ background: var(--background);
571
+ border: none;
620
572
  border-radius: 20px;
621
573
  padding: 24px;
622
574
  text-align: center;
@@ -627,26 +579,23 @@ BlotoutWallet.styles = [
627
579
  backdrop-filter: blur(4px);
628
580
  }
629
581
 
630
- .dismiss {
631
- position: absolute;
632
- right: 20px;
633
- top: 20px;
634
- padding: 0;
635
- border: 0;
636
- border: 0;
637
- background: transparent;
638
- color: var(--foreground);
639
- cursor: pointer;
582
+ form.restore-form {
583
+ display: flex;
584
+ flex-direction: column;
585
+ gap: 16px;
640
586
  }
641
587
 
642
- .dismiss > svg {
643
- display: block;
644
- width: 32px;
645
- height: 32px;
588
+ div.info {
589
+ display: flex;
590
+ flex-direction: column;
591
+ gap: 4px;
592
+
593
+ p {
594
+ margin: 0;
595
+ }
646
596
  }
647
597
 
648
598
  input[name='email'] {
649
- box-sizing: border-box;
650
599
  width: 100%;
651
600
  border: 1px solid var(--input-border);
652
601
  color: var(--input-foreground);
@@ -659,19 +608,24 @@ BlotoutWallet.styles = [
659
608
  color: var(--input-foreground);
660
609
  }
661
610
 
662
- .action {
611
+ .restore {
663
612
  width: 100%;
664
613
  border: none;
665
- color: var(--foreground);
666
- background: var(--primary);
614
+ color: var(--button-foreground);
615
+ background: var(--button-background);
667
616
  border-radius: 5px;
668
- padding: 10px 16px;
617
+ padding: 12px 20px;
669
618
  }
670
619
 
671
- div.actions {
672
- display: flex;
673
- justify-content: space-between;
674
- gap: 10px;
620
+ .delete {
621
+ margin-top: 7px;
622
+ font-size: 14px;
623
+ line-height: 20px;
624
+ color: var(--secondary);
625
+ border: none;
626
+ background: none;
627
+ padding: 0;
628
+ border-bottom: 1px solid var(--secondary);
675
629
  }
676
630
  `,
677
631
  ];
@@ -691,10 +645,6 @@ __decorate([
691
645
  r(),
692
646
  __metadata("design:type", Object)
693
647
  ], BlotoutWallet.prototype, "lastExpiredCart", void 0);
694
- __decorate([
695
- r(),
696
- __metadata("design:type", Boolean)
697
- ], BlotoutWallet.prototype, "showCheckoutModal", void 0);
698
648
  BlotoutWallet = __decorate([
699
649
  t$1('blotout-wallet')
700
650
  ], BlotoutWallet);
@@ -716,7 +666,7 @@ const init = (params) => {
716
666
  throw new Error('Implementation for store API missing!');
717
667
  }
718
668
  }
719
- if ((_c = params.manifest.variables) === null || _c === void 0 ? void 0 : _c['enableUI']) {
669
+ if ((_c = params.manifest.variables) === null || _c === void 0 ? void 0 : _c['enabled']) {
720
670
  const element = (window[registryKey].wallet =
721
671
  document.createElement('blotout-wallet'));
722
672
  const theme = (_d = params.manifest.variables) === null || _d === void 0 ? void 0 : _d['theme'];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blotoutio/providers-blotout-wallet-sdk",
3
- "version": "0.48.0",
3
+ "version": "0.50.0",
4
4
  "description": "Blotout Wallet SDK for EdgeTag",
5
5
  "author": "Blotout",
6
6
  "license": "MIT",