@blotoutio/providers-blotout-wallet-sdk 0.55.1 → 0.56.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.
- package/index.cjs.js +48 -20
- package/index.js +48 -20
- package/index.mjs +48 -20
- package/package.json +1 -1
package/index.cjs.js
CHANGED
@@ -48,6 +48,7 @@ const customAttributes = {
|
|
48
48
|
type: 'text',
|
49
49
|
defaultValue: "Hey! Your cart has expired!<br>But we've got you covered! \u{1F609}",
|
50
50
|
},
|
51
|
+
title: { type: 'text', defaultValue: '' },
|
51
52
|
inputLabel: { type: 'text', defaultValue: 'Enter your email ID' },
|
52
53
|
restoreLabel: { type: 'text', defaultValue: 'Restore Cart' },
|
53
54
|
rejectionLabel: {
|
@@ -431,6 +432,7 @@ let BlotoutWallet = class BlotoutWallet extends s {
|
|
431
432
|
this.hasEmail = false;
|
432
433
|
this.lastExpiredCart = undefined;
|
433
434
|
this.state = 'ready';
|
435
|
+
this.isStylesheetInjected = false;
|
434
436
|
this.transitionTo = (newState) => {
|
435
437
|
return flipOut(this.dialog)
|
436
438
|
.then(() => (this.state = newState))
|
@@ -520,16 +522,23 @@ let BlotoutWallet = class BlotoutWallet extends s {
|
|
520
522
|
ev.stopPropagation();
|
521
523
|
};
|
522
524
|
this.expiredCartContent = () => {
|
523
|
-
var _a, _b, _c, _d;
|
524
|
-
return x
|
525
|
-
|
526
|
-
|
527
|
-
|
525
|
+
var _a, _b, _c, _d, _e;
|
526
|
+
return x `<form
|
527
|
+
class="restore-form"
|
528
|
+
method="dialog"
|
529
|
+
@submit=${this.onSubmit}
|
530
|
+
>
|
531
|
+
${((_a = this.theme) === null || _a === void 0 ? void 0 : _a.title)
|
532
|
+
? x `<h1 class="title">${this.theme.title}</h1>`
|
533
|
+
: T}
|
534
|
+
<div class="text">
|
535
|
+
${formatString(((_b = this.theme) === null || _b === void 0 ? void 0 : _b.text) || customAttributes.text.defaultValue)}
|
528
536
|
</div>
|
529
537
|
<input
|
530
538
|
type="email"
|
531
539
|
name="email"
|
532
|
-
|
540
|
+
class="email"
|
541
|
+
placeholder=${((_c = this.theme) === null || _c === void 0 ? void 0 : _c.inputLabel) ||
|
533
542
|
customAttributes.inputLabel.defaultValue}
|
534
543
|
?required=${!this.hasEmail}
|
535
544
|
style=${o$1({
|
@@ -537,15 +546,14 @@ let BlotoutWallet = class BlotoutWallet extends s {
|
|
537
546
|
})}
|
538
547
|
/>
|
539
548
|
<button class="restore" type="submit">
|
540
|
-
${((
|
549
|
+
${((_d = this.theme) === null || _d === void 0 ? void 0 : _d.restoreLabel) ||
|
541
550
|
customAttributes.restoreLabel.defaultValue}
|
542
551
|
</button>
|
543
552
|
</form>
|
544
|
-
<button class="
|
545
|
-
${((
|
553
|
+
<button class="reject" type="button" @click=${this.skipCarts}>
|
554
|
+
${((_e = this.theme) === null || _e === void 0 ? void 0 : _e.rejectionLabel) ||
|
546
555
|
customAttributes.rejectionLabel.defaultValue}
|
547
|
-
</button>
|
548
|
-
`;
|
556
|
+
</button> `;
|
549
557
|
};
|
550
558
|
this.loadingContent = () => {
|
551
559
|
return x `
|
@@ -566,7 +574,7 @@ let BlotoutWallet = class BlotoutWallet extends s {
|
|
566
574
|
<form method="dialog" @submit=${this.onSubmit}>
|
567
575
|
<button class="restore" type="submit">Try Again</button>
|
568
576
|
</form>
|
569
|
-
<button class="
|
577
|
+
<button class="reject" @click=${this.skipCarts}>Dismiss</button>
|
570
578
|
`;
|
571
579
|
};
|
572
580
|
}
|
@@ -586,7 +594,14 @@ let BlotoutWallet = class BlotoutWallet extends s {
|
|
586
594
|
}).catch(logger.error);
|
587
595
|
}
|
588
596
|
connectedCallback() {
|
597
|
+
var _a;
|
589
598
|
super.connectedCallback();
|
599
|
+
if (!this.isStylesheetInjected && ((_a = this.theme) === null || _a === void 0 ? void 0 : _a.css)) {
|
600
|
+
const sheet = new CSSStyleSheet();
|
601
|
+
sheet.replaceSync(this.theme.css);
|
602
|
+
this.shadowRoot.adoptedStyleSheets.push(sheet);
|
603
|
+
this.isStylesheetInjected = true;
|
604
|
+
}
|
590
605
|
if (!this.userId) {
|
591
606
|
logger.error('No UserId set');
|
592
607
|
return;
|
@@ -663,7 +678,7 @@ let BlotoutWallet = class BlotoutWallet extends s {
|
|
663
678
|
if (this.isPopUpDismissed) {
|
664
679
|
return T;
|
665
680
|
}
|
666
|
-
return x ` <dialog @click=${this.onDialogClick}>
|
681
|
+
return x ` <dialog class="popup" @click=${this.onDialogClick}>
|
667
682
|
<div @click=${this.onWrapperClick}>
|
668
683
|
<div
|
669
684
|
class="centered"
|
@@ -719,7 +734,7 @@ BlotoutWallet.styles = [
|
|
719
734
|
cursor: pointer;
|
720
735
|
}
|
721
736
|
|
722
|
-
|
737
|
+
.popup {
|
723
738
|
width: 430px;
|
724
739
|
max-width: 100vw;
|
725
740
|
color: var(--primary);
|
@@ -730,19 +745,32 @@ BlotoutWallet.styles = [
|
|
730
745
|
text-align: center;
|
731
746
|
}
|
732
747
|
|
733
|
-
|
748
|
+
.popup::backdrop {
|
734
749
|
background: var(--backdrop);
|
735
750
|
backdrop-filter: blur(4px);
|
736
751
|
}
|
737
752
|
|
738
|
-
|
753
|
+
.restore-form {
|
739
754
|
display: flex;
|
740
755
|
flex-direction: column;
|
741
756
|
gap: 16px;
|
742
757
|
width: 100%;
|
743
758
|
}
|
744
759
|
|
745
|
-
|
760
|
+
.title {
|
761
|
+
margin: 0;
|
762
|
+
padding: 0;
|
763
|
+
font-size: 20px;
|
764
|
+
font-weight: bold;
|
765
|
+
line-height: 30px;
|
766
|
+
}
|
767
|
+
|
768
|
+
.text {
|
769
|
+
margin: 0;
|
770
|
+
padding: 0;
|
771
|
+
}
|
772
|
+
|
773
|
+
.email {
|
746
774
|
width: 100%;
|
747
775
|
border: 1px solid var(--input-border);
|
748
776
|
color: var(--input-foreground);
|
@@ -751,12 +779,12 @@ BlotoutWallet.styles = [
|
|
751
779
|
border-radius: 5px;
|
752
780
|
}
|
753
781
|
|
754
|
-
|
782
|
+
.email::placeholder {
|
755
783
|
color: var(--input-foreground);
|
756
784
|
color: color(from var(--input-foreground) srgb r g b / 0.7);
|
757
785
|
}
|
758
786
|
|
759
|
-
:is(
|
787
|
+
:is(.email, button):focus-visible {
|
760
788
|
outline-color: var(--primary);
|
761
789
|
}
|
762
790
|
|
@@ -769,7 +797,7 @@ BlotoutWallet.styles = [
|
|
769
797
|
padding: 12px 20px;
|
770
798
|
}
|
771
799
|
|
772
|
-
.
|
800
|
+
.reject {
|
773
801
|
font-size: 14px;
|
774
802
|
line-height: 20px;
|
775
803
|
color: var(--secondary);
|
package/index.js
CHANGED
@@ -49,6 +49,7 @@ var ProvidersBlotoutWalletSdk = (function () {
|
|
49
49
|
type: 'text',
|
50
50
|
defaultValue: "Hey! Your cart has expired!<br>But we've got you covered! \u{1F609}",
|
51
51
|
},
|
52
|
+
title: { type: 'text', defaultValue: '' },
|
52
53
|
inputLabel: { type: 'text', defaultValue: 'Enter your email ID' },
|
53
54
|
restoreLabel: { type: 'text', defaultValue: 'Restore Cart' },
|
54
55
|
rejectionLabel: {
|
@@ -432,6 +433,7 @@ var ProvidersBlotoutWalletSdk = (function () {
|
|
432
433
|
this.hasEmail = false;
|
433
434
|
this.lastExpiredCart = undefined;
|
434
435
|
this.state = 'ready';
|
436
|
+
this.isStylesheetInjected = false;
|
435
437
|
this.transitionTo = (newState) => {
|
436
438
|
return flipOut(this.dialog)
|
437
439
|
.then(() => (this.state = newState))
|
@@ -521,16 +523,23 @@ var ProvidersBlotoutWalletSdk = (function () {
|
|
521
523
|
ev.stopPropagation();
|
522
524
|
};
|
523
525
|
this.expiredCartContent = () => {
|
524
|
-
var _a, _b, _c, _d;
|
525
|
-
return x
|
526
|
-
|
527
|
-
|
528
|
-
|
526
|
+
var _a, _b, _c, _d, _e;
|
527
|
+
return x `<form
|
528
|
+
class="restore-form"
|
529
|
+
method="dialog"
|
530
|
+
@submit=${this.onSubmit}
|
531
|
+
>
|
532
|
+
${((_a = this.theme) === null || _a === void 0 ? void 0 : _a.title)
|
533
|
+
? x `<h1 class="title">${this.theme.title}</h1>`
|
534
|
+
: T}
|
535
|
+
<div class="text">
|
536
|
+
${formatString(((_b = this.theme) === null || _b === void 0 ? void 0 : _b.text) || customAttributes.text.defaultValue)}
|
529
537
|
</div>
|
530
538
|
<input
|
531
539
|
type="email"
|
532
540
|
name="email"
|
533
|
-
|
541
|
+
class="email"
|
542
|
+
placeholder=${((_c = this.theme) === null || _c === void 0 ? void 0 : _c.inputLabel) ||
|
534
543
|
customAttributes.inputLabel.defaultValue}
|
535
544
|
?required=${!this.hasEmail}
|
536
545
|
style=${o$1({
|
@@ -538,15 +547,14 @@ var ProvidersBlotoutWalletSdk = (function () {
|
|
538
547
|
})}
|
539
548
|
/>
|
540
549
|
<button class="restore" type="submit">
|
541
|
-
${((
|
550
|
+
${((_d = this.theme) === null || _d === void 0 ? void 0 : _d.restoreLabel) ||
|
542
551
|
customAttributes.restoreLabel.defaultValue}
|
543
552
|
</button>
|
544
553
|
</form>
|
545
|
-
<button class="
|
546
|
-
${((
|
554
|
+
<button class="reject" type="button" @click=${this.skipCarts}>
|
555
|
+
${((_e = this.theme) === null || _e === void 0 ? void 0 : _e.rejectionLabel) ||
|
547
556
|
customAttributes.rejectionLabel.defaultValue}
|
548
|
-
</button>
|
549
|
-
`;
|
557
|
+
</button> `;
|
550
558
|
};
|
551
559
|
this.loadingContent = () => {
|
552
560
|
return x `
|
@@ -567,7 +575,7 @@ var ProvidersBlotoutWalletSdk = (function () {
|
|
567
575
|
<form method="dialog" @submit=${this.onSubmit}>
|
568
576
|
<button class="restore" type="submit">Try Again</button>
|
569
577
|
</form>
|
570
|
-
<button class="
|
578
|
+
<button class="reject" @click=${this.skipCarts}>Dismiss</button>
|
571
579
|
`;
|
572
580
|
};
|
573
581
|
}
|
@@ -587,7 +595,14 @@ var ProvidersBlotoutWalletSdk = (function () {
|
|
587
595
|
}).catch(logger.error);
|
588
596
|
}
|
589
597
|
connectedCallback() {
|
598
|
+
var _a;
|
590
599
|
super.connectedCallback();
|
600
|
+
if (!this.isStylesheetInjected && ((_a = this.theme) === null || _a === void 0 ? void 0 : _a.css)) {
|
601
|
+
const sheet = new CSSStyleSheet();
|
602
|
+
sheet.replaceSync(this.theme.css);
|
603
|
+
this.shadowRoot.adoptedStyleSheets.push(sheet);
|
604
|
+
this.isStylesheetInjected = true;
|
605
|
+
}
|
591
606
|
if (!this.userId) {
|
592
607
|
logger.error('No UserId set');
|
593
608
|
return;
|
@@ -664,7 +679,7 @@ var ProvidersBlotoutWalletSdk = (function () {
|
|
664
679
|
if (this.isPopUpDismissed) {
|
665
680
|
return T;
|
666
681
|
}
|
667
|
-
return x ` <dialog @click=${this.onDialogClick}>
|
682
|
+
return x ` <dialog class="popup" @click=${this.onDialogClick}>
|
668
683
|
<div @click=${this.onWrapperClick}>
|
669
684
|
<div
|
670
685
|
class="centered"
|
@@ -720,7 +735,7 @@ var ProvidersBlotoutWalletSdk = (function () {
|
|
720
735
|
cursor: pointer;
|
721
736
|
}
|
722
737
|
|
723
|
-
|
738
|
+
.popup {
|
724
739
|
width: 430px;
|
725
740
|
max-width: 100vw;
|
726
741
|
color: var(--primary);
|
@@ -731,19 +746,32 @@ var ProvidersBlotoutWalletSdk = (function () {
|
|
731
746
|
text-align: center;
|
732
747
|
}
|
733
748
|
|
734
|
-
|
749
|
+
.popup::backdrop {
|
735
750
|
background: var(--backdrop);
|
736
751
|
backdrop-filter: blur(4px);
|
737
752
|
}
|
738
753
|
|
739
|
-
|
754
|
+
.restore-form {
|
740
755
|
display: flex;
|
741
756
|
flex-direction: column;
|
742
757
|
gap: 16px;
|
743
758
|
width: 100%;
|
744
759
|
}
|
745
760
|
|
746
|
-
|
761
|
+
.title {
|
762
|
+
margin: 0;
|
763
|
+
padding: 0;
|
764
|
+
font-size: 20px;
|
765
|
+
font-weight: bold;
|
766
|
+
line-height: 30px;
|
767
|
+
}
|
768
|
+
|
769
|
+
.text {
|
770
|
+
margin: 0;
|
771
|
+
padding: 0;
|
772
|
+
}
|
773
|
+
|
774
|
+
.email {
|
747
775
|
width: 100%;
|
748
776
|
border: 1px solid var(--input-border);
|
749
777
|
color: var(--input-foreground);
|
@@ -752,12 +780,12 @@ var ProvidersBlotoutWalletSdk = (function () {
|
|
752
780
|
border-radius: 5px;
|
753
781
|
}
|
754
782
|
|
755
|
-
|
783
|
+
.email::placeholder {
|
756
784
|
color: var(--input-foreground);
|
757
785
|
color: color(from var(--input-foreground) srgb r g b / 0.7);
|
758
786
|
}
|
759
787
|
|
760
|
-
:is(
|
788
|
+
:is(.email, button):focus-visible {
|
761
789
|
outline-color: var(--primary);
|
762
790
|
}
|
763
791
|
|
@@ -770,7 +798,7 @@ var ProvidersBlotoutWalletSdk = (function () {
|
|
770
798
|
padding: 12px 20px;
|
771
799
|
}
|
772
800
|
|
773
|
-
.
|
801
|
+
.reject {
|
774
802
|
font-size: 14px;
|
775
803
|
line-height: 20px;
|
776
804
|
color: var(--secondary);
|
package/index.mjs
CHANGED
@@ -46,6 +46,7 @@ const customAttributes = {
|
|
46
46
|
type: 'text',
|
47
47
|
defaultValue: "Hey! Your cart has expired!<br>But we've got you covered! \u{1F609}",
|
48
48
|
},
|
49
|
+
title: { type: 'text', defaultValue: '' },
|
49
50
|
inputLabel: { type: 'text', defaultValue: 'Enter your email ID' },
|
50
51
|
restoreLabel: { type: 'text', defaultValue: 'Restore Cart' },
|
51
52
|
rejectionLabel: {
|
@@ -429,6 +430,7 @@ let BlotoutWallet = class BlotoutWallet extends s {
|
|
429
430
|
this.hasEmail = false;
|
430
431
|
this.lastExpiredCart = undefined;
|
431
432
|
this.state = 'ready';
|
433
|
+
this.isStylesheetInjected = false;
|
432
434
|
this.transitionTo = (newState) => {
|
433
435
|
return flipOut(this.dialog)
|
434
436
|
.then(() => (this.state = newState))
|
@@ -518,16 +520,23 @@ let BlotoutWallet = class BlotoutWallet extends s {
|
|
518
520
|
ev.stopPropagation();
|
519
521
|
};
|
520
522
|
this.expiredCartContent = () => {
|
521
|
-
var _a, _b, _c, _d;
|
522
|
-
return x
|
523
|
-
|
524
|
-
|
525
|
-
|
523
|
+
var _a, _b, _c, _d, _e;
|
524
|
+
return x `<form
|
525
|
+
class="restore-form"
|
526
|
+
method="dialog"
|
527
|
+
@submit=${this.onSubmit}
|
528
|
+
>
|
529
|
+
${((_a = this.theme) === null || _a === void 0 ? void 0 : _a.title)
|
530
|
+
? x `<h1 class="title">${this.theme.title}</h1>`
|
531
|
+
: T}
|
532
|
+
<div class="text">
|
533
|
+
${formatString(((_b = this.theme) === null || _b === void 0 ? void 0 : _b.text) || customAttributes.text.defaultValue)}
|
526
534
|
</div>
|
527
535
|
<input
|
528
536
|
type="email"
|
529
537
|
name="email"
|
530
|
-
|
538
|
+
class="email"
|
539
|
+
placeholder=${((_c = this.theme) === null || _c === void 0 ? void 0 : _c.inputLabel) ||
|
531
540
|
customAttributes.inputLabel.defaultValue}
|
532
541
|
?required=${!this.hasEmail}
|
533
542
|
style=${o$1({
|
@@ -535,15 +544,14 @@ let BlotoutWallet = class BlotoutWallet extends s {
|
|
535
544
|
})}
|
536
545
|
/>
|
537
546
|
<button class="restore" type="submit">
|
538
|
-
${((
|
547
|
+
${((_d = this.theme) === null || _d === void 0 ? void 0 : _d.restoreLabel) ||
|
539
548
|
customAttributes.restoreLabel.defaultValue}
|
540
549
|
</button>
|
541
550
|
</form>
|
542
|
-
<button class="
|
543
|
-
${((
|
551
|
+
<button class="reject" type="button" @click=${this.skipCarts}>
|
552
|
+
${((_e = this.theme) === null || _e === void 0 ? void 0 : _e.rejectionLabel) ||
|
544
553
|
customAttributes.rejectionLabel.defaultValue}
|
545
|
-
</button>
|
546
|
-
`;
|
554
|
+
</button> `;
|
547
555
|
};
|
548
556
|
this.loadingContent = () => {
|
549
557
|
return x `
|
@@ -564,7 +572,7 @@ let BlotoutWallet = class BlotoutWallet extends s {
|
|
564
572
|
<form method="dialog" @submit=${this.onSubmit}>
|
565
573
|
<button class="restore" type="submit">Try Again</button>
|
566
574
|
</form>
|
567
|
-
<button class="
|
575
|
+
<button class="reject" @click=${this.skipCarts}>Dismiss</button>
|
568
576
|
`;
|
569
577
|
};
|
570
578
|
}
|
@@ -584,7 +592,14 @@ let BlotoutWallet = class BlotoutWallet extends s {
|
|
584
592
|
}).catch(logger.error);
|
585
593
|
}
|
586
594
|
connectedCallback() {
|
595
|
+
var _a;
|
587
596
|
super.connectedCallback();
|
597
|
+
if (!this.isStylesheetInjected && ((_a = this.theme) === null || _a === void 0 ? void 0 : _a.css)) {
|
598
|
+
const sheet = new CSSStyleSheet();
|
599
|
+
sheet.replaceSync(this.theme.css);
|
600
|
+
this.shadowRoot.adoptedStyleSheets.push(sheet);
|
601
|
+
this.isStylesheetInjected = true;
|
602
|
+
}
|
588
603
|
if (!this.userId) {
|
589
604
|
logger.error('No UserId set');
|
590
605
|
return;
|
@@ -661,7 +676,7 @@ let BlotoutWallet = class BlotoutWallet extends s {
|
|
661
676
|
if (this.isPopUpDismissed) {
|
662
677
|
return T;
|
663
678
|
}
|
664
|
-
return x ` <dialog @click=${this.onDialogClick}>
|
679
|
+
return x ` <dialog class="popup" @click=${this.onDialogClick}>
|
665
680
|
<div @click=${this.onWrapperClick}>
|
666
681
|
<div
|
667
682
|
class="centered"
|
@@ -717,7 +732,7 @@ BlotoutWallet.styles = [
|
|
717
732
|
cursor: pointer;
|
718
733
|
}
|
719
734
|
|
720
|
-
|
735
|
+
.popup {
|
721
736
|
width: 430px;
|
722
737
|
max-width: 100vw;
|
723
738
|
color: var(--primary);
|
@@ -728,19 +743,32 @@ BlotoutWallet.styles = [
|
|
728
743
|
text-align: center;
|
729
744
|
}
|
730
745
|
|
731
|
-
|
746
|
+
.popup::backdrop {
|
732
747
|
background: var(--backdrop);
|
733
748
|
backdrop-filter: blur(4px);
|
734
749
|
}
|
735
750
|
|
736
|
-
|
751
|
+
.restore-form {
|
737
752
|
display: flex;
|
738
753
|
flex-direction: column;
|
739
754
|
gap: 16px;
|
740
755
|
width: 100%;
|
741
756
|
}
|
742
757
|
|
743
|
-
|
758
|
+
.title {
|
759
|
+
margin: 0;
|
760
|
+
padding: 0;
|
761
|
+
font-size: 20px;
|
762
|
+
font-weight: bold;
|
763
|
+
line-height: 30px;
|
764
|
+
}
|
765
|
+
|
766
|
+
.text {
|
767
|
+
margin: 0;
|
768
|
+
padding: 0;
|
769
|
+
}
|
770
|
+
|
771
|
+
.email {
|
744
772
|
width: 100%;
|
745
773
|
border: 1px solid var(--input-border);
|
746
774
|
color: var(--input-foreground);
|
@@ -749,12 +777,12 @@ BlotoutWallet.styles = [
|
|
749
777
|
border-radius: 5px;
|
750
778
|
}
|
751
779
|
|
752
|
-
|
780
|
+
.email::placeholder {
|
753
781
|
color: var(--input-foreground);
|
754
782
|
color: color(from var(--input-foreground) srgb r g b / 0.7);
|
755
783
|
}
|
756
784
|
|
757
|
-
:is(
|
785
|
+
:is(.email, button):focus-visible {
|
758
786
|
outline-color: var(--primary);
|
759
787
|
}
|
760
788
|
|
@@ -767,7 +795,7 @@ BlotoutWallet.styles = [
|
|
767
795
|
padding: 12px 20px;
|
768
796
|
}
|
769
797
|
|
770
|
-
.
|
798
|
+
.reject {
|
771
799
|
font-size: 14px;
|
772
800
|
line-height: 20px;
|
773
801
|
color: var(--secondary);
|