@saasquatch/mint-components 1.15.5-2 → 1.15.5
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/{ShadowViewAddon-28865623.js → ShadowViewAddon-e9dc77e3.js} +2 -2
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/mint-components.cjs.js +1 -1
- package/dist/cjs/sqm-banking-info-form_17.cjs.entry.js +234 -377
- package/dist/cjs/{sqm-base-registration-form-view-8029d30e.js → sqm-base-registration-form-view-66f99821.js} +9 -4
- package/dist/cjs/sqm-big-stat_43.cjs.entry.js +10 -143
- package/dist/cjs/{sqm-invoice-table-view-3f60fba9.js → sqm-invoice-table-view-5c74607f.js} +0 -1
- package/dist/cjs/sqm-portal-google-registration-form.cjs.entry.js +25 -18
- package/dist/cjs/sqm-stencilbook.cjs.entry.js +8 -5
- package/dist/cjs/{usePayoutStatus-fc4e609e.js → usePayoutStatus-733ef29a.js} +2 -167
- package/dist/collection/components/sqm-base-registration/BaseRegistrationForm.stories.js +2 -2
- package/dist/collection/components/sqm-base-registration/sqm-base-registration-form-view.js +9 -4
- package/dist/collection/components/sqm-checkbox-field/sqm-checkbox-field.js +1 -1
- package/dist/collection/components/sqm-dropdown-field/sqm-dropdown-field.js +1 -1
- package/dist/collection/components/sqm-input-field/sqm-input-field.js +1 -1
- package/dist/collection/components/sqm-marketing-emails-checkbox/sqm-marketing-emails-checkbox.js +1 -1
- package/dist/collection/components/sqm-name-fields/NameFields.stories.js +2 -0
- package/dist/collection/components/sqm-name-fields/sqm-name-fields-view.js +3 -3
- package/dist/collection/components/sqm-name-fields/sqm-name-fields.js +31 -1
- package/dist/collection/components/sqm-name-fields/useNameFields.js +1 -0
- package/dist/collection/components/sqm-password-field/sqm-password-field.js +2 -2
- package/dist/collection/components/sqm-portal-google-registration-form/PortalGoogleRegistrationForm.stories.js +1 -0
- package/dist/collection/components/sqm-portal-google-registration-form/sqm-portal-google-registration-form.js +4 -4
- package/dist/collection/components/sqm-portal-google-registration-form/usePortalGoogleRegistrationForm.js +22 -15
- package/dist/collection/components/tax-and-cash/TaxForm.stories.js +0 -1
- package/dist/collection/components/tax-and-cash/sqm-indirect-tax-form/useIndirectTaxForm.js +40 -47
- package/dist/collection/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert-view.js +1 -87
- package/dist/collection/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert.js +0 -327
- package/dist/collection/components/tax-and-cash/sqm-payout-status-alert/usePayoutStatus.js +3 -27
- package/dist/collection/components/tax-and-cash/sqm-tax-and-cash/sqm-tax-and-cash.js +0 -300
- package/dist/collection/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard-view.js +1 -85
- package/dist/collection/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard.js +0 -300
- package/dist/collection/components/tax-and-cash/sqm-user-info-form/sqm-user-info-form-view.js +12 -23
- package/dist/collection/components/tax-and-cash/sqm-user-info-form/sqm-user-info-form.js +1 -1
- package/dist/collection/components/tax-and-cash/sqm-user-info-form/useUserInfoForm.js +9 -90
- package/dist/esm/{ShadowViewAddon-f2176779.js → ShadowViewAddon-e0d5f1c9.js} +2 -2
- package/dist/esm/loader.js +1 -1
- package/dist/esm/mint-components.js +1 -1
- package/dist/esm/sqm-banking-info-form_17.entry.js +188 -331
- package/dist/esm/{sqm-base-registration-form-view-dafba287.js → sqm-base-registration-form-view-d81e316a.js} +9 -4
- package/dist/esm/sqm-big-stat_43.entry.js +10 -143
- package/dist/esm/{sqm-invoice-table-view-01453fa3.js → sqm-invoice-table-view-3491dd80.js} +0 -1
- package/dist/esm/sqm-portal-google-registration-form.entry.js +25 -18
- package/dist/esm/sqm-stencilbook.entry.js +8 -5
- package/dist/esm/{usePayoutStatus-b4bdbfa7.js → usePayoutStatus-b89e8c49.js} +4 -154
- package/dist/esm-es5/{ShadowViewAddon-f2176779.js → ShadowViewAddon-e0d5f1c9.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-banking-info-form_17.entry.js +1 -1
- package/dist/esm-es5/sqm-base-registration-form-view-d81e316a.js +1 -0
- package/dist/esm-es5/sqm-big-stat_43.entry.js +1 -1
- package/dist/esm-es5/sqm-invoice-table-view-3491dd80.js +1 -0
- package/dist/esm-es5/sqm-portal-google-registration-form.entry.js +1 -1
- package/dist/esm-es5/sqm-stencilbook.entry.js +1 -1
- package/dist/esm-es5/usePayoutStatus-b89e8c49.js +6 -0
- package/dist/mint-components/mint-components.esm.js +1 -1
- package/dist/mint-components/p-021b0540.js +46 -0
- package/dist/mint-components/{p-4a731079.entry.js → p-1edebab1.entry.js} +2 -2
- package/dist/mint-components/p-37996351.system.js +1 -1
- package/dist/mint-components/{p-02832118.system.entry.js → p-3ac8613d.system.entry.js} +1 -1
- package/dist/mint-components/{p-c1b074b6.js → p-3b6dccec.js} +1 -1
- package/dist/mint-components/p-3d73cd84.entry.js +220 -0
- package/dist/mint-components/p-43e274e9.entry.js +1 -0
- package/dist/mint-components/p-49932f12.system.js +1 -0
- package/dist/mint-components/p-8db18561.system.entry.js +1 -0
- package/dist/mint-components/p-9308221f.js +1 -0
- package/dist/mint-components/p-959c42b2.system.entry.js +1 -0
- package/dist/mint-components/p-a6494752.system.js +6 -0
- package/dist/mint-components/p-bc021969.system.js +1 -0
- package/dist/mint-components/p-c78e6066.entry.js +273 -0
- package/dist/mint-components/{p-0d939b73.system.js → p-d15b642f.system.js} +1 -1
- package/dist/mint-components/p-e64e8354.system.entry.js +1 -0
- package/dist/mint-components/p-e8e48982.js +1 -0
- package/dist/types/components/sqm-base-registration/sqm-base-registration-form-view.d.ts +2 -1
- package/dist/types/components/sqm-checkbox-field/sqm-checkbox-field.d.ts +1 -1
- package/dist/types/components/sqm-dropdown-field/sqm-dropdown-field.d.ts +1 -1
- package/dist/types/components/sqm-input-field/sqm-input-field.d.ts +1 -1
- package/dist/types/components/sqm-marketing-emails-checkbox/sqm-marketing-emails-checkbox.d.ts +1 -1
- package/dist/types/components/sqm-name-fields/sqm-name-fields-view.d.ts +1 -0
- package/dist/types/components/sqm-name-fields/sqm-name-fields.d.ts +5 -0
- package/dist/types/components/sqm-name-fields/useNameFields.d.ts +1 -0
- package/dist/types/components/sqm-password-field/sqm-password-field.d.ts +1 -1
- package/dist/types/components/sqm-portal-google-registration-form/usePortalGoogleRegistrationForm.d.ts +2 -1
- package/dist/types/components/tax-and-cash/sqm-indirect-tax-form/useIndirectTaxForm.d.ts +0 -31
- package/dist/types/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert-view.d.ts +0 -14
- package/dist/types/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert.d.ts +0 -53
- package/dist/types/components/tax-and-cash/sqm-payout-status-alert/usePayoutStatus.d.ts +1 -2
- package/dist/types/components/tax-and-cash/sqm-tax-and-cash/sqm-tax-and-cash.d.ts +0 -48
- package/dist/types/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard-view.d.ts +0 -12
- package/dist/types/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard.d.ts +0 -48
- package/dist/types/components/tax-and-cash/sqm-user-info-form/sqm-user-info-form-view.d.ts +0 -2
- package/dist/types/components/tax-and-cash/sqm-user-info-form/useUserInfoForm.d.ts +0 -1
- package/dist/types/components.d.ts +10 -296
- package/dist/types/global/android.d.ts +7 -0
- package/dist/types/global/demo.d.ts +2 -0
- package/dist/types/stories/features.d.ts +4 -0
- package/dist/types/stories/templates.d.ts +4 -0
- 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/esm-es5/sqm-base-registration-form-view-dafba287.js +0 -1
- package/dist/esm-es5/sqm-invoice-table-view-01453fa3.js +0 -1
- package/dist/esm-es5/usePayoutStatus-b4bdbfa7.js +0 -6
- package/dist/mint-components/p-2651ef99.system.js +0 -1
- package/dist/mint-components/p-35701119.js +0 -1
- package/dist/mint-components/p-59fe6066.js +0 -1
- package/dist/mint-components/p-86a5db85.system.js +0 -1
- package/dist/mint-components/p-93db61eb.system.js +0 -6
- package/dist/mint-components/p-9c4f4cd6.entry.js +0 -1
- package/dist/mint-components/p-a3647f70.system.entry.js +0 -1
- package/dist/mint-components/p-a4f494ee.system.entry.js +0 -1
- package/dist/mint-components/p-ba14b5f7.system.entry.js +0 -1
- package/dist/mint-components/p-d0b404d5.entry.js +0 -109
- package/dist/mint-components/p-e3deed72.entry.js +0 -273
- package/dist/mint-components/p-fde41ad1.js +0 -157
|
@@ -37,6 +37,7 @@ sqm-portal-register {
|
|
|
37
37
|
const sheet = createStyleSheet(style);
|
|
38
38
|
const styleString = sheet.toString();
|
|
39
39
|
export function BaseRegistrationFormView(props) {
|
|
40
|
+
var _a, _b;
|
|
40
41
|
const { states, content, callbacks } = props;
|
|
41
42
|
return (h("div", { class: sheet.classes.Wrapper },
|
|
42
43
|
h("style", { type: "text/css" },
|
|
@@ -44,10 +45,8 @@ export function BaseRegistrationFormView(props) {
|
|
|
44
45
|
styleString),
|
|
45
46
|
h(TextSpanView, { type: "h3" }, content.pageLabel),
|
|
46
47
|
h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.handleEmailSubmit, novalidate: true },
|
|
47
|
-
states.error && (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
|
|
48
|
-
h("div", { part: "erroralert-text" }, props.states.error))),
|
|
49
48
|
content.formData,
|
|
50
|
-
h("sl-input", { exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", required: true, validationError: ({ value }) => {
|
|
49
|
+
h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", required: true, validationError: ({ value }) => {
|
|
51
50
|
if (!value) {
|
|
52
51
|
return content.requiredFieldErrorMessage;
|
|
53
52
|
}
|
|
@@ -55,7 +54,13 @@ export function BaseRegistrationFormView(props) {
|
|
|
55
54
|
if (!value.includes("@")) {
|
|
56
55
|
return content.invalidEmailErrorMessage;
|
|
57
56
|
}
|
|
58
|
-
} })
|
|
57
|
+
} }, (((_a = states === null || states === void 0 ? void 0 : states.validationErrors) === null || _a === void 0 ? void 0 : _a.email) ? {
|
|
58
|
+
class: sheet.classes.ErrorStyle,
|
|
59
|
+
helpText: ((_b = states === null || states === void 0 ? void 0 : states.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ||
|
|
60
|
+
content.requiredFieldErrorMessage,
|
|
61
|
+
}
|
|
62
|
+
: []))),
|
|
63
|
+
content.terms,
|
|
59
64
|
h("div", { class: sheet.classes.ButtonsContainer },
|
|
60
65
|
h("sl-button", { submit: true, exportparts: "base: primarybutton-base", type: "primary", style: { margin: "0" } }, content.submitLabel || "Register"),
|
|
61
66
|
h("sl-menu-divider", { style: { margin: "0" } }),
|
|
@@ -8,7 +8,7 @@ import { CheckboxFieldView, } from "./sqm-checkbox-field-view";
|
|
|
8
8
|
import { useCheckboxField } from "./useCheckboxField";
|
|
9
9
|
/**
|
|
10
10
|
* @uiName Form Checkbox Field
|
|
11
|
-
* @validParents ["sqm-portal-register","sqm-portal-registration-form"]
|
|
11
|
+
* @validParents ["sqm-portal-register","sqm-portal-registration-form", "sqm-portal-google-registration-form"]
|
|
12
12
|
* @exampleGroup Microsite Components
|
|
13
13
|
* @example Form Checkbox Field - <sqm-checkbox-field checkbox-name="terms" checkbox-label="By signing up you agree to the {labelLink}" checkbox-label-link="https://example.com" checkbox-label-link-text="Terms and Conditions" error-message="Must be checked" ></sqm-checkbox-field>
|
|
14
14
|
*/
|
|
@@ -8,7 +8,7 @@ import { DropdownFieldView, } from "./sqm-dropdown-field-view";
|
|
|
8
8
|
import { useDropdownField } from "./useDropdownField";
|
|
9
9
|
/**
|
|
10
10
|
* @uiName Form Dropdown Field
|
|
11
|
-
* @validParents ["sqm-portal-register","sqm-portal-registration-form"]
|
|
11
|
+
* @validParents ["sqm-portal-register","sqm-portal-registration-form", "sqm-portal-google-registration-form"]
|
|
12
12
|
* @slots [{"name":"", "title":"Drop Down Option"}]
|
|
13
13
|
* @exampleGroup Microsite Components
|
|
14
14
|
* @example Form Dropdown Field - <sqm-dropdown-field dropdown-label="Select an option" error-message="Select an option"><sl-menu-item value="option-1">Option 1</sl-menu-item><sl-menu-item value="option-2">Option 2</sl-menu-item><sl-menu-item value="option-3">Option 3</sl-menu-item></sqm-dropdown-field>
|
|
@@ -8,7 +8,7 @@ import { InputFieldView } from "./sqm-input-field-view";
|
|
|
8
8
|
import { useInputField } from "./useInputField";
|
|
9
9
|
/**
|
|
10
10
|
* @uiName Form Input Field
|
|
11
|
-
* @validParents ["sqm-portal-register","sqm-portal-registration-form"]
|
|
11
|
+
* @validParents ["sqm-portal-register","sqm-portal-registration-form", "sqm-portal-google-registration-form"]
|
|
12
12
|
* @exampleGroup Microsite Components
|
|
13
13
|
* @example Form Input Field - <sqm-input-field input-label="Field Label" field-type="text" error-message="Cannot be empty"></sqm-input-field>
|
|
14
14
|
*/
|
package/dist/collection/components/sqm-marketing-emails-checkbox/sqm-marketing-emails-checkbox.js
CHANGED
|
@@ -7,7 +7,7 @@ import { CheckboxFieldView, } from "../sqm-checkbox-field/sqm-checkbox-field-vie
|
|
|
7
7
|
import { useCheckboxField } from "../sqm-checkbox-field/useCheckboxField";
|
|
8
8
|
/**
|
|
9
9
|
* @uiName Marketing Emails Checkbox Field
|
|
10
|
-
* @validParents ["sqm-portal-register","sqm-portal-registration-form"]
|
|
10
|
+
* @validParents ["sqm-portal-register","sqm-portal-registration-form", "sqm-portal-google-registration-form"]
|
|
11
11
|
* @requiredFeatures ["MARKETING_EMAILS"]
|
|
12
12
|
*/
|
|
13
13
|
export class MarketingEmailsCheckbox {
|
|
@@ -9,6 +9,7 @@ export default {
|
|
|
9
9
|
};
|
|
10
10
|
const props = {
|
|
11
11
|
states: {
|
|
12
|
+
optional: false,
|
|
12
13
|
registrationFormState: {
|
|
13
14
|
validationErrors: undefined,
|
|
14
15
|
},
|
|
@@ -20,6 +21,7 @@ const props = {
|
|
|
20
21
|
};
|
|
21
22
|
const errorProps = {
|
|
22
23
|
states: {
|
|
24
|
+
optional: false,
|
|
23
25
|
registrationFormState: {
|
|
24
26
|
validationErrors: {
|
|
25
27
|
firstName: "Cannot be empty",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
|
-
import { createStyleSheet } from "../../styling/JSS";
|
|
3
2
|
import { ErrorStyles } from "../../global/mixins";
|
|
3
|
+
import { createStyleSheet } from "../../styling/JSS";
|
|
4
4
|
const style = {
|
|
5
5
|
ErrorStyle: ErrorStyles,
|
|
6
6
|
FieldsContainer: {
|
|
@@ -31,7 +31,7 @@ export function NameFieldsView(props) {
|
|
|
31
31
|
h("style", { type: "text/css" },
|
|
32
32
|
vanillaStyle,
|
|
33
33
|
styleString),
|
|
34
|
-
h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: "/firstName", type: "text", label: states.content.firstNameLabel, required:
|
|
34
|
+
h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: "/firstName", type: "text", label: states.content.firstNameLabel, required: !states.optional, disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e.firstName) ? {
|
|
35
35
|
value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g.firstName,
|
|
36
36
|
}
|
|
37
37
|
: {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) ? {
|
|
@@ -39,7 +39,7 @@ export function NameFieldsView(props) {
|
|
|
39
39
|
helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) || "Cannot be empty",
|
|
40
40
|
}
|
|
41
41
|
: []))),
|
|
42
|
-
h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: "/lastName", type: "text", label: states.content.lastNameLabel, required:
|
|
42
|
+
h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: "/lastName", type: "text", label: states.content.lastNameLabel, required: !states.optional, disabled: ((_h = states.registrationFormState) === null || _h === void 0 ? void 0 : _h.loading) || ((_j = states.registrationFormState) === null || _j === void 0 ? void 0 : _j.disabled) }, (((_l = (_k = states.registrationFormState) === null || _k === void 0 ? void 0 : _k.initialData) === null || _l === void 0 ? void 0 : _l.lastName) ? {
|
|
43
43
|
value: (_o = (_m = states.registrationFormState) === null || _m === void 0 ? void 0 : _m.initialData) === null || _o === void 0 ? void 0 : _o.lastName,
|
|
44
44
|
}
|
|
45
45
|
: {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.lastName) ? {
|
|
@@ -21,6 +21,11 @@ export class NameFields {
|
|
|
21
21
|
* @uiName Last name label
|
|
22
22
|
*/
|
|
23
23
|
this.lastNameLabel = "Last Name";
|
|
24
|
+
/**
|
|
25
|
+
* @uiName Optional
|
|
26
|
+
* @uiWidget
|
|
27
|
+
*/
|
|
28
|
+
this.optional = false;
|
|
24
29
|
withHooks(this);
|
|
25
30
|
}
|
|
26
31
|
disconnectedCallback() { }
|
|
@@ -72,12 +77,36 @@ export class NameFields {
|
|
|
72
77
|
"reflect": false,
|
|
73
78
|
"defaultValue": "\"Last Name\""
|
|
74
79
|
},
|
|
80
|
+
"optional": {
|
|
81
|
+
"type": "boolean",
|
|
82
|
+
"mutable": false,
|
|
83
|
+
"complexType": {
|
|
84
|
+
"original": "boolean",
|
|
85
|
+
"resolved": "boolean",
|
|
86
|
+
"references": {}
|
|
87
|
+
},
|
|
88
|
+
"required": false,
|
|
89
|
+
"optional": false,
|
|
90
|
+
"docs": {
|
|
91
|
+
"tags": [{
|
|
92
|
+
"text": "Optional",
|
|
93
|
+
"name": "uiName"
|
|
94
|
+
}, {
|
|
95
|
+
"text": undefined,
|
|
96
|
+
"name": "uiWidget"
|
|
97
|
+
}],
|
|
98
|
+
"text": ""
|
|
99
|
+
},
|
|
100
|
+
"attribute": "optional",
|
|
101
|
+
"reflect": false,
|
|
102
|
+
"defaultValue": "false"
|
|
103
|
+
},
|
|
75
104
|
"demoData": {
|
|
76
105
|
"type": "unknown",
|
|
77
106
|
"mutable": false,
|
|
78
107
|
"complexType": {
|
|
79
108
|
"original": "DemoData<NameFieldsViewProps>",
|
|
80
|
-
"resolved": "{ states?: { registrationFormState?: RegistrationFormState; content: { firstNameLabel: string; lastNameLabel: string; }; }; }",
|
|
109
|
+
"resolved": "{ states?: { optional: boolean; registrationFormState?: RegistrationFormState; content: { firstNameLabel: string; lastNameLabel: string; }; }; }",
|
|
81
110
|
"references": {
|
|
82
111
|
"DemoData": {
|
|
83
112
|
"location": "import",
|
|
@@ -110,6 +139,7 @@ export class NameFields {
|
|
|
110
139
|
function useNameFieldsDemo(props) {
|
|
111
140
|
return deepmerge({
|
|
112
141
|
states: {
|
|
142
|
+
optional: props.optional,
|
|
113
143
|
validationErrors: [],
|
|
114
144
|
content: {
|
|
115
145
|
firstNameLabel: props.firstNameLabel,
|
|
@@ -3,13 +3,13 @@ import { withHooks } from "@saasquatch/stencil-hooks";
|
|
|
3
3
|
import { useState } from "@saasquatch/universal-hooks";
|
|
4
4
|
import { Component, h, Prop, State } from "@stencil/core";
|
|
5
5
|
import deepmerge from "deepmerge";
|
|
6
|
+
import { getProps } from "../../utils/utils";
|
|
6
7
|
import { validateNewPassword } from "./passwordValidation";
|
|
7
8
|
import { PortalResetPasswordView, } from "./sqm-password-field-view";
|
|
8
9
|
import { usePasswordField } from "./usePasswordField";
|
|
9
|
-
import { getProps } from "../../utils/utils";
|
|
10
10
|
/**
|
|
11
11
|
* @uiName Form Password Field
|
|
12
|
-
* @validParents ["sqm-portal-register","sqm-portal-registration-form"]
|
|
12
|
+
* @validParents ["sqm-portal-register","sqm-portal-registration-form", "sqm-portal-google-registration-form"]
|
|
13
13
|
* @exampleGroup Microsite Components
|
|
14
14
|
* @example Form Password Field - <sqm-password-field field-label="Password"></sqm-password-field>
|
|
15
15
|
*/
|
|
@@ -2,11 +2,11 @@ import { isDemo, navigation } from "@saasquatch/component-boilerplate";
|
|
|
2
2
|
import { useState, withHooks } from "@saasquatch/stencil-hooks";
|
|
3
3
|
import { Component, h, Prop, State } from "@stencil/core";
|
|
4
4
|
import deepmerge from "deepmerge";
|
|
5
|
+
import { createStyleSheet } from "../../styling/JSS";
|
|
5
6
|
import { BaseRegistrationFormView } from "../sqm-base-registration/sqm-base-registration-form-view";
|
|
6
7
|
import { PortalRegistrationFormView, } from "../sqm-portal-registration-form/sqm-portal-registration-form-view";
|
|
7
8
|
import { usePortalRegistrationForm } from "../sqm-portal-registration-form/usePortalRegistrationForm";
|
|
8
9
|
import { usePortalGoogleRegistrationForm } from "./usePortalGoogleRegistrationForm";
|
|
9
|
-
import { createStyleSheet } from "../../styling/JSS";
|
|
10
10
|
/**
|
|
11
11
|
* @uiName Google Registration
|
|
12
12
|
* @canvasRenderer always-replace
|
|
@@ -161,7 +161,7 @@ export class PortalGoogleRegistrationForm {
|
|
|
161
161
|
};
|
|
162
162
|
const sheet = createStyleSheet(styles);
|
|
163
163
|
const styleString = sheet.toString();
|
|
164
|
-
const { handleGoogleInit, handleEmailSubmit, showRegistrationForm,
|
|
164
|
+
const { handleGoogleInit, handleEmailSubmit, showRegistrationForm, validationErrors, } = isDemo() ? useGoogleDemo(this) : usePortalGoogleRegistrationForm(this);
|
|
165
165
|
const content = {
|
|
166
166
|
formData: h("slot", { name: "formData" }),
|
|
167
167
|
googleButton: (h("sqm-google-sign-in", { text: this.googleButtonText, onInitComplete: handleGoogleInit })),
|
|
@@ -192,7 +192,7 @@ export class PortalGoogleRegistrationForm {
|
|
|
192
192
|
};
|
|
193
193
|
if (showRegistrationForm.mode === "base") {
|
|
194
194
|
return (h(BaseRegistrationFormView, { states: {
|
|
195
|
-
|
|
195
|
+
validationErrors,
|
|
196
196
|
}, callbacks: { handleEmailSubmit }, content: content }));
|
|
197
197
|
}
|
|
198
198
|
return (h(PortalRegistrationFormView, { states: {
|
|
@@ -874,7 +874,7 @@ function useGoogleDemo(props) {
|
|
|
874
874
|
mode: "base",
|
|
875
875
|
});
|
|
876
876
|
return deepmerge({
|
|
877
|
-
|
|
877
|
+
validationErrors: {},
|
|
878
878
|
handleEmailSubmit: () => setShowRegistrationForm({ mode: "manual" }),
|
|
879
879
|
showRegistrationForm,
|
|
880
880
|
handleGoogleInit: () => setShowRegistrationForm({ mode: "google" }),
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import { useState } from "@saasquatch/universal-hooks";
|
|
2
2
|
import jsonpointer from "jsonpointer";
|
|
3
|
-
import { useRegistrationForm } from "../sqm-portal-registration-form/useRegistrationFormState";
|
|
4
3
|
import { jwtDecode } from "jwt-decode";
|
|
4
|
+
import { useRegistrationForm } from "../sqm-portal-registration-form/useRegistrationFormState";
|
|
5
5
|
export function usePortalGoogleRegistrationForm(props) {
|
|
6
|
-
const [emailValidationError, setEmailValidationError] = useState(null);
|
|
7
6
|
const [registrationFormState, setRegistrationFormState] = useRegistrationForm();
|
|
8
7
|
const [showRegistrationForm, setShowRegistrationForm] = useState({
|
|
9
8
|
mode: "base",
|
|
@@ -11,33 +10,40 @@ export function usePortalGoogleRegistrationForm(props) {
|
|
|
11
10
|
const handleEmailSubmit = async (event) => {
|
|
12
11
|
const formControls = event.target.getFormControls();
|
|
13
12
|
let formData = {};
|
|
14
|
-
let
|
|
13
|
+
let validationErrors = {};
|
|
15
14
|
formControls.forEach((control) => {
|
|
16
15
|
if (!control.name)
|
|
17
16
|
return;
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
17
|
+
const key = control.name;
|
|
18
|
+
const value = control.value;
|
|
19
|
+
jsonpointer.set(formData, key, value);
|
|
20
|
+
if (control.required && !value) {
|
|
21
|
+
jsonpointer.set(validationErrors, key, props.requiredFieldErrorMessage);
|
|
22
|
+
}
|
|
24
23
|
if (typeof control.validationError === "function") {
|
|
25
24
|
const validate = control.validationError;
|
|
26
25
|
const validationError = validate({
|
|
27
26
|
control,
|
|
28
|
-
key
|
|
29
|
-
value
|
|
27
|
+
key,
|
|
28
|
+
value,
|
|
30
29
|
});
|
|
31
30
|
if (validationError)
|
|
32
|
-
|
|
31
|
+
jsonpointer.set(validationErrors, key, validationError);
|
|
33
32
|
}
|
|
34
33
|
});
|
|
35
|
-
if (
|
|
36
|
-
|
|
34
|
+
if (Object.keys(validationErrors).length) {
|
|
35
|
+
// early return for validation errors
|
|
36
|
+
setRegistrationFormState({
|
|
37
|
+
...registrationFormState,
|
|
38
|
+
loading: false,
|
|
39
|
+
error: "",
|
|
40
|
+
validationErrors,
|
|
41
|
+
});
|
|
37
42
|
return;
|
|
38
43
|
}
|
|
39
44
|
setRegistrationFormState({
|
|
40
45
|
...registrationFormState,
|
|
46
|
+
validationErrors: {},
|
|
41
47
|
initialData: {
|
|
42
48
|
...registrationFormState === null || registrationFormState === void 0 ? void 0 : registrationFormState.initialData,
|
|
43
49
|
...formData,
|
|
@@ -67,8 +73,9 @@ export function usePortalGoogleRegistrationForm(props) {
|
|
|
67
73
|
}
|
|
68
74
|
};
|
|
69
75
|
return {
|
|
76
|
+
registrationFormState,
|
|
70
77
|
showRegistrationForm,
|
|
71
|
-
|
|
78
|
+
validationErrors: registrationFormState.validationErrors,
|
|
72
79
|
handleGoogleInit,
|
|
73
80
|
handleEmailSubmit,
|
|
74
81
|
};
|
|
@@ -6,7 +6,7 @@ import { COUNTRIES_QUERY_NAMESPACE, TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAME
|
|
|
6
6
|
import { INDIRECT_TAX_PROVINCES, INDIRECT_TAX_SPAIN_REGIONS, } from "../subregions";
|
|
7
7
|
import { getCountryObj, validTaxDocument } from "../utils";
|
|
8
8
|
import { TAX_FORM_UPDATED_EVENT_KEY } from "../eventKeys";
|
|
9
|
-
|
|
9
|
+
const CONNECT_PARTNER = gql `
|
|
10
10
|
mutation createImpactConnection($vars: ImpactConnectionInput!) {
|
|
11
11
|
createImpactConnection(impactConnectionInput: $vars) {
|
|
12
12
|
success
|
|
@@ -111,51 +111,8 @@ export function useIndirectTaxForm(props) {
|
|
|
111
111
|
console.error("Could not detect select change");
|
|
112
112
|
setFormState((p) => ({ ...p, [field]: value }));
|
|
113
113
|
};
|
|
114
|
-
async function connectPartner(formData) {
|
|
115
|
-
var _a, _b, _c, _d, _e;
|
|
116
|
-
const vars = {
|
|
117
|
-
user: {
|
|
118
|
-
id: user.id,
|
|
119
|
-
accountId: user.accountId,
|
|
120
|
-
},
|
|
121
|
-
firstName: userForm.firstName,
|
|
122
|
-
lastName: userForm.lastName,
|
|
123
|
-
countryCode: userForm.countryCode,
|
|
124
|
-
currency: userForm.currency,
|
|
125
|
-
address: userForm.address,
|
|
126
|
-
city: userForm.city,
|
|
127
|
-
state: userForm.state,
|
|
128
|
-
postalCode: userForm.postalCode,
|
|
129
|
-
phoneNumber: userForm.phoneNumber,
|
|
130
|
-
phoneNumberCountryCode: userForm.phoneNumberCountryCode,
|
|
131
|
-
indirectTaxCountryCode: formData.selectedRegion,
|
|
132
|
-
indirectTaxRegion: formData.province || formData.subRegion,
|
|
133
|
-
indirectTaxId: formData.indirectTaxNumber,
|
|
134
|
-
additionalTaxId: formData.qstNumber,
|
|
135
|
-
withholdingTaxId: formData.subRegionTaxNumber,
|
|
136
|
-
};
|
|
137
|
-
const result = await connectImpactPartner({
|
|
138
|
-
vars,
|
|
139
|
-
});
|
|
140
|
-
if (!result || ((_a = result) === null || _a === void 0 ? void 0 : _a.message))
|
|
141
|
-
throw new Error();
|
|
142
|
-
if (!((_b = result.createImpactConnection) === null || _b === void 0 ? void 0 : _b.success)) {
|
|
143
|
-
// Output backend errors to console for now
|
|
144
|
-
console.error("Failed to create Impact connection: ", result.createImpactConnection.validationErrors);
|
|
145
|
-
throw new Error();
|
|
146
|
-
}
|
|
147
|
-
await refetch();
|
|
148
|
-
const resultPublisher = (_e = (_d = (_c = result
|
|
149
|
-
.createImpactConnection) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 : _d.impactConnection) === null || _e === void 0 ? void 0 : _e.publisher;
|
|
150
|
-
const hasValidCurrentDocument = validTaxDocument(resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.requiredTaxDocumentType) && (resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.currentTaxDocument);
|
|
151
|
-
// Fire form change event
|
|
152
|
-
window.dispatchEvent(new Event(TAX_FORM_UPDATED_EVENT_KEY));
|
|
153
|
-
return {
|
|
154
|
-
resultPublisher,
|
|
155
|
-
hasValidCurrentDocument,
|
|
156
|
-
};
|
|
157
|
-
}
|
|
158
114
|
const onSubmit = async (event) => {
|
|
115
|
+
var _a, _b, _c, _d, _e;
|
|
159
116
|
if (!option) {
|
|
160
117
|
setErrors({ taxDetails: true });
|
|
161
118
|
return;
|
|
@@ -181,7 +138,44 @@ export function useIndirectTaxForm(props) {
|
|
|
181
138
|
}
|
|
182
139
|
setLoading(true);
|
|
183
140
|
try {
|
|
184
|
-
const
|
|
141
|
+
const vars = {
|
|
142
|
+
user: {
|
|
143
|
+
id: user.id,
|
|
144
|
+
accountId: user.accountId,
|
|
145
|
+
},
|
|
146
|
+
firstName: userForm.firstName,
|
|
147
|
+
lastName: userForm.lastName,
|
|
148
|
+
countryCode: userForm.countryCode,
|
|
149
|
+
currency: userForm.currency,
|
|
150
|
+
address: userForm.address,
|
|
151
|
+
city: userForm.city,
|
|
152
|
+
state: userForm.state,
|
|
153
|
+
postalCode: userForm.postalCode,
|
|
154
|
+
phoneNumber: userForm.phoneNumber,
|
|
155
|
+
phoneNumberCountryCode: userForm.phoneNumberCountryCode,
|
|
156
|
+
indirectTaxCountryCode: formData.selectedRegion,
|
|
157
|
+
indirectTaxRegion: formData.province || formData.subRegion,
|
|
158
|
+
indirectTaxId: formData.indirectTaxNumber,
|
|
159
|
+
additionalTaxId: formData.qstNumber,
|
|
160
|
+
withholdingTaxId: formData.subRegionTaxNumber,
|
|
161
|
+
};
|
|
162
|
+
const result = await connectImpactPartner({
|
|
163
|
+
vars,
|
|
164
|
+
});
|
|
165
|
+
if (!result || ((_a = result) === null || _a === void 0 ? void 0 : _a.message))
|
|
166
|
+
throw new Error();
|
|
167
|
+
if (!((_b = result.createImpactConnection) === null || _b === void 0 ? void 0 : _b.success)) {
|
|
168
|
+
// Output backend errors to console for now
|
|
169
|
+
console.error("Failed to create Impact connection: ", result.createImpactConnection
|
|
170
|
+
.validationErrors);
|
|
171
|
+
throw new Error();
|
|
172
|
+
}
|
|
173
|
+
await refetch();
|
|
174
|
+
const resultPublisher = (_e = (_d = (_c = result
|
|
175
|
+
.createImpactConnection) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 : _d.impactConnection) === null || _e === void 0 ? void 0 : _e.publisher;
|
|
176
|
+
const hasValidCurrentDocument = validTaxDocument(resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.requiredTaxDocumentType) && (resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.currentTaxDocument);
|
|
177
|
+
// Fire form change event
|
|
178
|
+
window.dispatchEvent(new Event(TAX_FORM_UPDATED_EVENT_KEY));
|
|
185
179
|
if ((resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.requiredTaxDocumentType) &&
|
|
186
180
|
!hasValidCurrentDocument) {
|
|
187
181
|
// Go to docusign form
|
|
@@ -232,7 +226,6 @@ export function useIndirectTaxForm(props) {
|
|
|
232
226
|
...p,
|
|
233
227
|
hasSubRegionTaxNumber: !p.hasSubRegionTaxNumber,
|
|
234
228
|
})),
|
|
235
|
-
connectPartner,
|
|
236
229
|
},
|
|
237
230
|
data: {
|
|
238
231
|
esRegions: INDIRECT_TAX_SPAIN_REGIONS,
|
|
@@ -160,7 +160,7 @@ export function PayoutStatusAlertView(props) {
|
|
|
160
160
|
class: sheet.classes.WarningAlertContainer,
|
|
161
161
|
};
|
|
162
162
|
}
|
|
163
|
-
case "
|
|
163
|
+
case "ACCOUNT_REVIEW":
|
|
164
164
|
return {
|
|
165
165
|
header: text.accountReviewHeader,
|
|
166
166
|
description: intl.formatMessage({
|
|
@@ -174,90 +174,6 @@ export function PayoutStatusAlertView(props) {
|
|
|
174
174
|
icon: "exclamation-triangle",
|
|
175
175
|
class: sheet.classes.WarningAlertContainer,
|
|
176
176
|
};
|
|
177
|
-
case "PAYMENT_HOLD_ON_CHANGE":
|
|
178
|
-
return {
|
|
179
|
-
header: text.paymentHoldOnChangeHeader,
|
|
180
|
-
description: intl.formatMessage({
|
|
181
|
-
id: "accountReviewDescription",
|
|
182
|
-
defaultMessage: text.paymentHoldOnChangeDescription,
|
|
183
|
-
}, {
|
|
184
|
-
supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
|
|
185
|
-
}),
|
|
186
|
-
buttonText: null,
|
|
187
|
-
alertType: "warning",
|
|
188
|
-
icon: "exclamation-triangle",
|
|
189
|
-
class: sheet.classes.WarningAlertContainer,
|
|
190
|
-
};
|
|
191
|
-
case "BENEFICIARY_NAME_INVALID":
|
|
192
|
-
return {
|
|
193
|
-
header: text.beneficiaryNameInvalidHeader,
|
|
194
|
-
description: intl.formatMessage({
|
|
195
|
-
id: "accountReviewDescription",
|
|
196
|
-
defaultMessage: text.beneficiaryNameInvalidDescription,
|
|
197
|
-
}, {
|
|
198
|
-
supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
|
|
199
|
-
}),
|
|
200
|
-
buttonText: text.editPaymentInformationButton,
|
|
201
|
-
alertType: "warning",
|
|
202
|
-
icon: "exclamation-triangle",
|
|
203
|
-
class: sheet.classes.WarningAlertContainer,
|
|
204
|
-
};
|
|
205
|
-
case "BENEFICIARY_NAME_MISMATCH":
|
|
206
|
-
return {
|
|
207
|
-
header: text.beneficiaryNameMismatchHeader,
|
|
208
|
-
description: intl.formatMessage({
|
|
209
|
-
id: "accountReviewDescription",
|
|
210
|
-
defaultMessage: text.beneficiaryNameMismatchDescription,
|
|
211
|
-
}, {
|
|
212
|
-
supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
|
|
213
|
-
}),
|
|
214
|
-
buttonText: text.editPaymentInformationButton,
|
|
215
|
-
alertType: "warning",
|
|
216
|
-
icon: "exclamation-triangle",
|
|
217
|
-
class: sheet.classes.WarningAlertContainer,
|
|
218
|
-
};
|
|
219
|
-
case "BANK_TAX_NAME_MISMATCH":
|
|
220
|
-
return {
|
|
221
|
-
header: text.bankTaxNameMismatchHeader,
|
|
222
|
-
description: intl.formatMessage({
|
|
223
|
-
id: "accountReviewDescription",
|
|
224
|
-
defaultMessage: text.bankTaxNameMismatchDescription,
|
|
225
|
-
}, {
|
|
226
|
-
supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
|
|
227
|
-
}),
|
|
228
|
-
buttonText: text.editPaymentInformationButton,
|
|
229
|
-
alertType: "warning",
|
|
230
|
-
icon: "exclamation-triangle",
|
|
231
|
-
class: sheet.classes.WarningAlertContainer,
|
|
232
|
-
};
|
|
233
|
-
case "WITHDRAWAL_SETTINGS_INVALID":
|
|
234
|
-
return {
|
|
235
|
-
header: text.withdrawalSettingsInvalidHeader,
|
|
236
|
-
description: intl.formatMessage({
|
|
237
|
-
id: "accountReviewDescription",
|
|
238
|
-
defaultMessage: text.withdrawalSettingsInvalidDescription,
|
|
239
|
-
}, {
|
|
240
|
-
supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
|
|
241
|
-
}),
|
|
242
|
-
buttonText: text.editPaymentInformationButton,
|
|
243
|
-
alertType: "warning",
|
|
244
|
-
icon: "exclamation-triangle",
|
|
245
|
-
class: sheet.classes.WarningAlertContainer,
|
|
246
|
-
};
|
|
247
|
-
case "PAYMENT_RETURNED":
|
|
248
|
-
return {
|
|
249
|
-
header: text.paymentReturnedHeader,
|
|
250
|
-
description: intl.formatMessage({
|
|
251
|
-
id: "accountReviewDescription",
|
|
252
|
-
defaultMessage: text.paymentReturnedDescription,
|
|
253
|
-
}, {
|
|
254
|
-
supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
|
|
255
|
-
}),
|
|
256
|
-
buttonText: text.editPaymentInformationButton,
|
|
257
|
-
alertType: "warning",
|
|
258
|
-
icon: "exclamation-triangle",
|
|
259
|
-
class: sheet.classes.WarningAlertContainer,
|
|
260
|
-
};
|
|
261
177
|
case "HOLD":
|
|
262
178
|
return {
|
|
263
179
|
header: text.holdHeader,
|
|
@@ -291,8 +207,6 @@ export function PayoutStatusAlertView(props) {
|
|
|
291
207
|
case "VERIFICATION:REQUIRED":
|
|
292
208
|
return (h("sl-button", { type: "default", loading: states.veriffLoading, onClick: callbacks.onClick }, text.verificationRequiredButtonText));
|
|
293
209
|
default:
|
|
294
|
-
if (alertDetails.buttonText)
|
|
295
|
-
return (h("sl-button", { type: "default", onClick: callbacks.onPaymentInfoClick }, alertDetails.buttonText));
|
|
296
210
|
return;
|
|
297
211
|
}
|
|
298
212
|
}
|