@blotoutio/providers-blotout-wallet-sdk 0.49.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 +81 -152
  2. package/index.js +81 -152
  3. package/index.mjs +81 -152
  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
  };
@@ -287,13 +288,17 @@ const cssVars = i$4 `
287
288
  --bw-secondary,
288
289
  ${r$5(customAttributes['--bw-secondary'].defaultValue)}
289
290
  );
290
- --button: var(
291
- --bw-button,
292
- ${r$5(customAttributes['--bw-button'].defaultValue)}
291
+ --background: var(
292
+ --bw-background,
293
+ ${r$5(customAttributes['--bw-background'].defaultValue)}
293
294
  );
294
- --foreground: var(
295
- --bw-foreground,
296
- ${r$5(customAttributes['--bw-foreground'].defaultValue)}
295
+ --button-foreground: var(
296
+ --bw-button-foreground,
297
+ ${r$5(customAttributes['--bw-button-foreground'].defaultValue)}
298
+ );
299
+ --button-background: var(
300
+ --bw-button-background,
301
+ ${r$5(customAttributes['--bw-button-background'].defaultValue)}
297
302
  );
298
303
  --input-border: var(
299
304
  --bw-input-border,
@@ -320,38 +325,20 @@ const cssVars = i$4 `
320
325
  }
321
326
  `;
322
327
 
323
- const blotout = (attrs) => b `<svg
324
- width="26"
325
- height="36"
326
- viewBox="0 0 26 36"
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
- <path
333
- fill-rule="evenodd"
334
- clip-rule="evenodd"
335
- 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"
336
- fill="currentColor"
337
- />
338
- </svg>`;
339
- const cross = (attrs) => b `<svg
340
- width="32"
341
- height="32"
342
- viewBox="0 0 32 32"
343
- fill="none"
344
- xmlns="http://www.w3.org/2000/svg"
345
- class=${attrs === null || attrs === void 0 ? void 0 : attrs.class}
346
- style=${attrs === null || attrs === void 0 ? void 0 : attrs.style}
347
- >
348
- <g>
349
- <path
350
- 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"
351
- fill="currentColor"
352
- />
353
- </g>
354
- </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
+ `;
355
342
 
356
343
  const fadeInDialog = (element) => {
357
344
  const dialogAnimation = element.animate([
@@ -387,10 +374,8 @@ const DISMISSED_COOKIE_LIFETIME = 1800;
387
374
  let BlotoutWallet = class BlotoutWallet extends s {
388
375
  constructor() {
389
376
  super(...arguments);
390
- this.emailHasBeenSaved = false;
391
377
  this.hasEmail = false;
392
378
  this.lastExpiredCart = undefined;
393
- this.showCheckoutModal = false;
394
379
  this.onSubmit = async (ev) => {
395
380
  var _a;
396
381
  ev.preventDefault();
@@ -413,11 +398,6 @@ let BlotoutWallet = class BlotoutWallet extends s {
413
398
  }
414
399
  if (this.lastExpiredCart) {
415
400
  await this.storeApi.addItems(this.lastExpiredCart.items);
416
- this.showCheckoutModal = true;
417
- this.hasEmail = this.emailHasBeenSaved;
418
- if (this.emailHasBeenSaved) {
419
- this.email.value = '';
420
- }
421
401
  this.dispatchEvent(new CustomEvent('blotout-wallet-restored', {
422
402
  bubbles: true,
423
403
  }));
@@ -429,6 +409,8 @@ let BlotoutWallet = class BlotoutWallet extends s {
429
409
  throw new Error(`Could not update status in DB ${response.status}: ${await response.text()}`);
430
410
  }
431
411
  this.lastExpiredCart = undefined;
412
+ this.hideModal();
413
+ window.location.href = `https://${window.location.host}/cart`;
432
414
  }
433
415
  }
434
416
  catch (e) {
@@ -436,46 +418,33 @@ let BlotoutWallet = class BlotoutWallet extends s {
436
418
  }
437
419
  };
438
420
  this.expiredCartContent = () => {
439
- return x `<form method="dialog" @submit=${this.onSubmit}>
440
- <p>
441
- ${this.hasEmail
442
- ? x `<strong>Your cart is waiting!</strong><br />It's one click to
443
- restore it.`
444
- : x `Your cart is waiting!<br />Just enter your email to bring it
445
- back.`}
446
- </p>
447
- <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>
448
433
  <input
449
434
  type="email"
450
435
  name="email"
451
- placeholder="Enter email"
436
+ placeholder="Enter your email ID"
452
437
  ?required=${!this.hasEmail}
453
438
  style=${o({
454
439
  display: this.hasEmail ? 'none' : 'block',
455
440
  })}
456
441
  />
457
- </p>
458
- <div class="actions">
459
- <button class="action" type="submit">Restore Cart</button>
460
- <button class="action" type="button" @click=${this.skipExpiredCart}>
461
- Skip
462
- </button>
463
- </div>
464
- </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> `;
465
447
  };
466
- this.cartRestoredContent = () => x `<p>Cart Restored!</p>
467
- <div class="actions">
468
- <button class="action" type="button" @click=${this.checkoutHandler}>
469
- Checkout
470
- </button>
471
- <button
472
- class="action"
473
- type="button"
474
- @click=${this.continueShoppingHandler}
475
- >
476
- Continue Shopping
477
- </button>
478
- </div>`;
479
448
  }
480
449
  get storeApi() {
481
450
  var _a;
@@ -543,24 +512,7 @@ let BlotoutWallet = class BlotoutWallet extends s {
543
512
  }
544
513
  return url;
545
514
  }
546
- closeCartHandler() {
547
- this.email.value = '';
548
- this.dismissPopUp();
549
- this.hideModal();
550
- }
551
- checkoutHandler() {
552
- this.hideModal();
553
- window.location.href = `https://${window.location.host}/cart`;
554
- }
555
- continueShoppingHandler() {
556
- this.hideModal();
557
- window.location.reload();
558
- }
559
- async skipExpiredCart() {
560
- if (!this.email.value && !this.hasEmail) {
561
- logger.error('Email not entered to skip!');
562
- return;
563
- }
515
+ async skipCarts() {
564
516
  this.hideModal();
565
517
  await fetch(this.getUrl('/cart/skip'), {
566
518
  method: 'POST',
@@ -591,15 +543,7 @@ let BlotoutWallet = class BlotoutWallet extends s {
591
543
  return T;
592
544
  }
593
545
  return x `<dialog @click=${this.clickDialogHandler}>
594
- ${!this.showCheckoutModal
595
- ? x ` <button class="dismiss" @click=${this.closeCartHandler}>
596
- ${cross()}
597
- </button>`
598
- : T}
599
- ${blotout({ class: 'logo' })}
600
- ${this.showCheckoutModal
601
- ? this.cartRestoredContent()
602
- : this.expiredCartContent()}
546
+ ${this.expiredCartContent()}
603
547
  </dialog>`;
604
548
  }
605
549
  };
@@ -621,25 +565,12 @@ BlotoutWallet.styles = [
621
565
  cursor: pointer;
622
566
  }
623
567
 
624
- .hidden {
625
- display: none;
626
- }
627
-
628
- .icon {
629
- display: block;
630
- }
631
-
632
- .logo {
633
- color: var(--primary);
634
- }
635
-
636
568
  dialog {
637
569
  width: 430px;
638
570
  max-width: 100vw;
639
- background: var(--secondary);
640
- color: var(--foreground);
641
- border: 0 solid transparent;
642
- border-top: 4px solid var(--primary);
571
+ color: var(--primary);
572
+ background: var(--background);
573
+ border: none;
643
574
  border-radius: 20px;
644
575
  padding: 24px;
645
576
  text-align: center;
@@ -650,26 +581,23 @@ BlotoutWallet.styles = [
650
581
  backdrop-filter: blur(4px);
651
582
  }
652
583
 
653
- .dismiss {
654
- position: absolute;
655
- right: 20px;
656
- top: 20px;
657
- padding: 0;
658
- border: 0;
659
- border: 0;
660
- background: transparent;
661
- color: var(--foreground);
662
- cursor: pointer;
584
+ form.restore-form {
585
+ display: flex;
586
+ flex-direction: column;
587
+ gap: 16px;
663
588
  }
664
589
 
665
- .dismiss > svg {
666
- display: block;
667
- width: 32px;
668
- height: 32px;
590
+ div.info {
591
+ display: flex;
592
+ flex-direction: column;
593
+ gap: 4px;
594
+
595
+ p {
596
+ margin: 0;
597
+ }
669
598
  }
670
599
 
671
600
  input[name='email'] {
672
- box-sizing: border-box;
673
601
  width: 100%;
674
602
  border: 1px solid var(--input-border);
675
603
  color: var(--input-foreground);
@@ -682,19 +610,24 @@ BlotoutWallet.styles = [
682
610
  color: var(--input-foreground);
683
611
  }
684
612
 
685
- .action {
613
+ .restore {
686
614
  width: 100%;
687
615
  border: none;
688
- color: var(--foreground);
689
- background: var(--primary);
616
+ color: var(--button-foreground);
617
+ background: var(--button-background);
690
618
  border-radius: 5px;
691
- padding: 10px 16px;
619
+ padding: 12px 20px;
692
620
  }
693
621
 
694
- div.actions {
695
- display: flex;
696
- justify-content: space-between;
697
- 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);
698
631
  }
699
632
  `,
700
633
  ];
@@ -714,10 +647,6 @@ __decorate([
714
647
  r(),
715
648
  __metadata("design:type", Object)
716
649
  ], BlotoutWallet.prototype, "lastExpiredCart", void 0);
717
- __decorate([
718
- r(),
719
- __metadata("design:type", Boolean)
720
- ], BlotoutWallet.prototype, "showCheckoutModal", void 0);
721
650
  BlotoutWallet = __decorate([
722
651
  t$1('blotout-wallet')
723
652
  ], BlotoutWallet);
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
  };
@@ -288,13 +289,17 @@ var ProvidersBlotoutWalletSdk = (function () {
288
289
  --bw-secondary,
289
290
  ${r$5(customAttributes['--bw-secondary'].defaultValue)}
290
291
  );
291
- --button: var(
292
- --bw-button,
293
- ${r$5(customAttributes['--bw-button'].defaultValue)}
292
+ --background: var(
293
+ --bw-background,
294
+ ${r$5(customAttributes['--bw-background'].defaultValue)}
294
295
  );
295
- --foreground: var(
296
- --bw-foreground,
297
- ${r$5(customAttributes['--bw-foreground'].defaultValue)}
296
+ --button-foreground: var(
297
+ --bw-button-foreground,
298
+ ${r$5(customAttributes['--bw-button-foreground'].defaultValue)}
299
+ );
300
+ --button-background: var(
301
+ --bw-button-background,
302
+ ${r$5(customAttributes['--bw-button-background'].defaultValue)}
298
303
  );
299
304
  --input-border: var(
300
305
  --bw-input-border,
@@ -321,38 +326,20 @@ var ProvidersBlotoutWalletSdk = (function () {
321
326
  }
322
327
  `;
323
328
 
324
- const blotout = (attrs) => b `<svg
325
- width="26"
326
- height="36"
327
- viewBox="0 0 26 36"
328
- fill="none"
329
- xmlns="http://www.w3.org/2000/svg"
330
- class=${attrs === null || attrs === void 0 ? void 0 : attrs.class}
331
- style=${attrs === null || attrs === void 0 ? void 0 : attrs.style}
332
- >
333
- <path
334
- fill-rule="evenodd"
335
- clip-rule="evenodd"
336
- 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"
337
- fill="currentColor"
338
- />
339
- </svg>`;
340
- const cross = (attrs) => b `<svg
341
- width="32"
342
- height="32"
343
- viewBox="0 0 32 32"
344
- fill="none"
345
- xmlns="http://www.w3.org/2000/svg"
346
- class=${attrs === null || attrs === void 0 ? void 0 : attrs.class}
347
- style=${attrs === null || attrs === void 0 ? void 0 : attrs.style}
348
- >
349
- <g>
350
- <path
351
- 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"
352
- fill="currentColor"
353
- />
354
- </g>
355
- </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
+ `;
356
343
 
357
344
  const fadeInDialog = (element) => {
358
345
  const dialogAnimation = element.animate([
@@ -388,10 +375,8 @@ var ProvidersBlotoutWalletSdk = (function () {
388
375
  let BlotoutWallet = class BlotoutWallet extends s {
389
376
  constructor() {
390
377
  super(...arguments);
391
- this.emailHasBeenSaved = false;
392
378
  this.hasEmail = false;
393
379
  this.lastExpiredCart = undefined;
394
- this.showCheckoutModal = false;
395
380
  this.onSubmit = async (ev) => {
396
381
  var _a;
397
382
  ev.preventDefault();
@@ -414,11 +399,6 @@ var ProvidersBlotoutWalletSdk = (function () {
414
399
  }
415
400
  if (this.lastExpiredCart) {
416
401
  await this.storeApi.addItems(this.lastExpiredCart.items);
417
- this.showCheckoutModal = true;
418
- this.hasEmail = this.emailHasBeenSaved;
419
- if (this.emailHasBeenSaved) {
420
- this.email.value = '';
421
- }
422
402
  this.dispatchEvent(new CustomEvent('blotout-wallet-restored', {
423
403
  bubbles: true,
424
404
  }));
@@ -430,6 +410,8 @@ var ProvidersBlotoutWalletSdk = (function () {
430
410
  throw new Error(`Could not update status in DB ${response.status}: ${await response.text()}`);
431
411
  }
432
412
  this.lastExpiredCart = undefined;
413
+ this.hideModal();
414
+ window.location.href = `https://${window.location.host}/cart`;
433
415
  }
434
416
  }
435
417
  catch (e) {
@@ -437,46 +419,33 @@ var ProvidersBlotoutWalletSdk = (function () {
437
419
  }
438
420
  };
439
421
  this.expiredCartContent = () => {
440
- return x `<form method="dialog" @submit=${this.onSubmit}>
441
- <p>
442
- ${this.hasEmail
443
- ? x `<strong>Your cart is waiting!</strong><br />It's one click to
444
- restore it.`
445
- : x `Your cart is waiting!<br />Just enter your email to bring it
446
- back.`}
447
- </p>
448
- <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>
449
434
  <input
450
435
  type="email"
451
436
  name="email"
452
- placeholder="Enter email"
437
+ placeholder="Enter your email ID"
453
438
  ?required=${!this.hasEmail}
454
439
  style=${o({
455
440
  display: this.hasEmail ? 'none' : 'block',
456
441
  })}
457
442
  />
458
- </p>
459
- <div class="actions">
460
- <button class="action" type="submit">Restore Cart</button>
461
- <button class="action" type="button" @click=${this.skipExpiredCart}>
462
- Skip
463
- </button>
464
- </div>
465
- </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> `;
466
448
  };
467
- this.cartRestoredContent = () => x `<p>Cart Restored!</p>
468
- <div class="actions">
469
- <button class="action" type="button" @click=${this.checkoutHandler}>
470
- Checkout
471
- </button>
472
- <button
473
- class="action"
474
- type="button"
475
- @click=${this.continueShoppingHandler}
476
- >
477
- Continue Shopping
478
- </button>
479
- </div>`;
480
449
  }
481
450
  get storeApi() {
482
451
  var _a;
@@ -544,24 +513,7 @@ var ProvidersBlotoutWalletSdk = (function () {
544
513
  }
545
514
  return url;
546
515
  }
547
- closeCartHandler() {
548
- this.email.value = '';
549
- this.dismissPopUp();
550
- this.hideModal();
551
- }
552
- checkoutHandler() {
553
- this.hideModal();
554
- window.location.href = `https://${window.location.host}/cart`;
555
- }
556
- continueShoppingHandler() {
557
- this.hideModal();
558
- window.location.reload();
559
- }
560
- async skipExpiredCart() {
561
- if (!this.email.value && !this.hasEmail) {
562
- logger.error('Email not entered to skip!');
563
- return;
564
- }
516
+ async skipCarts() {
565
517
  this.hideModal();
566
518
  await fetch(this.getUrl('/cart/skip'), {
567
519
  method: 'POST',
@@ -592,15 +544,7 @@ var ProvidersBlotoutWalletSdk = (function () {
592
544
  return T;
593
545
  }
594
546
  return x `<dialog @click=${this.clickDialogHandler}>
595
- ${!this.showCheckoutModal
596
- ? x ` <button class="dismiss" @click=${this.closeCartHandler}>
597
- ${cross()}
598
- </button>`
599
- : T}
600
- ${blotout({ class: 'logo' })}
601
- ${this.showCheckoutModal
602
- ? this.cartRestoredContent()
603
- : this.expiredCartContent()}
547
+ ${this.expiredCartContent()}
604
548
  </dialog>`;
605
549
  }
606
550
  };
@@ -622,25 +566,12 @@ var ProvidersBlotoutWalletSdk = (function () {
622
566
  cursor: pointer;
623
567
  }
624
568
 
625
- .hidden {
626
- display: none;
627
- }
628
-
629
- .icon {
630
- display: block;
631
- }
632
-
633
- .logo {
634
- color: var(--primary);
635
- }
636
-
637
569
  dialog {
638
570
  width: 430px;
639
571
  max-width: 100vw;
640
- background: var(--secondary);
641
- color: var(--foreground);
642
- border: 0 solid transparent;
643
- border-top: 4px solid var(--primary);
572
+ color: var(--primary);
573
+ background: var(--background);
574
+ border: none;
644
575
  border-radius: 20px;
645
576
  padding: 24px;
646
577
  text-align: center;
@@ -651,26 +582,23 @@ var ProvidersBlotoutWalletSdk = (function () {
651
582
  backdrop-filter: blur(4px);
652
583
  }
653
584
 
654
- .dismiss {
655
- position: absolute;
656
- right: 20px;
657
- top: 20px;
658
- padding: 0;
659
- border: 0;
660
- border: 0;
661
- background: transparent;
662
- color: var(--foreground);
663
- cursor: pointer;
585
+ form.restore-form {
586
+ display: flex;
587
+ flex-direction: column;
588
+ gap: 16px;
664
589
  }
665
590
 
666
- .dismiss > svg {
667
- display: block;
668
- width: 32px;
669
- height: 32px;
591
+ div.info {
592
+ display: flex;
593
+ flex-direction: column;
594
+ gap: 4px;
595
+
596
+ p {
597
+ margin: 0;
598
+ }
670
599
  }
671
600
 
672
601
  input[name='email'] {
673
- box-sizing: border-box;
674
602
  width: 100%;
675
603
  border: 1px solid var(--input-border);
676
604
  color: var(--input-foreground);
@@ -683,19 +611,24 @@ var ProvidersBlotoutWalletSdk = (function () {
683
611
  color: var(--input-foreground);
684
612
  }
685
613
 
686
- .action {
614
+ .restore {
687
615
  width: 100%;
688
616
  border: none;
689
- color: var(--foreground);
690
- background: var(--primary);
617
+ color: var(--button-foreground);
618
+ background: var(--button-background);
691
619
  border-radius: 5px;
692
- padding: 10px 16px;
620
+ padding: 12px 20px;
693
621
  }
694
622
 
695
- div.actions {
696
- display: flex;
697
- justify-content: space-between;
698
- 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);
699
632
  }
700
633
  `,
701
634
  ];
@@ -715,10 +648,6 @@ var ProvidersBlotoutWalletSdk = (function () {
715
648
  r(),
716
649
  __metadata("design:type", Object)
717
650
  ], BlotoutWallet.prototype, "lastExpiredCart", void 0);
718
- __decorate([
719
- r(),
720
- __metadata("design:type", Boolean)
721
- ], BlotoutWallet.prototype, "showCheckoutModal", void 0);
722
651
  BlotoutWallet = __decorate([
723
652
  t$1('blotout-wallet')
724
653
  ], BlotoutWallet);
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
  };
@@ -285,13 +286,17 @@ const cssVars = i$4 `
285
286
  --bw-secondary,
286
287
  ${r$5(customAttributes['--bw-secondary'].defaultValue)}
287
288
  );
288
- --button: var(
289
- --bw-button,
290
- ${r$5(customAttributes['--bw-button'].defaultValue)}
289
+ --background: var(
290
+ --bw-background,
291
+ ${r$5(customAttributes['--bw-background'].defaultValue)}
291
292
  );
292
- --foreground: var(
293
- --bw-foreground,
294
- ${r$5(customAttributes['--bw-foreground'].defaultValue)}
293
+ --button-foreground: var(
294
+ --bw-button-foreground,
295
+ ${r$5(customAttributes['--bw-button-foreground'].defaultValue)}
296
+ );
297
+ --button-background: var(
298
+ --bw-button-background,
299
+ ${r$5(customAttributes['--bw-button-background'].defaultValue)}
295
300
  );
296
301
  --input-border: var(
297
302
  --bw-input-border,
@@ -318,38 +323,20 @@ const cssVars = i$4 `
318
323
  }
319
324
  `;
320
325
 
321
- const blotout = (attrs) => b `<svg
322
- width="26"
323
- height="36"
324
- viewBox="0 0 26 36"
325
- fill="none"
326
- xmlns="http://www.w3.org/2000/svg"
327
- class=${attrs === null || attrs === void 0 ? void 0 : attrs.class}
328
- style=${attrs === null || attrs === void 0 ? void 0 : attrs.style}
329
- >
330
- <path
331
- fill-rule="evenodd"
332
- clip-rule="evenodd"
333
- 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"
334
- fill="currentColor"
335
- />
336
- </svg>`;
337
- const cross = (attrs) => b `<svg
338
- width="32"
339
- height="32"
340
- viewBox="0 0 32 32"
341
- fill="none"
342
- xmlns="http://www.w3.org/2000/svg"
343
- class=${attrs === null || attrs === void 0 ? void 0 : attrs.class}
344
- style=${attrs === null || attrs === void 0 ? void 0 : attrs.style}
345
- >
346
- <g>
347
- <path
348
- 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"
349
- fill="currentColor"
350
- />
351
- </g>
352
- </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
+ `;
353
340
 
354
341
  const fadeInDialog = (element) => {
355
342
  const dialogAnimation = element.animate([
@@ -385,10 +372,8 @@ const DISMISSED_COOKIE_LIFETIME = 1800;
385
372
  let BlotoutWallet = class BlotoutWallet extends s {
386
373
  constructor() {
387
374
  super(...arguments);
388
- this.emailHasBeenSaved = false;
389
375
  this.hasEmail = false;
390
376
  this.lastExpiredCart = undefined;
391
- this.showCheckoutModal = false;
392
377
  this.onSubmit = async (ev) => {
393
378
  var _a;
394
379
  ev.preventDefault();
@@ -411,11 +396,6 @@ let BlotoutWallet = class BlotoutWallet extends s {
411
396
  }
412
397
  if (this.lastExpiredCart) {
413
398
  await this.storeApi.addItems(this.lastExpiredCart.items);
414
- this.showCheckoutModal = true;
415
- this.hasEmail = this.emailHasBeenSaved;
416
- if (this.emailHasBeenSaved) {
417
- this.email.value = '';
418
- }
419
399
  this.dispatchEvent(new CustomEvent('blotout-wallet-restored', {
420
400
  bubbles: true,
421
401
  }));
@@ -427,6 +407,8 @@ let BlotoutWallet = class BlotoutWallet extends s {
427
407
  throw new Error(`Could not update status in DB ${response.status}: ${await response.text()}`);
428
408
  }
429
409
  this.lastExpiredCart = undefined;
410
+ this.hideModal();
411
+ window.location.href = `https://${window.location.host}/cart`;
430
412
  }
431
413
  }
432
414
  catch (e) {
@@ -434,46 +416,33 @@ let BlotoutWallet = class BlotoutWallet extends s {
434
416
  }
435
417
  };
436
418
  this.expiredCartContent = () => {
437
- return x `<form method="dialog" @submit=${this.onSubmit}>
438
- <p>
439
- ${this.hasEmail
440
- ? x `<strong>Your cart is waiting!</strong><br />It's one click to
441
- restore it.`
442
- : x `Your cart is waiting!<br />Just enter your email to bring it
443
- back.`}
444
- </p>
445
- <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>
446
431
  <input
447
432
  type="email"
448
433
  name="email"
449
- placeholder="Enter email"
434
+ placeholder="Enter your email ID"
450
435
  ?required=${!this.hasEmail}
451
436
  style=${o({
452
437
  display: this.hasEmail ? 'none' : 'block',
453
438
  })}
454
439
  />
455
- </p>
456
- <div class="actions">
457
- <button class="action" type="submit">Restore Cart</button>
458
- <button class="action" type="button" @click=${this.skipExpiredCart}>
459
- Skip
460
- </button>
461
- </div>
462
- </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> `;
463
445
  };
464
- this.cartRestoredContent = () => x `<p>Cart Restored!</p>
465
- <div class="actions">
466
- <button class="action" type="button" @click=${this.checkoutHandler}>
467
- Checkout
468
- </button>
469
- <button
470
- class="action"
471
- type="button"
472
- @click=${this.continueShoppingHandler}
473
- >
474
- Continue Shopping
475
- </button>
476
- </div>`;
477
446
  }
478
447
  get storeApi() {
479
448
  var _a;
@@ -541,24 +510,7 @@ let BlotoutWallet = class BlotoutWallet extends s {
541
510
  }
542
511
  return url;
543
512
  }
544
- closeCartHandler() {
545
- this.email.value = '';
546
- this.dismissPopUp();
547
- this.hideModal();
548
- }
549
- checkoutHandler() {
550
- this.hideModal();
551
- window.location.href = `https://${window.location.host}/cart`;
552
- }
553
- continueShoppingHandler() {
554
- this.hideModal();
555
- window.location.reload();
556
- }
557
- async skipExpiredCart() {
558
- if (!this.email.value && !this.hasEmail) {
559
- logger.error('Email not entered to skip!');
560
- return;
561
- }
513
+ async skipCarts() {
562
514
  this.hideModal();
563
515
  await fetch(this.getUrl('/cart/skip'), {
564
516
  method: 'POST',
@@ -589,15 +541,7 @@ let BlotoutWallet = class BlotoutWallet extends s {
589
541
  return T;
590
542
  }
591
543
  return x `<dialog @click=${this.clickDialogHandler}>
592
- ${!this.showCheckoutModal
593
- ? x ` <button class="dismiss" @click=${this.closeCartHandler}>
594
- ${cross()}
595
- </button>`
596
- : T}
597
- ${blotout({ class: 'logo' })}
598
- ${this.showCheckoutModal
599
- ? this.cartRestoredContent()
600
- : this.expiredCartContent()}
544
+ ${this.expiredCartContent()}
601
545
  </dialog>`;
602
546
  }
603
547
  };
@@ -619,25 +563,12 @@ BlotoutWallet.styles = [
619
563
  cursor: pointer;
620
564
  }
621
565
 
622
- .hidden {
623
- display: none;
624
- }
625
-
626
- .icon {
627
- display: block;
628
- }
629
-
630
- .logo {
631
- color: var(--primary);
632
- }
633
-
634
566
  dialog {
635
567
  width: 430px;
636
568
  max-width: 100vw;
637
- background: var(--secondary);
638
- color: var(--foreground);
639
- border: 0 solid transparent;
640
- border-top: 4px solid var(--primary);
569
+ color: var(--primary);
570
+ background: var(--background);
571
+ border: none;
641
572
  border-radius: 20px;
642
573
  padding: 24px;
643
574
  text-align: center;
@@ -648,26 +579,23 @@ BlotoutWallet.styles = [
648
579
  backdrop-filter: blur(4px);
649
580
  }
650
581
 
651
- .dismiss {
652
- position: absolute;
653
- right: 20px;
654
- top: 20px;
655
- padding: 0;
656
- border: 0;
657
- border: 0;
658
- background: transparent;
659
- color: var(--foreground);
660
- cursor: pointer;
582
+ form.restore-form {
583
+ display: flex;
584
+ flex-direction: column;
585
+ gap: 16px;
661
586
  }
662
587
 
663
- .dismiss > svg {
664
- display: block;
665
- width: 32px;
666
- height: 32px;
588
+ div.info {
589
+ display: flex;
590
+ flex-direction: column;
591
+ gap: 4px;
592
+
593
+ p {
594
+ margin: 0;
595
+ }
667
596
  }
668
597
 
669
598
  input[name='email'] {
670
- box-sizing: border-box;
671
599
  width: 100%;
672
600
  border: 1px solid var(--input-border);
673
601
  color: var(--input-foreground);
@@ -680,19 +608,24 @@ BlotoutWallet.styles = [
680
608
  color: var(--input-foreground);
681
609
  }
682
610
 
683
- .action {
611
+ .restore {
684
612
  width: 100%;
685
613
  border: none;
686
- color: var(--foreground);
687
- background: var(--primary);
614
+ color: var(--button-foreground);
615
+ background: var(--button-background);
688
616
  border-radius: 5px;
689
- padding: 10px 16px;
617
+ padding: 12px 20px;
690
618
  }
691
619
 
692
- div.actions {
693
- display: flex;
694
- justify-content: space-between;
695
- 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);
696
629
  }
697
630
  `,
698
631
  ];
@@ -712,10 +645,6 @@ __decorate([
712
645
  r(),
713
646
  __metadata("design:type", Object)
714
647
  ], BlotoutWallet.prototype, "lastExpiredCart", void 0);
715
- __decorate([
716
- r(),
717
- __metadata("design:type", Boolean)
718
- ], BlotoutWallet.prototype, "showCheckoutModal", void 0);
719
648
  BlotoutWallet = __decorate([
720
649
  t$1('blotout-wallet')
721
650
  ], BlotoutWallet);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blotoutio/providers-blotout-wallet-sdk",
3
- "version": "0.49.0",
3
+ "version": "0.50.0",
4
4
  "description": "Blotout Wallet SDK for EdgeTag",
5
5
  "author": "Blotout",
6
6
  "license": "MIT",