@saasquatch/mint-components 2.1.9-11 → 2.1.9-13
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/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/mint-components.cjs.js +1 -1
- package/dist/cjs/sqm-big-stat_46.cjs.entry.js +33 -20
- package/dist/cjs/sqm-email-verification_2.cjs.entry.js +7 -11
- package/dist/cjs/{sqm-partner-info-modal-view-98e2975d.js → sqm-partner-info-modal-view-2d6e89a4.js} +24 -21
- package/dist/cjs/sqm-stencilbook.cjs.entry.js +1 -1
- package/dist/collection/components/sqm-partner-info-modal/sqm-partner-info-modal-view.js +23 -20
- package/dist/collection/components/sqm-partner-info-modal/sqm-partner-info-modal.js +9 -14
- package/dist/collection/components/sqm-partner-info-modal/usePartnerInfoModal.js +1 -0
- package/dist/collection/components/sqm-widget-verification/sqm-widget-verification.js +42 -15
- package/dist/esm/loader.js +1 -1
- package/dist/esm/mint-components.js +1 -1
- package/dist/esm/sqm-big-stat_46.entry.js +29 -16
- package/dist/esm/sqm-email-verification_2.entry.js +7 -11
- package/dist/esm/{sqm-partner-info-modal-view-74328f70.js → sqm-partner-info-modal-view-f85b5a08.js} +24 -21
- package/dist/esm/sqm-stencilbook.entry.js +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/mint-components.js +1 -1
- package/dist/esm-es5/sqm-big-stat_46.entry.js +1 -1
- package/dist/esm-es5/sqm-email-verification_2.entry.js +1 -1
- package/dist/esm-es5/sqm-partner-info-modal-view-f85b5a08.js +1 -0
- package/dist/esm-es5/sqm-stencilbook.entry.js +1 -1
- package/dist/mint-components/mint-components.esm.js +1 -1
- package/dist/mint-components/p-05fb44b6.system.entry.js +1 -0
- package/dist/mint-components/p-1c413a06.system.js +1 -1
- package/dist/mint-components/{p-8d5db0d5.entry.js → p-44071410.entry.js} +9 -8
- package/dist/mint-components/{p-fa3d7e53.entry.js → p-526332c3.entry.js} +15 -15
- package/dist/mint-components/p-5a71d63c.js +1 -0
- package/dist/mint-components/{p-0a60980a.system.entry.js → p-65e4ba6f.system.entry.js} +1 -1
- package/dist/mint-components/p-67792584.system.js +1 -0
- package/dist/mint-components/p-bb86bb46.system.entry.js +1 -0
- package/dist/mint-components/{p-0a1669f8.entry.js → p-d111584d.entry.js} +1 -1
- package/dist/types/components/sqm-partner-info-modal/sqm-partner-info-modal-view.d.ts +1 -1
- package/dist/types/components/sqm-partner-info-modal/sqm-partner-info-modal.d.ts +2 -3
- package/dist/types/components/sqm-widget-verification/sqm-widget-verification.d.ts +5 -0
- package/dist/types/components.d.ts +14 -4
- package/docs/docs.docx +0 -0
- package/docs/raisins.json +1 -1
- package/grapesjs/grapesjs.js +1 -1
- package/package.json +1 -1
- package/dist/cjs/parseStates-d1effc19.js +0 -16
- package/dist/cjs/sqm-widget-verification.cjs.entry.js +0 -360
- package/dist/esm/parseStates-ed75e224.js +0 -14
- package/dist/esm/sqm-widget-verification.entry.js +0 -356
- package/dist/esm-es5/parseStates-ed75e224.js +0 -1
- package/dist/esm-es5/sqm-partner-info-modal-view-74328f70.js +0 -1
- package/dist/esm-es5/sqm-widget-verification.entry.js +0 -1
- package/dist/mint-components/p-115dfc03.system.js +0 -1
- package/dist/mint-components/p-13f3a647.js +0 -1
- package/dist/mint-components/p-278897bd.system.entry.js +0 -1
- package/dist/mint-components/p-53f22cc0.system.entry.js +0 -1
- package/dist/mint-components/p-99b17bca.system.js +0 -1
- package/dist/mint-components/p-c68c2331.js +0 -1
- package/dist/mint-components/sqm-widget-verification.entry.js +0 -356
- package/dist/mint-components/sqm-widget-verification.system.entry.js +0 -1
|
@@ -10,10 +10,9 @@ const cjs = require('./cjs-1066ec21.js');
|
|
|
10
10
|
const utils = require('./utils-6847bc06.js');
|
|
11
11
|
const JSS = require('./JSS-8503a151.js');
|
|
12
12
|
const sqmTextSpanView = require('./sqm-text-span-view-f274fdf2.js');
|
|
13
|
-
const sqmPartnerInfoModalView = require('./sqm-partner-info-modal-view-
|
|
13
|
+
const sqmPartnerInfoModalView = require('./sqm-partner-info-modal-view-2d6e89a4.js');
|
|
14
14
|
const keys = require('./keys-cff24974.js');
|
|
15
15
|
const eventKeys = require('./eventKeys-7af4df4d.js');
|
|
16
|
-
const parseStates = require('./parseStates-d1effc19.js');
|
|
17
16
|
const useVerificationEmail = require('./useVerificationEmail-994bc32f.js');
|
|
18
17
|
|
|
19
18
|
const UpsertUserEmailMutation = index_module.dist.gql `
|
|
@@ -431,6 +430,7 @@ const GET_USER_PARTNER_INFO = index_module.dist.gql `
|
|
|
431
430
|
impactConnection {
|
|
432
431
|
connected
|
|
433
432
|
publisher {
|
|
433
|
+
id
|
|
434
434
|
phoneNumber
|
|
435
435
|
phoneNumberCountryCode
|
|
436
436
|
countryCode
|
|
@@ -723,11 +723,10 @@ const PartnerInfoModal = class {
|
|
|
723
723
|
*/
|
|
724
724
|
this.missingFieldsErrorText = "Please select both a country and currency.";
|
|
725
725
|
/**
|
|
726
|
-
*
|
|
727
|
-
* Used when embedded inside another dialog (e.g. sqm-widget-verification).
|
|
726
|
+
* Used to render in another modal.
|
|
728
727
|
* @undocumented
|
|
729
728
|
*/
|
|
730
|
-
this.
|
|
729
|
+
this.inModal = false;
|
|
731
730
|
/**
|
|
732
731
|
* @undocumented
|
|
733
732
|
* @componentState { "title": "New partner", "props": { "states": { "open": true, "isExistingPartner": false } } }
|
|
@@ -742,12 +741,11 @@ const PartnerInfoModal = class {
|
|
|
742
741
|
return utils.getProps(this);
|
|
743
742
|
}
|
|
744
743
|
render() {
|
|
745
|
-
// AL: TODO add usePartnerInfoModal
|
|
746
744
|
const props = index_module.isDemo()
|
|
747
745
|
? useDemoPartnerInfoModal(this)
|
|
748
746
|
: usePartnerInfoModal(this);
|
|
749
|
-
if (this.
|
|
750
|
-
return index.h(sqmPartnerInfoModalView.
|
|
747
|
+
if (this.inModal) {
|
|
748
|
+
return index.h(sqmPartnerInfoModalView.PartnerInfoModalContentView, Object.assign({}, props));
|
|
751
749
|
}
|
|
752
750
|
return index.h(sqmPartnerInfoModalView.PartnerInfoModalView, Object.assign({}, props));
|
|
753
751
|
}
|
|
@@ -756,8 +754,6 @@ function useDemoPartnerInfoModal(props) {
|
|
|
756
754
|
const [countryCode, setCountryCode] = domContextHooks_module.useState("US");
|
|
757
755
|
const [currency, setCurrency] = domContextHooks_module.useState("");
|
|
758
756
|
const [error, setError] = domContextHooks_module.useState("");
|
|
759
|
-
const parsed = parseStates.parseStates(props.stateController);
|
|
760
|
-
const stateOverride = (parsed === null || parsed === void 0 ? void 0 : parsed["sqm-partner-info-modal"]) || parsed || {};
|
|
761
757
|
// @ts-ignore
|
|
762
758
|
return cjs.cjs({
|
|
763
759
|
states: {
|
|
@@ -812,7 +808,7 @@ function useDemoPartnerInfoModal(props) {
|
|
|
812
808
|
supportDescriptionExistingPartner: props.supportDescriptionExistingPartner,
|
|
813
809
|
modalHeaderExistingPartner: props.modalHeaderExistingPartner,
|
|
814
810
|
},
|
|
815
|
-
}, props.demoData ||
|
|
811
|
+
}, props.demoData || props.stateController || {}, { arrayMerge: (_, a) => a });
|
|
816
812
|
}
|
|
817
813
|
|
|
818
814
|
exports.sqm_email_verification = WidgetEmailVerification;
|
package/dist/cjs/{sqm-partner-info-modal-view-98e2975d.js → sqm-partner-info-modal-view-2d6e89a4.js}
RENAMED
|
@@ -8,11 +8,6 @@ const style = {
|
|
|
8
8
|
"&::part(panel)": {
|
|
9
9
|
maxWidth: "480px",
|
|
10
10
|
},
|
|
11
|
-
"&::part(title)": {
|
|
12
|
-
fontSize: "var(--sl-font-size-x-large)",
|
|
13
|
-
fontWeight: "600",
|
|
14
|
-
padding: "var(--sl-spacing-x-large) var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
|
|
15
|
-
},
|
|
16
11
|
"&::part(body)": {
|
|
17
12
|
padding: "0 var(--sl-spacing-x-large)",
|
|
18
13
|
fontSize: "var(--sl-font-size-small)",
|
|
@@ -21,14 +16,17 @@ const style = {
|
|
|
21
16
|
"&::part(footer)": {
|
|
22
17
|
display: "flex",
|
|
23
18
|
flexDirection: "column",
|
|
24
|
-
|
|
19
|
+
padding: "0 var(--sl-spacing-large) var(--sl-spacing-large) var(--sl-spacing-large)",
|
|
25
20
|
},
|
|
26
21
|
"&::part(overlay)": {
|
|
27
22
|
background: "rgba(0, 0, 0, 0.5)",
|
|
28
23
|
},
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
24
|
+
},
|
|
25
|
+
DialogTitle: {
|
|
26
|
+
fontSize: "var(--sl-font-size-x-large)",
|
|
27
|
+
fontWeight: "600",
|
|
28
|
+
padding: "var(--sl-spacing-x-large) 0 0 0",
|
|
29
|
+
margin: "0",
|
|
32
30
|
},
|
|
33
31
|
FormFields: {
|
|
34
32
|
display: "flex",
|
|
@@ -55,22 +53,24 @@ const style = {
|
|
|
55
53
|
display: "flex",
|
|
56
54
|
flexDirection: "column",
|
|
57
55
|
gap: "var(--sl-spacing-medium)",
|
|
58
|
-
|
|
56
|
+
margin: "0",
|
|
59
57
|
"& > p": {
|
|
60
58
|
margin: "0",
|
|
61
59
|
},
|
|
62
60
|
},
|
|
61
|
+
SubmitButton: {
|
|
62
|
+
width: "100%",
|
|
63
|
+
marginTop: "var(--sl-spacing-small)",
|
|
64
|
+
},
|
|
63
65
|
};
|
|
64
|
-
function
|
|
66
|
+
function PartnerInfoModalContentView(props) {
|
|
65
67
|
var _a, _b;
|
|
66
68
|
const { states, callbacks, text } = props;
|
|
67
69
|
const sheet = JSS.createStyleSheet(style);
|
|
68
70
|
const styleString = sheet.toString();
|
|
69
|
-
const description = states.isExistingPartner ? (index.h("
|
|
71
|
+
const description = states.isExistingPartner ? (index.h("span", { class: sheet.classes.DescriptionContainer },
|
|
70
72
|
index.h("p", null, text.descriptionExistingPartner),
|
|
71
|
-
index.h("p", null, text.supportDescriptionExistingPartner))) : (index.h("p",
|
|
72
|
-
" ",
|
|
73
|
-
text.descriptionNewPartner));
|
|
73
|
+
index.h("p", null, text.supportDescriptionExistingPartner))) : (index.h("p", { class: sheet.classes.DescriptionContainer }, text.descriptionNewPartner));
|
|
74
74
|
const buttonLabel = states.isExistingPartner
|
|
75
75
|
? text.confirmButtonLabel
|
|
76
76
|
: text.submitButtonLabel;
|
|
@@ -78,17 +78,17 @@ function PartnerInfoModalContent(props) {
|
|
|
78
78
|
index.h("style", { type: "text/css" }, styleString),
|
|
79
79
|
description,
|
|
80
80
|
index.h("div", { class: sheet.classes.FormFields },
|
|
81
|
-
index.h("sl-select", { key: `country-${states.countryCode}`, exportparts: "label: input-label, base: input-base", label: text.countryLabel, value: states.countryCode, disabled: states.submitting || !!states.isExistingPartner, required: true, "onSl-select": callbacks.onCountryChange },
|
|
81
|
+
index.h("sl-select", { key: `country-${states.countryCode}`, exportparts: "label: input-label, base: input-base", label: text.countryLabel, value: states.countryCode, disabled: states.submitting || !!states.isExistingPartner, required: true, hoist: true, "onSl-select": callbacks.onCountryChange },
|
|
82
82
|
index.h("sl-input", { class: sheet.classes.SearchInput, placeholder: text.searchCountryPlaceholder, onKeyDown: (e) => e.stopPropagation(), "onSl-input": (e) => {
|
|
83
83
|
var _a;
|
|
84
84
|
callbacks.setCountrySearch((_a = e.target) === null || _a === void 0 ? void 0 : _a.value);
|
|
85
85
|
} }), (_a = states.filteredCountries) === null || _a === void 0 ? void 0 :
|
|
86
86
|
_a.map((c) => (index.h("sl-menu-item", { value: c.countryCode }, c.displayName)))),
|
|
87
|
-
index.h("sl-select", { key: `currency-${states.currency}`, exportparts: "label: input-label, base: input-base", label: text.currencyLabel, value: states.currency, disabled: states.submitting || !!states.isExistingPartner, required: true, "onSl-select": callbacks.onCurrencyChange },
|
|
87
|
+
index.h("sl-select", { key: `currency-${states.currency}`, exportparts: "label: input-label, base: input-base", label: text.currencyLabel, value: states.currency, disabled: states.submitting || !!states.isExistingPartner, required: true, hoist: true, "onSl-select": callbacks.onCurrencyChange },
|
|
88
88
|
index.h("sl-input", { class: sheet.classes.SearchInput, placeholder: text.searchCurrencyPlaceholder, onKeyDown: (e) => e.stopPropagation(), "onSl-input": (e) => { var _a; return callbacks.setCurrencySearch((_a = e.target) === null || _a === void 0 ? void 0 : _a.value); } }), (_b = states.filteredCurrencies) === null || _b === void 0 ? void 0 :
|
|
89
89
|
_b.map((c) => (index.h("sl-menu-item", { value: c.currencyCode }, c.currencyCode))))),
|
|
90
90
|
states.error && index.h("p", { class: sheet.classes.ErrorMessage }, states.error),
|
|
91
|
-
index.h("sl-button", { slot: "footer", type: "primary", loading: states.submitting, disabled: states.submitting || !states.countryCode || !states.currency, onClick: callbacks.onSubmit,
|
|
91
|
+
index.h("sl-button", { slot: "footer", type: "primary", loading: states.submitting, disabled: states.submitting || !states.countryCode || !states.currency, onClick: callbacks.onSubmit, class: sheet.classes.SubmitButton, exportparts: "base: primarybutton-base" }, buttonLabel),
|
|
92
92
|
];
|
|
93
93
|
}
|
|
94
94
|
function PartnerInfoModalView(props) {
|
|
@@ -97,7 +97,7 @@ function PartnerInfoModalView(props) {
|
|
|
97
97
|
console.log(states, "partner info modal states"); // TEMP
|
|
98
98
|
if (!states.open)
|
|
99
99
|
return index.h("div", null);
|
|
100
|
-
return (index.h("sl-dialog", { class: sheet.classes.Dialog, open: states.open, noHeader:
|
|
100
|
+
return (index.h("sl-dialog", { class: sheet.classes.Dialog, open: states.open, noHeader: true, label: states.isExistingPartner
|
|
101
101
|
? text.modalHeaderExistingPartner
|
|
102
102
|
: text.modalHeader, "onSl-request-close": (e) => {
|
|
103
103
|
e.preventDefault();
|
|
@@ -107,8 +107,11 @@ function PartnerInfoModalView(props) {
|
|
|
107
107
|
e.preventDefault();
|
|
108
108
|
}
|
|
109
109
|
} },
|
|
110
|
-
index.h(
|
|
110
|
+
index.h("h2", { class: sheet.classes.DialogTitle }, states.isExistingPartner
|
|
111
|
+
? text.modalHeaderExistingPartner
|
|
112
|
+
: text.modalHeader),
|
|
113
|
+
index.h(PartnerInfoModalContentView, Object.assign({}, props))));
|
|
111
114
|
}
|
|
112
115
|
|
|
113
|
-
exports.
|
|
116
|
+
exports.PartnerInfoModalContentView = PartnerInfoModalContentView;
|
|
114
117
|
exports.PartnerInfoModalView = PartnerInfoModalView;
|
|
@@ -38,7 +38,7 @@ const sqmPortalContainerView = require('./sqm-portal-container-view-70a47420.js'
|
|
|
38
38
|
const sqmUserInfoFormView = require('./sqm-user-info-form-view-923ff8d9.js');
|
|
39
39
|
const data = require('./data-e83f8a41.js');
|
|
40
40
|
const sqmLeadInputFieldView = require('./sqm-lead-input-field-view-818d9e9a.js');
|
|
41
|
-
const sqmPartnerInfoModalView = require('./sqm-partner-info-modal-view-
|
|
41
|
+
const sqmPartnerInfoModalView = require('./sqm-partner-info-modal-view-2d6e89a4.js');
|
|
42
42
|
|
|
43
43
|
/**
|
|
44
44
|
* lodash (Custom Build) <https://lodash.com/>
|
|
@@ -5,11 +5,6 @@ const style = {
|
|
|
5
5
|
"&::part(panel)": {
|
|
6
6
|
maxWidth: "480px",
|
|
7
7
|
},
|
|
8
|
-
"&::part(title)": {
|
|
9
|
-
fontSize: "var(--sl-font-size-x-large)",
|
|
10
|
-
fontWeight: "600",
|
|
11
|
-
padding: "var(--sl-spacing-x-large) var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
|
|
12
|
-
},
|
|
13
8
|
"&::part(body)": {
|
|
14
9
|
padding: "0 var(--sl-spacing-x-large)",
|
|
15
10
|
fontSize: "var(--sl-font-size-small)",
|
|
@@ -18,14 +13,17 @@ const style = {
|
|
|
18
13
|
"&::part(footer)": {
|
|
19
14
|
display: "flex",
|
|
20
15
|
flexDirection: "column",
|
|
21
|
-
|
|
16
|
+
padding: "0 var(--sl-spacing-large) var(--sl-spacing-large) var(--sl-spacing-large)",
|
|
22
17
|
},
|
|
23
18
|
"&::part(overlay)": {
|
|
24
19
|
background: "rgba(0, 0, 0, 0.5)",
|
|
25
20
|
},
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
21
|
+
},
|
|
22
|
+
DialogTitle: {
|
|
23
|
+
fontSize: "var(--sl-font-size-x-large)",
|
|
24
|
+
fontWeight: "600",
|
|
25
|
+
padding: "var(--sl-spacing-x-large) 0 0 0",
|
|
26
|
+
margin: "0",
|
|
29
27
|
},
|
|
30
28
|
FormFields: {
|
|
31
29
|
display: "flex",
|
|
@@ -52,22 +50,24 @@ const style = {
|
|
|
52
50
|
display: "flex",
|
|
53
51
|
flexDirection: "column",
|
|
54
52
|
gap: "var(--sl-spacing-medium)",
|
|
55
|
-
|
|
53
|
+
margin: "0",
|
|
56
54
|
"& > p": {
|
|
57
55
|
margin: "0",
|
|
58
56
|
},
|
|
59
57
|
},
|
|
58
|
+
SubmitButton: {
|
|
59
|
+
width: "100%",
|
|
60
|
+
marginTop: "var(--sl-spacing-small)",
|
|
61
|
+
},
|
|
60
62
|
};
|
|
61
|
-
export function
|
|
63
|
+
export function PartnerInfoModalContentView(props) {
|
|
62
64
|
var _a, _b;
|
|
63
65
|
const { states, callbacks, text } = props;
|
|
64
66
|
const sheet = createStyleSheet(style);
|
|
65
67
|
const styleString = sheet.toString();
|
|
66
|
-
const description = states.isExistingPartner ? (h("
|
|
68
|
+
const description = states.isExistingPartner ? (h("span", { class: sheet.classes.DescriptionContainer },
|
|
67
69
|
h("p", null, text.descriptionExistingPartner),
|
|
68
|
-
h("p", null, text.supportDescriptionExistingPartner))) : (h("p",
|
|
69
|
-
" ",
|
|
70
|
-
text.descriptionNewPartner));
|
|
70
|
+
h("p", null, text.supportDescriptionExistingPartner))) : (h("p", { class: sheet.classes.DescriptionContainer }, text.descriptionNewPartner));
|
|
71
71
|
const buttonLabel = states.isExistingPartner
|
|
72
72
|
? text.confirmButtonLabel
|
|
73
73
|
: text.submitButtonLabel;
|
|
@@ -75,17 +75,17 @@ export function PartnerInfoModalContent(props) {
|
|
|
75
75
|
h("style", { type: "text/css" }, styleString),
|
|
76
76
|
description,
|
|
77
77
|
h("div", { class: sheet.classes.FormFields },
|
|
78
|
-
h("sl-select", { key: `country-${states.countryCode}`, exportparts: "label: input-label, base: input-base", label: text.countryLabel, value: states.countryCode, disabled: states.submitting || !!states.isExistingPartner, required: true, "onSl-select": callbacks.onCountryChange },
|
|
78
|
+
h("sl-select", { key: `country-${states.countryCode}`, exportparts: "label: input-label, base: input-base", label: text.countryLabel, value: states.countryCode, disabled: states.submitting || !!states.isExistingPartner, required: true, hoist: true, "onSl-select": callbacks.onCountryChange },
|
|
79
79
|
h("sl-input", { class: sheet.classes.SearchInput, placeholder: text.searchCountryPlaceholder, onKeyDown: (e) => e.stopPropagation(), "onSl-input": (e) => {
|
|
80
80
|
var _a;
|
|
81
81
|
callbacks.setCountrySearch((_a = e.target) === null || _a === void 0 ? void 0 : _a.value);
|
|
82
82
|
} }), (_a = states.filteredCountries) === null || _a === void 0 ? void 0 :
|
|
83
83
|
_a.map((c) => (h("sl-menu-item", { value: c.countryCode }, c.displayName)))),
|
|
84
|
-
h("sl-select", { key: `currency-${states.currency}`, exportparts: "label: input-label, base: input-base", label: text.currencyLabel, value: states.currency, disabled: states.submitting || !!states.isExistingPartner, required: true, "onSl-select": callbacks.onCurrencyChange },
|
|
84
|
+
h("sl-select", { key: `currency-${states.currency}`, exportparts: "label: input-label, base: input-base", label: text.currencyLabel, value: states.currency, disabled: states.submitting || !!states.isExistingPartner, required: true, hoist: true, "onSl-select": callbacks.onCurrencyChange },
|
|
85
85
|
h("sl-input", { class: sheet.classes.SearchInput, placeholder: text.searchCurrencyPlaceholder, onKeyDown: (e) => e.stopPropagation(), "onSl-input": (e) => { var _a; return callbacks.setCurrencySearch((_a = e.target) === null || _a === void 0 ? void 0 : _a.value); } }), (_b = states.filteredCurrencies) === null || _b === void 0 ? void 0 :
|
|
86
86
|
_b.map((c) => (h("sl-menu-item", { value: c.currencyCode }, c.currencyCode))))),
|
|
87
87
|
states.error && h("p", { class: sheet.classes.ErrorMessage }, states.error),
|
|
88
|
-
h("sl-button", { slot: "footer", type: "primary", loading: states.submitting, disabled: states.submitting || !states.countryCode || !states.currency, onClick: callbacks.onSubmit,
|
|
88
|
+
h("sl-button", { slot: "footer", type: "primary", loading: states.submitting, disabled: states.submitting || !states.countryCode || !states.currency, onClick: callbacks.onSubmit, class: sheet.classes.SubmitButton, exportparts: "base: primarybutton-base" }, buttonLabel),
|
|
89
89
|
];
|
|
90
90
|
}
|
|
91
91
|
export function PartnerInfoModalView(props) {
|
|
@@ -94,7 +94,7 @@ export function PartnerInfoModalView(props) {
|
|
|
94
94
|
console.log(states, "partner info modal states"); // TEMP
|
|
95
95
|
if (!states.open)
|
|
96
96
|
return h("div", null);
|
|
97
|
-
return (h("sl-dialog", { class: sheet.classes.Dialog, open: states.open, noHeader:
|
|
97
|
+
return (h("sl-dialog", { class: sheet.classes.Dialog, open: states.open, noHeader: true, label: states.isExistingPartner
|
|
98
98
|
? text.modalHeaderExistingPartner
|
|
99
99
|
: text.modalHeader, "onSl-request-close": (e) => {
|
|
100
100
|
e.preventDefault();
|
|
@@ -104,5 +104,8 @@ export function PartnerInfoModalView(props) {
|
|
|
104
104
|
e.preventDefault();
|
|
105
105
|
}
|
|
106
106
|
} },
|
|
107
|
-
h(
|
|
107
|
+
h("h2", { class: sheet.classes.DialogTitle }, states.isExistingPartner
|
|
108
|
+
? text.modalHeaderExistingPartner
|
|
109
|
+
: text.modalHeader),
|
|
110
|
+
h(PartnerInfoModalContentView, Object.assign({}, props))));
|
|
108
111
|
}
|
|
@@ -2,9 +2,8 @@ import { isDemo } from "@saasquatch/component-boilerplate";
|
|
|
2
2
|
import { useState, withHooks } from "@saasquatch/stencil-hooks";
|
|
3
3
|
import { Component, Prop, h } from "@stencil/core";
|
|
4
4
|
import deepmerge from "deepmerge";
|
|
5
|
-
import { parseStates } from "../../utils/parseStates";
|
|
6
5
|
import { getProps } from "../../utils/utils";
|
|
7
|
-
import {
|
|
6
|
+
import { PartnerInfoModalContentView, PartnerInfoModalView, } from "./sqm-partner-info-modal-view";
|
|
8
7
|
import { usePartnerInfoModal, } from "./usePartnerInfoModal";
|
|
9
8
|
/**
|
|
10
9
|
* @uiName Partner Info Modal
|
|
@@ -90,11 +89,10 @@ export class PartnerInfoModal {
|
|
|
90
89
|
*/
|
|
91
90
|
this.missingFieldsErrorText = "Please select both a country and currency.";
|
|
92
91
|
/**
|
|
93
|
-
*
|
|
94
|
-
* Used when embedded inside another dialog (e.g. sqm-widget-verification).
|
|
92
|
+
* Used to render in another modal.
|
|
95
93
|
* @undocumented
|
|
96
94
|
*/
|
|
97
|
-
this.
|
|
95
|
+
this.inModal = false;
|
|
98
96
|
/**
|
|
99
97
|
* @undocumented
|
|
100
98
|
* @componentState { "title": "New partner", "props": { "states": { "open": true, "isExistingPartner": false } } }
|
|
@@ -109,12 +107,11 @@ export class PartnerInfoModal {
|
|
|
109
107
|
return getProps(this);
|
|
110
108
|
}
|
|
111
109
|
render() {
|
|
112
|
-
// AL: TODO add usePartnerInfoModal
|
|
113
110
|
const props = isDemo()
|
|
114
111
|
? useDemoPartnerInfoModal(this)
|
|
115
112
|
: usePartnerInfoModal(this);
|
|
116
|
-
if (this.
|
|
117
|
-
return h(
|
|
113
|
+
if (this.inModal) {
|
|
114
|
+
return h(PartnerInfoModalContentView, Object.assign({}, props));
|
|
118
115
|
}
|
|
119
116
|
return h(PartnerInfoModalView, Object.assign({}, props));
|
|
120
117
|
}
|
|
@@ -436,7 +433,7 @@ export class PartnerInfoModal {
|
|
|
436
433
|
"reflect": false,
|
|
437
434
|
"defaultValue": "\"Please select both a country and currency.\""
|
|
438
435
|
},
|
|
439
|
-
"
|
|
436
|
+
"inModal": {
|
|
440
437
|
"type": "boolean",
|
|
441
438
|
"mutable": false,
|
|
442
439
|
"complexType": {
|
|
@@ -451,9 +448,9 @@ export class PartnerInfoModal {
|
|
|
451
448
|
"text": undefined,
|
|
452
449
|
"name": "undocumented"
|
|
453
450
|
}],
|
|
454
|
-
"text": "
|
|
451
|
+
"text": "Used to render in another modal."
|
|
455
452
|
},
|
|
456
|
-
"attribute": "
|
|
453
|
+
"attribute": "in-modal",
|
|
457
454
|
"reflect": false,
|
|
458
455
|
"defaultValue": "false"
|
|
459
456
|
},
|
|
@@ -523,8 +520,6 @@ function useDemoPartnerInfoModal(props) {
|
|
|
523
520
|
const [countryCode, setCountryCode] = useState("US");
|
|
524
521
|
const [currency, setCurrency] = useState("");
|
|
525
522
|
const [error, setError] = useState("");
|
|
526
|
-
const parsed = parseStates(props.stateController);
|
|
527
|
-
const stateOverride = (parsed === null || parsed === void 0 ? void 0 : parsed["sqm-partner-info-modal"]) || parsed || {};
|
|
528
523
|
// @ts-ignore
|
|
529
524
|
return deepmerge({
|
|
530
525
|
states: {
|
|
@@ -579,5 +574,5 @@ function useDemoPartnerInfoModal(props) {
|
|
|
579
574
|
supportDescriptionExistingPartner: props.supportDescriptionExistingPartner,
|
|
580
575
|
modalHeaderExistingPartner: props.modalHeaderExistingPartner,
|
|
581
576
|
},
|
|
582
|
-
}, props.demoData ||
|
|
577
|
+
}, props.demoData || props.stateController || {}, { arrayMerge: (_, a) => a });
|
|
583
578
|
}
|
|
@@ -19,6 +19,11 @@ export class WidgetVerification {
|
|
|
19
19
|
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
|
20
20
|
GENERAL PROPS
|
|
21
21
|
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
|
|
22
|
+
/**
|
|
23
|
+
* @uiName General widget header text with partner creation
|
|
24
|
+
* @uiGroup General Text
|
|
25
|
+
*/
|
|
26
|
+
this.general_widgetHeaderWithPartnerCreation = "Let's get you ready for rewards";
|
|
22
27
|
/**
|
|
23
28
|
* @uiName General verify widget header text
|
|
24
29
|
* @uiGroup General Text
|
|
@@ -210,11 +215,6 @@ export class WidgetVerification {
|
|
|
210
215
|
"&::part(panel)": {
|
|
211
216
|
maxWidth: "480px",
|
|
212
217
|
},
|
|
213
|
-
"&::part(title)": {
|
|
214
|
-
fontSize: "var(--sl-font-size-x-large)",
|
|
215
|
-
fontWeight: "600",
|
|
216
|
-
padding: "var(--sl-spacing-x-large) var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
|
|
217
|
-
},
|
|
218
218
|
"&::part(body)": {
|
|
219
219
|
padding: "0 var(--sl-spacing-x-large)",
|
|
220
220
|
fontSize: "var(--sl-font-size-small)",
|
|
@@ -228,21 +228,22 @@ export class WidgetVerification {
|
|
|
228
228
|
"&::part(overlay)": {
|
|
229
229
|
background: "rgba(0, 0, 0, 0.5)",
|
|
230
230
|
},
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
231
|
+
},
|
|
232
|
+
DialogTitle: {
|
|
233
|
+
fontSize: "var(--sl-font-size-x-large)",
|
|
234
|
+
fontWeight: "600",
|
|
235
|
+
padding: "var(--sl-spacing-x-large) 0 0 0",
|
|
236
|
+
margin: "0",
|
|
234
237
|
},
|
|
235
238
|
};
|
|
236
239
|
const sheet = createStyleSheet(style);
|
|
237
240
|
const styleString = sheet.toString();
|
|
238
|
-
const generalText = this.getStepTextProps("general_");
|
|
241
|
+
// const generalText = this.getStepTextProps("general_");
|
|
239
242
|
const partnerText = this.getStepTextProps("createPartnerStep_");
|
|
240
|
-
const dialogLabel =
|
|
241
|
-
? partnerText.modalHeader
|
|
242
|
-
: generalText.verifyEmailHeader;
|
|
243
|
+
const dialogLabel = this.general_widgetHeaderWithPartnerCreation;
|
|
243
244
|
const renderStepContent = () => {
|
|
244
245
|
if (props.showPartnerModal) {
|
|
245
|
-
return (h("sqm-partner-info-modal", Object.assign({
|
|
246
|
+
return (h("sqm-partner-info-modal", Object.assign({ inModal: true }, partnerText, { stateController: JSON.stringify(props["sqm-partner-info-modal_stateController"] || {}) })));
|
|
246
247
|
}
|
|
247
248
|
if (props.showCode) {
|
|
248
249
|
return (h("sqm-code-verification", Object.assign({ onVerification: props.onVerification }, this.getStepTextProps("codeStep_"), extractProps(props, "sqm-code-verification_"))));
|
|
@@ -251,18 +252,44 @@ export class WidgetVerification {
|
|
|
251
252
|
};
|
|
252
253
|
return (h("div", null,
|
|
253
254
|
h("style", { type: "text/css" }, styleString),
|
|
254
|
-
h("sl-dialog", { class: sheet.classes.Dialog, noHeader:
|
|
255
|
+
h("sl-dialog", { class: sheet.classes.Dialog, noHeader: true, open: true, label: dialogLabel, "onSl-request-close": (e) => {
|
|
255
256
|
e.preventDefault();
|
|
256
257
|
}, "onSl-hide": (e) => {
|
|
257
258
|
var _a;
|
|
258
259
|
if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.tagName) === "SL-DIALOG") {
|
|
259
260
|
e.preventDefault();
|
|
260
261
|
}
|
|
261
|
-
} },
|
|
262
|
+
} },
|
|
263
|
+
h("h2", { class: sheet.classes.DialogTitle }, dialogLabel),
|
|
264
|
+
renderStepContent())));
|
|
262
265
|
}
|
|
263
266
|
static get is() { return "sqm-widget-verification"; }
|
|
264
267
|
static get encapsulation() { return "shadow"; }
|
|
265
268
|
static get properties() { return {
|
|
269
|
+
"general_widgetHeaderWithPartnerCreation": {
|
|
270
|
+
"type": "string",
|
|
271
|
+
"mutable": false,
|
|
272
|
+
"complexType": {
|
|
273
|
+
"original": "string",
|
|
274
|
+
"resolved": "string",
|
|
275
|
+
"references": {}
|
|
276
|
+
},
|
|
277
|
+
"required": false,
|
|
278
|
+
"optional": false,
|
|
279
|
+
"docs": {
|
|
280
|
+
"tags": [{
|
|
281
|
+
"text": "General widget header text with partner creation",
|
|
282
|
+
"name": "uiName"
|
|
283
|
+
}, {
|
|
284
|
+
"text": "General Text",
|
|
285
|
+
"name": "uiGroup"
|
|
286
|
+
}],
|
|
287
|
+
"text": ""
|
|
288
|
+
},
|
|
289
|
+
"attribute": "general_widget-header-with-partner-creation",
|
|
290
|
+
"reflect": false,
|
|
291
|
+
"defaultValue": "\"Let's get you ready for rewards\""
|
|
292
|
+
},
|
|
266
293
|
"general_verifyEmailHeader": {
|
|
267
294
|
"type": "string",
|
|
268
295
|
"mutable": false,
|