@saasquatch/mint-components 1.12.0-9 → 1.12.1-1

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 (187) hide show
  1. package/dist/cjs/{ShadowViewAddon-040cffad.js → ShadowViewAddon-88821c64.js} +3 -6
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/mint-components.cjs.js +1 -1
  4. package/dist/cjs/sqm-banking-info-form_16.cjs.entry.js +79 -202
  5. package/dist/cjs/sqm-big-stat_39.cjs.entry.js +160 -281
  6. package/dist/cjs/{sqm-invoice-table-view-c58966f8.js → sqm-invoice-table-view-a9133a11.js} +0 -98
  7. package/dist/cjs/sqm-portal-registration-form-view-621348a6.js +85 -0
  8. package/dist/cjs/sqm-portal-registration-form.cjs.entry.js +12 -81
  9. package/dist/cjs/sqm-stencilbook.cjs.entry.js +323 -334
  10. package/dist/collection/collection-manifest.json +1 -6
  11. package/dist/collection/components/sqm-big-stat/useBigStat.js +3 -6
  12. package/dist/collection/components/sqm-checkbox-field/sqm-checkbox-field.js +5 -5
  13. package/dist/collection/components/sqm-marketing-emails-checkbox/MarketingEmailsCheckbox.stories.js +11 -0
  14. package/dist/collection/components/sqm-marketing-emails-checkbox/sqm-marketing-emails-checkbox.js +160 -0
  15. package/dist/collection/components/sqm-portal-registration-form/PortalRegistrationForm.stories.js +5 -1
  16. package/dist/collection/components/sqm-portal-registration-form/sqm-portal-registration-form-view.js +1 -1
  17. package/dist/collection/components/sqm-portal-registration-form/sqm-portal-registration-form.js +3 -2
  18. package/dist/collection/components/sqm-portal-registration-form/usePortalRegistrationForm.js +6 -0
  19. package/dist/collection/components/sqm-stencilbook/sqm-stencilbook.js +4 -8
  20. package/dist/collection/components/tax-and-cash/BankingForm.stories.js +0 -2
  21. package/dist/collection/components/tax-and-cash/TaxForm.stories.js +0 -96
  22. package/dist/collection/components/tax-and-cash/sqm-banking-info-form/sqm-banking-info-form.js +1 -5
  23. package/dist/collection/components/tax-and-cash/sqm-banking-info-form/useBankingInfoForm.js +38 -101
  24. package/dist/collection/components/tax-and-cash/sqm-docusign-form/docusign-iframe/DocusignIframe.js +2 -15
  25. package/dist/collection/components/tax-and-cash/sqm-tax-and-cash/data.js +0 -7
  26. package/dist/collection/components/tax-and-cash/sqm-tax-and-cash/sqm-tax-and-cash.js +8 -8
  27. package/dist/collection/components/tax-and-cash/sqm-tax-and-cash/useTaxAndCash.js +2 -2
  28. package/dist/collection/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard-view.js +0 -22
  29. package/dist/collection/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard.js +9 -99
  30. package/dist/collection/components/tax-and-cash/sqm-tax-and-cash-dashboard/useTaxAndCashDashboard.js +1 -8
  31. package/dist/collection/components/tax-and-cash/sqm-user-info-form/sqm-user-info-form-view.js +2 -2
  32. package/dist/collection/components/tax-and-cash/sqm-user-info-form/useUserInfoForm.js +11 -14
  33. package/dist/esm/{ShadowViewAddon-69b61037.js → ShadowViewAddon-65c8679e.js} +3 -6
  34. package/dist/esm/loader.js +1 -1
  35. package/dist/esm/mint-components.js +1 -1
  36. package/dist/esm/sqm-banking-info-form_16.entry.js +79 -202
  37. package/dist/esm/sqm-big-stat_39.entry.js +159 -280
  38. package/dist/esm/{sqm-invoice-table-view-d1cfdaf4.js → sqm-invoice-table-view-71915a5e.js} +0 -98
  39. package/dist/esm/sqm-portal-registration-form-view-1d3066e1.js +83 -0
  40. package/dist/esm/sqm-portal-registration-form.entry.js +18 -87
  41. package/dist/esm/sqm-stencilbook.entry.js +323 -334
  42. package/dist/esm/stencil-hooks.module-ac12ca1c.js +1 -1
  43. package/dist/esm-es5/ShadowViewAddon-65c8679e.js +1 -0
  44. package/dist/esm-es5/loader.js +1 -1
  45. package/dist/esm-es5/mint-components.js +1 -1
  46. package/dist/esm-es5/sqm-banking-info-form_16.entry.js +1 -1
  47. package/dist/esm-es5/sqm-big-stat_39.entry.js +1 -1
  48. package/dist/esm-es5/sqm-invoice-table-view-71915a5e.js +1 -0
  49. package/dist/esm-es5/sqm-portal-registration-form-view-1d3066e1.js +1 -0
  50. package/dist/esm-es5/sqm-portal-registration-form.entry.js +1 -1
  51. package/dist/esm-es5/sqm-stencilbook.entry.js +1 -1
  52. package/dist/esm-es5/stencil-hooks.module-ac12ca1c.js +1 -1
  53. package/dist/mint-components/mint-components.esm.js +1 -1
  54. package/dist/mint-components/p-1279f7a3.system.entry.js +1 -0
  55. package/dist/mint-components/p-15a64357.entry.js +13 -0
  56. package/dist/mint-components/p-17f56865.entry.js +9 -0
  57. package/dist/mint-components/p-2a414b2e.system.js +2 -2
  58. package/dist/mint-components/p-3cb18382.system.js +1 -0
  59. package/dist/mint-components/p-40b1de58.js +1 -0
  60. package/dist/mint-components/p-4112e198.system.js +1 -0
  61. package/dist/mint-components/p-5cd917db.js +1 -0
  62. package/dist/mint-components/p-6792c8d8.system.entry.js +1 -0
  63. package/dist/mint-components/p-a02afa72.system.js +1 -0
  64. package/dist/mint-components/p-acd77a6e.entry.js +223 -0
  65. package/dist/mint-components/p-b3e97f8a.system.entry.js +1 -0
  66. package/dist/mint-components/{p-9eae245f.js → p-b651706a.js} +3 -6
  67. package/dist/mint-components/p-b8233366.entry.js +174 -0
  68. package/dist/mint-components/p-ca809fdd.system.js +1 -1
  69. package/dist/mint-components/p-cb38b9b0.system.entry.js +1 -0
  70. package/dist/mint-components/p-fd2c5407.js +2 -2
  71. package/dist/types/components/sqm-checkbox-field/sqm-checkbox-field-view.d.ts +1 -1
  72. package/dist/types/components/sqm-checkbox-field/sqm-checkbox-field.d.ts +4 -4
  73. package/dist/types/components/sqm-marketing-emails-checkbox/MarketingEmailsCheckbox.stories.d.ts +8 -0
  74. package/dist/types/components/sqm-marketing-emails-checkbox/sqm-marketing-emails-checkbox.d.ts +34 -0
  75. package/dist/types/components/sqm-portal-registration-form/PortalRegistrationForm.stories.d.ts +1 -0
  76. package/dist/types/components/sqm-portal-registration-form/sqm-portal-registration-form-view.d.ts +1 -0
  77. package/dist/types/components/sqm-portal-registration-form/sqm-portal-registration-form.d.ts +1 -1
  78. package/dist/types/components/tax-and-cash/TaxForm.stories.d.ts +0 -2
  79. package/dist/types/components/tax-and-cash/sqm-banking-info-form/sqm-banking-info-form-view.d.ts +0 -2
  80. package/dist/types/components/tax-and-cash/sqm-docusign-form/useDocusignForm.d.ts +1 -1
  81. package/dist/types/components/tax-and-cash/sqm-tax-and-cash/data.d.ts +0 -6
  82. package/dist/types/components/tax-and-cash/sqm-tax-and-cash/sqm-tax-and-cash.d.ts +2 -2
  83. package/dist/types/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard-view.d.ts +0 -12
  84. package/dist/types/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard.d.ts +2 -19
  85. package/dist/types/components.d.ts +108 -625
  86. package/docs/docs.docx +0 -0
  87. package/docs/raisins.json +1 -1
  88. package/grapesjs/grapesjs.js +1 -1
  89. package/package.json +2 -2
  90. package/dist/cjs/extractProps-fd93ba62.js +0 -21
  91. package/dist/cjs/keys-cff24974.js +0 -11
  92. package/dist/cjs/sqm-code-verification.cjs.entry.js +0 -342
  93. package/dist/cjs/sqm-email-verification.cjs.entry.js +0 -283
  94. package/dist/cjs/sqm-scroll.cjs.entry.js +0 -109
  95. package/dist/cjs/sqm-widget-verification-internal.cjs.entry.js +0 -103
  96. package/dist/cjs/sqm-widget-verification.cjs.entry.js +0 -210
  97. package/dist/cjs/usePayoutStatus-b9fb7399.js +0 -70
  98. package/dist/cjs/useVerificationEmail-6aacdb71.js +0 -169
  99. package/dist/collection/components/sqm-payout-button-scroll/PayoutButtonScroll.stories.js +0 -8
  100. package/dist/collection/components/sqm-payout-button-scroll/sqm-payout-button-scroll-view.js +0 -23
  101. package/dist/collection/components/sqm-payout-button-scroll/sqm-payout-button-scroll.js +0 -118
  102. package/dist/collection/components/sqm-payout-button-scroll/usePayoutButton.js +0 -44
  103. package/dist/collection/components/sqm-widget-verification/keys.js +0 -4
  104. package/dist/collection/components/sqm-widget-verification/sqm-code-verification/WidgetCodeVerification.stories.js +0 -36
  105. package/dist/collection/components/sqm-widget-verification/sqm-code-verification/sqm-code-verification-view.js +0 -128
  106. package/dist/collection/components/sqm-widget-verification/sqm-code-verification/sqm-code-verification.js +0 -301
  107. package/dist/collection/components/sqm-widget-verification/sqm-code-verification/useCodeVerification.js +0 -153
  108. package/dist/collection/components/sqm-widget-verification/sqm-email-verification/WidgetEmailVerification.stories.js +0 -42
  109. package/dist/collection/components/sqm-widget-verification/sqm-email-verification/sqm-email-verification-view.js +0 -91
  110. package/dist/collection/components/sqm-widget-verification/sqm-email-verification/sqm-email-verification.js +0 -226
  111. package/dist/collection/components/sqm-widget-verification/sqm-email-verification/useEmailVerification.js +0 -126
  112. package/dist/collection/components/sqm-widget-verification/sqm-widget-verification-internal.js +0 -339
  113. package/dist/collection/components/sqm-widget-verification/sqm-widget-verification.js +0 -557
  114. package/dist/collection/components/sqm-widget-verification/useVerificationEmail.js +0 -165
  115. package/dist/collection/components/tax-and-cash/sqm-payout-status-alert/PayoutStatusAlert.stories.js +0 -22
  116. package/dist/collection/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert-view.js +0 -131
  117. package/dist/collection/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert.js +0 -354
  118. package/dist/collection/components/tax-and-cash/sqm-payout-status-alert/usePayoutStatus.js +0 -65
  119. package/dist/esm/extractProps-ae1afbb3.js +0 -19
  120. package/dist/esm/keys-db1897ae.js +0 -6
  121. package/dist/esm/sqm-code-verification.entry.js +0 -338
  122. package/dist/esm/sqm-email-verification.entry.js +0 -279
  123. package/dist/esm/sqm-scroll.entry.js +0 -105
  124. package/dist/esm/sqm-widget-verification-internal.entry.js +0 -99
  125. package/dist/esm/sqm-widget-verification.entry.js +0 -206
  126. package/dist/esm/usePayoutStatus-1a635054.js +0 -67
  127. package/dist/esm/useVerificationEmail-c32696ba.js +0 -167
  128. package/dist/esm-es5/ShadowViewAddon-69b61037.js +0 -1
  129. package/dist/esm-es5/extractProps-ae1afbb3.js +0 -1
  130. package/dist/esm-es5/keys-db1897ae.js +0 -1
  131. package/dist/esm-es5/sqm-code-verification.entry.js +0 -1
  132. package/dist/esm-es5/sqm-email-verification.entry.js +0 -1
  133. package/dist/esm-es5/sqm-invoice-table-view-d1cfdaf4.js +0 -1
  134. package/dist/esm-es5/sqm-scroll.entry.js +0 -1
  135. package/dist/esm-es5/sqm-widget-verification-internal.entry.js +0 -1
  136. package/dist/esm-es5/sqm-widget-verification.entry.js +0 -1
  137. package/dist/esm-es5/usePayoutStatus-1a635054.js +0 -1
  138. package/dist/esm-es5/useVerificationEmail-c32696ba.js +0 -1
  139. package/dist/mint-components/p-1712a9fd.entry.js +0 -11
  140. package/dist/mint-components/p-1e616d45.system.js +0 -1
  141. package/dist/mint-components/p-24092973.entry.js +0 -9
  142. package/dist/mint-components/p-26468242.js +0 -1
  143. package/dist/mint-components/p-331d060e.entry.js +0 -223
  144. package/dist/mint-components/p-3925bcd6.entry.js +0 -13
  145. package/dist/mint-components/p-39840341.js +0 -1
  146. package/dist/mint-components/p-4364001c.entry.js +0 -12
  147. package/dist/mint-components/p-4bd7a472.js +0 -1
  148. package/dist/mint-components/p-517224ef.js +0 -19
  149. package/dist/mint-components/p-5a23b560.system.entry.js +0 -1
  150. package/dist/mint-components/p-64491210.system.entry.js +0 -1
  151. package/dist/mint-components/p-8300d8c8.system.js +0 -1
  152. package/dist/mint-components/p-8bddb468.system.entry.js +0 -1
  153. package/dist/mint-components/p-9596e97c.system.entry.js +0 -1
  154. package/dist/mint-components/p-974070c4.system.entry.js +0 -1
  155. package/dist/mint-components/p-a85f57bb.entry.js +0 -1
  156. package/dist/mint-components/p-a8645c1b.system.js +0 -1
  157. package/dist/mint-components/p-b2a99637.system.js +0 -1
  158. package/dist/mint-components/p-b62faaa5.system.entry.js +0 -1
  159. package/dist/mint-components/p-c05e7b9f.entry.js +0 -195
  160. package/dist/mint-components/p-c510fb88.entry.js +0 -1
  161. package/dist/mint-components/p-c7057066.system.entry.js +0 -1
  162. package/dist/mint-components/p-d7806f31.js +0 -48
  163. package/dist/mint-components/p-e01ac27c.system.js +0 -1
  164. package/dist/mint-components/p-e45a8501.system.entry.js +0 -1
  165. package/dist/mint-components/p-e990dc21.system.js +0 -1
  166. package/dist/mint-components/p-ead27698.system.entry.js +0 -1
  167. package/dist/mint-components/p-f340214f.entry.js +0 -25
  168. package/dist/types/components/sqm-payout-button-scroll/PayoutButtonScroll.stories.d.ts +0 -5
  169. package/dist/types/components/sqm-payout-button-scroll/sqm-payout-button-scroll-view.d.ts +0 -10
  170. package/dist/types/components/sqm-payout-button-scroll/sqm-payout-button-scroll.d.ts +0 -26
  171. package/dist/types/components/sqm-payout-button-scroll/usePayoutButton.d.ts +0 -7
  172. package/dist/types/components/sqm-widget-verification/keys.d.ts +0 -4
  173. package/dist/types/components/sqm-widget-verification/sqm-code-verification/WidgetCodeVerification.stories.d.ts +0 -9
  174. package/dist/types/components/sqm-widget-verification/sqm-code-verification/sqm-code-verification-view.d.ts +0 -26
  175. package/dist/types/components/sqm-widget-verification/sqm-code-verification/sqm-code-verification.d.ts +0 -54
  176. package/dist/types/components/sqm-widget-verification/sqm-code-verification/useCodeVerification.d.ts +0 -25
  177. package/dist/types/components/sqm-widget-verification/sqm-email-verification/WidgetEmailVerification.stories.d.ts +0 -10
  178. package/dist/types/components/sqm-widget-verification/sqm-email-verification/sqm-email-verification-view.d.ts +0 -21
  179. package/dist/types/components/sqm-widget-verification/sqm-email-verification/sqm-email-verification.d.ts +0 -40
  180. package/dist/types/components/sqm-widget-verification/sqm-email-verification/useEmailVerification.d.ts +0 -10
  181. package/dist/types/components/sqm-widget-verification/sqm-widget-verification-internal.d.ts +0 -20
  182. package/dist/types/components/sqm-widget-verification/sqm-widget-verification.d.ts +0 -87
  183. package/dist/types/components/sqm-widget-verification/useVerificationEmail.d.ts +0 -14
  184. package/dist/types/components/tax-and-cash/sqm-payout-status-alert/PayoutStatusAlert.stories.d.ts +0 -10
  185. package/dist/types/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert-view.d.ts +0 -30
  186. package/dist/types/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert.d.ts +0 -62
  187. package/dist/types/components/tax-and-cash/sqm-payout-status-alert/usePayoutStatus.d.ts +0 -21
@@ -1,65 +0,0 @@
1
- import { getEnvironmentSDK, useQuery } from "@saasquatch/component-boilerplate";
2
- import { useState, useEffect } from "@saasquatch/stencil-hooks";
3
- import { gql } from "graphql-request";
4
- const GET_USER_STATUS = gql `
5
- query getUserStatus {
6
- user: viewer {
7
- ... on User {
8
- id
9
- impactConnection {
10
- connected
11
- publisher {
12
- id
13
- payoutsAccount {
14
- hold
15
- holdReasons
16
- }
17
- }
18
- }
19
- }
20
- }
21
- }
22
- `;
23
- export function getStatus(data) {
24
- var _a, _b, _c, _d, _e;
25
- const account = (_b = (_a = data.user.impactConnection) === null || _a === void 0 ? void 0 : _a.publisher) === null || _b === void 0 ? void 0 : _b.payoutsAccount;
26
- if (!((_d = (_c = data.user) === null || _c === void 0 ? void 0 : _c.impactConnection) === null || _d === void 0 ? void 0 : _d.connected) || !account)
27
- return "INFORMATION_REQUIRED";
28
- if ((_e = account.holdReasons) === null || _e === void 0 ? void 0 : _e.includes("IDV_CHECK_REQUIRED"))
29
- return "VERIFICATION_NEEDED";
30
- if (account.hold)
31
- return "HOLD";
32
- return "DONE";
33
- }
34
- export function usePayoutStatus(props) {
35
- const { type } = getEnvironmentSDK();
36
- const { loading, data, errors, refetch } = useQuery(GET_USER_STATUS, {});
37
- const [status, setStatus] = useState(undefined);
38
- const [showDialog, setShowDialog] = useState(false);
39
- useEffect(() => {
40
- if (!data)
41
- return;
42
- const s = getStatus(data);
43
- setStatus(s);
44
- }, [data]);
45
- useEffect(() => {
46
- const cb = () => refetch();
47
- window.addEventListener("sqm:tax-form-updated", cb);
48
- return () => window.removeEventListener("sqm:tax-form-updated", cb);
49
- }, []);
50
- return {
51
- states: {
52
- loading,
53
- status,
54
- showVerifyIdentity: showDialog,
55
- error: !!errors,
56
- },
57
- data: { type },
58
- text: props.getTextProps(),
59
- callbacks: {
60
- onTermsClick: () => window.open(props.termsUrl, "_blank").focus(),
61
- onClick: () => setShowDialog(true),
62
- onCancel: () => setShowDialog(false),
63
- },
64
- };
65
- }
@@ -1,19 +0,0 @@
1
- /**
2
- * Util function for getting just the props with a certain prefix.
3
- * @param props Text props on stencil component
4
- * @param prefix Prefix denoting which group the text prop belongs to
5
- * @returns A new object with all keys with the prefix provided. The prefix is removed from each key.
6
- */
7
- function extractProps(props, prefix) {
8
- const keys = Object.keys(props).filter((k) => k.startsWith(prefix));
9
- const formattedProps = keys.reduce((prev, k) => {
10
- const key = k.replace(prefix, "");
11
- return {
12
- ...prev,
13
- [key]: props[k],
14
- };
15
- }, {});
16
- return formattedProps;
17
- }
18
-
19
- export { extractProps as e };
@@ -1,6 +0,0 @@
1
- const SHOW_CODE_NAMESPACE = "sq:code-verification";
2
- const VERIFICATION_EMAIL_NAMESPACE = "sq:verification-email";
3
- const VERIFICATION_PARENT_NAMESPACE = "sq:verification-context";
4
- const VERIFICATION_EVENT_KEY = "sq:code-verified";
5
-
6
- export { SHOW_CODE_NAMESPACE as S, VERIFICATION_PARENT_NAMESPACE as V, VERIFICATION_EMAIL_NAMESPACE as a, VERIFICATION_EVENT_KEY as b };
@@ -1,338 +0,0 @@
1
- import { h, r as registerInstance } from './index-17b4da69.js';
2
- import { l, k as useState, f as useEffect, n as h$1 } from './stencil-hooks.module-ac12ca1c.js';
3
- import { i as intl } from './global-6306a9b8.js';
4
- import { d as dist, M as Mn, D as Dn, i as isDemo, S as Sn } from './index.module-6c840c4e.js';
5
- import { c as cjs } from './cjs-bdfb4486.js';
6
- import { E as ErrorStyles } from './mixins-f60a614c.js';
7
- import { c as createStyleSheet } from './JSS-67b5cff8.js';
8
- import { g as getProps } from './utils-334c1e34.js';
9
- import { T as TextSpanView } from './sqm-text-span-view-8d140661.js';
10
- import { a as VERIFICATION_EMAIL_NAMESPACE, S as SHOW_CODE_NAMESPACE, V as VERIFICATION_PARENT_NAMESPACE } from './keys-db1897ae.js';
11
- import { u as useVerificationEmail } from './useVerificationEmail-c32696ba.js';
12
-
13
- const style = {
14
- Wrapper: {
15
- display: "flex",
16
- flexDirection: "column",
17
- gap: "var(--sl-spacing-medium)",
18
- maxWidth: "515px",
19
- },
20
- HeaderContainer: {
21
- display: "flex",
22
- flexDirection: "column",
23
- },
24
- InputsContainer: {
25
- display: "flex",
26
- gap: "var(--sl-spacing-medium)",
27
- position: "relative",
28
- flexDirection: "column",
29
- },
30
- CodeInputContainer: {
31
- display: "flex",
32
- gap: "var(--sl-spacing-medium)",
33
- },
34
- CodeInput: {
35
- maxWidth: "40px",
36
- "&::part(input)": {
37
- margin: "0",
38
- padding: "0 var(--sl-input-spacing-small)",
39
- fontSize: "var(--sl-font-size-large)",
40
- },
41
- },
42
- CodeInputError: {
43
- ...ErrorStyles,
44
- maxWidth: "40px",
45
- "&::part(input)": {
46
- margin: "0",
47
- padding: "0 var(--sl-input-spacing-small)",
48
- fontSize: "var(--sl-font-size-large)",
49
- },
50
- },
51
- ErrorText: {
52
- color: "var(--sl-color-danger-500)",
53
- fontSize: "var(--sl-font-size-small)",
54
- margin: "0",
55
- },
56
- ContinueButton: {
57
- width: "100%",
58
- maxWidth: "100px",
59
- },
60
- FooterContainer: {
61
- display: "flex",
62
- flexDirection: "column",
63
- },
64
- SkeletonOne: {
65
- width: "50%",
66
- height: "16px",
67
- },
68
- SkeletonTwo: {
69
- width: "30%",
70
- height: "34px",
71
- },
72
- SkeletonThree: {
73
- width: "15%",
74
- height: "24px",
75
- },
76
- };
77
- const vanillaStyle = `
78
- :host {
79
- display: block;
80
- }
81
- :host([hidden]): {
82
- display: none;
83
- }
84
-
85
-
86
- `;
87
- const sheet = createStyleSheet(style);
88
- const styleString = sheet.toString();
89
- function WidgetCodeVerificationView(props) {
90
- const { states, refs, callbacks, text } = props;
91
- const resendCodeText = intl.formatMessage({
92
- id: "resendCodeText",
93
- defaultMessage: text.resendCodeText,
94
- }, {
95
- resendCodeLink: (h("a", { href: "", style: { textDecoration: "none" }, onClick: (e) => {
96
- e.preventDefault();
97
- callbacks.resendEmail();
98
- } }, text.resendCodeLabel)),
99
- });
100
- const codeResentSuccessfully = intl.formatMessage({
101
- id: "codeResentSuccessfully",
102
- defaultMessage: text.codeResentSuccessfullyText,
103
- }, {
104
- email: states.email,
105
- });
106
- const inputClass = states.verifyFailed
107
- ? sheet.classes.CodeInputError
108
- : sheet.classes.CodeInput;
109
- return (h("div", { part: "sqm-base" },
110
- h("style", { type: "text/css" },
111
- vanillaStyle,
112
- styleString),
113
- h("div", { class: sheet.classes.Wrapper },
114
- h("div", { class: sheet.classes.HeaderContainer },
115
- h(TextSpanView, { type: "p" }, intl.formatMessage({
116
- id: `emailHeaderText`,
117
- defaultMessage: states.verifyFailed
118
- ? text.reverifyCodeHeaderText
119
- : text.verifyCodeHeaderText,
120
- }, { email: states.email }))),
121
- states.emailResent && (h("sqm-form-message", { type: "success", exportparts: "successalert-icon" },
122
- h("b", null, codeResentSuccessfully))),
123
- h("div", { class: sheet.classes.InputsContainer },
124
- h("div", { ref: refs.codeWrapperRef, class: sheet.classes.CodeInputContainer },
125
- h("sl-input", { class: inputClass, name: "code" }),
126
- h("sl-input", { class: inputClass, name: "code" }),
127
- h("sl-input", { class: inputClass, name: "code" }),
128
- h("sl-input", { class: inputClass, name: "code" }),
129
- h("sl-input", { class: inputClass, name: "code" }),
130
- h("sl-input", { class: inputClass, name: "code" })),
131
- states.verifyFailed && (h("p", { class: sheet.classes.ErrorText }, text.invalidCodeText)),
132
- h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.submitCode, disabled: states.loading || states.initialiseLoading, loading: states.loading || states.initialiseLoading, exportparts: "base: primarybutton-base", type: "primary" }, text.verifyText)),
133
- h("div", { class: sheet.classes.FooterContainer },
134
- h(TextSpanView, { type: "p" }, resendCodeText)))));
135
- }
136
-
137
- const VerifyEmailWithCodeMutation = dist.gql `
138
- mutation submitImpactPublisherEmail2FACode(
139
- $user: UserIdInput!
140
- $code: String!
141
- ) {
142
- submitImpactPublisherEmail2FACode(user: $user, code: $code) {
143
- verifiedEmail
144
- accessKey
145
- }
146
- }
147
- `;
148
- function useWidgetCodeVerification(props) {
149
- const host = l();
150
- const [_, setShowCode] = Mn(SHOW_CODE_NAMESPACE);
151
- const email = Dn(VERIFICATION_EMAIL_NAMESPACE);
152
- const [emailSent, setEmailSent] = useState(false);
153
- const [emailResent, setEmailResent] = useState(false);
154
- const [codeRef, setCodeRef] = useState(null);
155
- const [validationError, setValidationError] = useState(false);
156
- const [emailError, setEmailError] = useState(false);
157
- const { initialized, send: [sendEmail, { loading: sendLoading, errors: sendErrors }], verify: [verifyEmail, { loading: verifyLoading, errors: verifyErrors }], } = useVerificationEmail();
158
- useEffect(() => {
159
- if (!codeRef)
160
- return;
161
- const slInputs = codeRef.querySelectorAll("sl-input");
162
- const codeElements = Array.from(slInputs).map((node) => node.shadowRoot.querySelector(`input[name="code"]`));
163
- codeElements.forEach((element, idx) => {
164
- element.addEventListener("focus", (e) => {
165
- e.target.select();
166
- });
167
- element.addEventListener("keydown", (e) => {
168
- if (e.key === "Backspace" && e.target.value === "") {
169
- codeElements[Math.max(0, idx - 1)].focus();
170
- }
171
- });
172
- element.addEventListener("input", (e) => {
173
- const input = e.data;
174
- if (!input)
175
- return;
176
- if (idx === codeElements.length - 1) {
177
- e.target.value = input.slice(-1);
178
- return;
179
- }
180
- if (input.length > 1) {
181
- const rest = input.slice(1);
182
- e.target.value = input.slice(0, 1);
183
- codeElements[idx + 1].dispatchEvent(new InputEvent("input", {
184
- inputType: "insertFromPaste",
185
- data: rest,
186
- }));
187
- }
188
- codeElements[idx + 1].focus();
189
- });
190
- });
191
- }, [codeRef]);
192
- const reset = () => {
193
- setShowCode(false);
194
- setValidationError(false);
195
- };
196
- const resendEmail = async () => {
197
- // UI should only allow this to be called if initialized, but checking just in case
198
- if (!initialized)
199
- return;
200
- const result = await sendEmail();
201
- if (!result) {
202
- setEmailError(true);
203
- return;
204
- }
205
- if (emailSent)
206
- setEmailResent(true);
207
- setEmailSent(true);
208
- };
209
- const submitCode = async () => {
210
- const slInputs = codeRef.querySelectorAll("sl-input");
211
- const codeElements = Array.from(slInputs).map((node) => node.shadowRoot.querySelector(`input[name="code"]`));
212
- if (codeElements.find((el) => !el.value)) {
213
- setValidationError(true);
214
- return;
215
- }
216
- let code = "";
217
- codeElements.forEach((element) => {
218
- code = `${code}${element.value}`;
219
- });
220
- // UI should only allow this to be called if initialized, but checking just in case
221
- if (!initialized)
222
- return;
223
- setValidationError(false);
224
- const res = await verifyEmail(code);
225
- if (res === null || res === void 0 ? void 0 : res.success) {
226
- props.onVerification(res.accessKey);
227
- reset();
228
- }
229
- else {
230
- setValidationError(true);
231
- }
232
- };
233
- useEffect(() => {
234
- // Wait for mutations to be determined from user lookup
235
- if (!initialized)
236
- return;
237
- // email should already exist if user has completed email-verification
238
- if (!email)
239
- resendEmail();
240
- else
241
- setEmailSent(true);
242
- }, [initialized]);
243
- return {
244
- refs: {
245
- codeWrapperRef: setCodeRef,
246
- },
247
- states: {
248
- email,
249
- emailResent,
250
- resendError: sendErrors || verifyErrors,
251
- initialiseLoading: !initialized,
252
- loading: sendLoading || verifyLoading,
253
- verifyFailed: !!validationError,
254
- },
255
- callbacks: {
256
- resendEmail,
257
- submitCode,
258
- },
259
- text: props.getTextProps(),
260
- };
261
- }
262
-
263
- const WidgetCodeVerification = class {
264
- constructor(hostRef) {
265
- registerInstance(this, hostRef);
266
- /**
267
- * @uiName Verify code widget header text
268
- */
269
- this.verifyCodeHeaderText = "Enter the code sent to {email} from our referral provider, impact.com.";
270
- /**
271
- * @uiName Reverify code widget header text
272
- */
273
- this.reverifyCodeHeaderText = "Enter the code sent to {email} from our referral provider, impact.com.";
274
- /**
275
- * Text displayed under verify button
276
- * @uiName Resend code text
277
- */
278
- this.resendCodeText = "Didn't receive your code? {resendCodeLink}";
279
- /**
280
- * The link that appears in the resend code link
281
- * @uiName Resend code label
282
- */
283
- this.resendCodeLabel = "Resend code";
284
- /**
285
- * Link text displayed under verify button
286
- * @uiName Resend code text
287
- */
288
- this.codeResentSuccessfullyText = "Another code has been sent to {email}";
289
- /**
290
- * Error text displayed under verification input
291
- * @uiName Invalid code text
292
- */
293
- this.invalidCodeText = "Please check your code and try again. If you’re still having trouble, try resending your code.";
294
- /**
295
- * @uiName Verify code button text
296
- */
297
- this.verifyText = "Verify";
298
- /**
299
- * Displayed when the email verification fails due to a network error. The participant can try refreshing the page.
300
- * @uiName Network error message
301
- */
302
- this.networkErrorMessage = "An error occurred while verifying your email. Please refresh the page and try again.";
303
- h$1(this);
304
- }
305
- disconnectedCallback() { }
306
- getTextProps() {
307
- return getProps(this);
308
- }
309
- render() {
310
- const props = isDemo()
311
- ? useDemoWidgetCodeVerification(this)
312
- : useWidgetCodeVerification(this);
313
- return h(WidgetCodeVerificationView, Object.assign({}, props));
314
- }
315
- };
316
- function useDemoWidgetCodeVerification(props) {
317
- const [emailResent, setEmailResent] = useState(false);
318
- const setVerifiedContext = Sn(VERIFICATION_PARENT_NAMESPACE);
319
- return cjs({
320
- states: {
321
- loading: false,
322
- email: "test@example.com",
323
- emailResent,
324
- resendError: true,
325
- verifyFailed: true,
326
- },
327
- refs: {
328
- codeWrapperRef: () => { },
329
- },
330
- callbacks: {
331
- resendEmail: async () => setEmailResent(true),
332
- submitCode: async () => setVerifiedContext(true),
333
- },
334
- text: props.getTextProps(),
335
- }, props.demoData || {}, { arrayMerge: (_, a) => a });
336
- }
337
-
338
- export { WidgetCodeVerification as sqm_code_verification };
@@ -1,279 +0,0 @@
1
- import { h, r as registerInstance } from './index-17b4da69.js';
2
- import { k as useState, f as useEffect, n as h$1 } from './stencil-hooks.module-ac12ca1c.js';
3
- import { d as dist, M as Mn, E as En, K, c as xe, i as isDemo, S as Sn } from './index.module-6c840c4e.js';
4
- import { c as cjs } from './cjs-bdfb4486.js';
5
- import { c as createStyleSheet } from './JSS-67b5cff8.js';
6
- import { g as getProps } from './utils-334c1e34.js';
7
- import { T as TextSpanView } from './sqm-text-span-view-8d140661.js';
8
- import { S as SHOW_CODE_NAMESPACE, a as VERIFICATION_EMAIL_NAMESPACE } from './keys-db1897ae.js';
9
- import { u as useVerificationEmail } from './useVerificationEmail-c32696ba.js';
10
-
11
- const UpsertUserEmailMutation = dist.gql `
12
- mutation upsertUser($userInput: UserInput!) {
13
- user(userInput: $userInput) {
14
- id
15
- accountId
16
- email
17
- }
18
- }
19
- `;
20
- const UserLookupQuery = dist.gql `
21
- query user {
22
- viewer {
23
- ... on User {
24
- id
25
- accountId
26
- email
27
- impactConnection {
28
- user {
29
- id
30
- email
31
- }
32
- }
33
- }
34
- }
35
- }
36
- `;
37
- function useUpsertUserEmail() {
38
- const user = K();
39
- const [request, { loading: loading, data, errors }] = xe(UpsertUserEmailMutation);
40
- const upsertUserEmail = async (email) => {
41
- try {
42
- const result = await request({
43
- user: {
44
- id: user.id,
45
- accountId: user.accountId,
46
- email,
47
- },
48
- });
49
- if (result instanceof Error || !result)
50
- throw new Error();
51
- return result;
52
- }
53
- catch (e) {
54
- console.error("Could not set email on user", e);
55
- return undefined;
56
- }
57
- };
58
- return [
59
- upsertUserEmail,
60
- {
61
- loading,
62
- data,
63
- errors,
64
- },
65
- ];
66
- }
67
- function useWidgetEmailVerification(props) {
68
- const [_, setShowCode] = Mn(SHOW_CODE_NAMESPACE);
69
- const [email, setEmail] = Mn(VERIFICATION_EMAIL_NAMESPACE);
70
- const [emailExists, setEmailExists] = useState(false);
71
- const [error, setError] = useState(false);
72
- const [mutationError, setMutationError] = useState(false);
73
- const { initialized, send: [sendEmail, { loading: sendLoading, errors }], } = useVerificationEmail();
74
- const [upsertUserEmail] = useUpsertUserEmail();
75
- const [loading, setLoading] = useState(true);
76
- const { data, loading: initialLoading } = En(UserLookupQuery, {});
77
- const emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
78
- useEffect(() => {
79
- if (!(data === null || data === void 0 ? void 0 : data.viewer))
80
- return;
81
- setEmailExists(!!data.viewer.email);
82
- }, [data]);
83
- useEffect(() => {
84
- if (initialized)
85
- setLoading(false);
86
- }, [initialized]);
87
- const submitEmail = async (e) => {
88
- e.preventDefault();
89
- if (!(data === null || data === void 0 ? void 0 : data.viewer))
90
- return;
91
- setLoading(true);
92
- const toAddress = data.viewer.email;
93
- if (!toAddress) {
94
- // If no email on the user, set one
95
- const formData = e.detail.formData;
96
- const newEmail = formData.get("email").toString();
97
- if (!emailRegex.test(newEmail)) {
98
- setError(true);
99
- return;
100
- }
101
- const result = await upsertUserEmail(newEmail);
102
- if (!result || !result.user.email)
103
- setError(true);
104
- }
105
- // UI should not allow this call til initialisation is done
106
- if (!initialized)
107
- return;
108
- const result = await sendEmail();
109
- if (!result || !result.success)
110
- setMutationError(true);
111
- else {
112
- // This is used to let the code verification widget know an email was already sent
113
- setEmail(toAddress);
114
- setShowCode(true);
115
- }
116
- setLoading(false);
117
- };
118
- return {
119
- callbacks: {
120
- submitEmail,
121
- },
122
- states: {
123
- loading,
124
- initialLoading: initialLoading && !initialized,
125
- error,
126
- email: data === null || data === void 0 ? void 0 : data.viewer.email,
127
- sendCodeError: mutationError,
128
- },
129
- text: props.getTextProps(),
130
- };
131
- }
132
-
133
- const style = {
134
- Wrapper: {
135
- display: "flex",
136
- flexDirection: "column",
137
- gap: "var(--sl-spacing-medium)",
138
- marginTop: "var(--sl-spacing-medium)",
139
- },
140
- InputsContainer: {
141
- display: "flex",
142
- gap: "var(--sl-spacing-medium)",
143
- position: "relative",
144
- flexDirection: "column",
145
- maxWidth: "320px",
146
- },
147
- ErrorAlertContainer: {
148
- "&::part(base)": {
149
- backgroundColor: "var(--sl-color-red-100)",
150
- borderTop: "none",
151
- },
152
- "&::part(message)": {
153
- display: "flex",
154
- flexDirection: "column",
155
- },
156
- },
157
- ContinueButton: {
158
- width: "100%",
159
- maxWidth: "100px",
160
- },
161
- SkeletonOne: {
162
- width: "50%",
163
- height: "16px",
164
- },
165
- SkeletonTwo: {
166
- width: "30%",
167
- height: "34px",
168
- },
169
- SkeletonThree: {
170
- width: "15%",
171
- height: "24px",
172
- },
173
- ErrorInput: {
174
- "&::part(base)": {
175
- border: "1px solid var(--sl-color-danger-500)",
176
- borderRadius: "var(--sl-input-border-radius-medium)",
177
- },
178
- "&::part(help-text)": {
179
- color: "var(--sl-color-danger-500)",
180
- },
181
- },
182
- };
183
- const vanillaStyle = `
184
- :host {
185
- display: block;
186
- }
187
- :host([hidden]): {
188
- display: none;
189
- }
190
- `;
191
- const sheet = createStyleSheet(style);
192
- const styleString = sheet.toString();
193
- function WidgetEmailVerificationView(props) {
194
- const { states, callbacks, text } = props;
195
- const renderLoadingSkeleton = () => {
196
- return (h("div", { class: sheet.classes.Wrapper },
197
- h("sl-skeleton", { class: sheet.classes.SkeletonOne }),
198
- h("sl-skeleton", { class: sheet.classes.SkeletonTwo }),
199
- h("sl-skeleton", { class: sheet.classes.SkeletonThree })));
200
- };
201
- return (h("div", { part: "sqm-base" },
202
- h("style", { type: "text/css" },
203
- vanillaStyle,
204
- styleString),
205
- states.sendCodeError && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", class: sheet.classes.ErrorAlertContainer, open: true },
206
- h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
207
- h("b", null, text.sendCodeErrorHeader),
208
- text.sendCodeErrorDescription)),
209
- states.initialLoading ? (renderLoadingSkeleton()) : (h("div", { class: sheet.classes.Wrapper },
210
- h(TextSpanView, { type: "p" }, text.verifyEmailHeaderText),
211
- h("sl-form", { "onSl-submit": callbacks.submitEmail },
212
- h("div", { class: sheet.classes.InputsContainer },
213
- h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", label: text.emailLabel, value: states.email, type: "email", id: "email", name: "email", disabled: !!states.email || states.loading }, (states.error
214
- ? {
215
- class: sheet.classes.ErrorInput,
216
- helpText: text.emailValidationErrorText,
217
- }
218
- : {}))),
219
- h("sl-button", { submit: true, class: sheet.classes.ContinueButton, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, text.sendCodeText)))))));
220
- }
221
-
222
- const WidgetEmailVerification = class {
223
- constructor(hostRef) {
224
- registerInstance(this, hostRef);
225
- /**
226
- * @uiName Verify email widget header text
227
- */
228
- this.verifyEmailHeaderText = "Start by verifying your email. We’ll send you a code through our referral provider, impact.com.";
229
- /**
230
- * @uiName Send code to email alert header
231
- */
232
- this.sendCodeErrorHeader = "There was an error sending your code.";
233
- /**
234
- * @uiName Send code to email alert description
235
- */
236
- this.sendCodeErrorDescription = "Please try again. If this problem continues, contact our program support team.";
237
- /**
238
- * @uiName Email input label
239
- */
240
- this.emailLabel = "Email";
241
- /**
242
- * @uiName Send code button text
243
- */
244
- this.sendCodeText = "Send code";
245
- /**
246
- * @uiName Send code button text
247
- */
248
- this.emailValidationErrorText = "Please enter a valid email";
249
- h$1(this);
250
- }
251
- disconnectedCallback() { }
252
- getTextProps() {
253
- return getProps(this);
254
- }
255
- render() {
256
- const props = isDemo()
257
- ? useDemoWidgetEmailVerification(this)
258
- : useWidgetEmailVerification(this);
259
- return h(WidgetEmailVerificationView, Object.assign({}, props));
260
- }
261
- };
262
- function useDemoWidgetEmailVerification(props) {
263
- const setShowCode = Sn(SHOW_CODE_NAMESPACE);
264
- return cjs({
265
- states: {
266
- error: true,
267
- initialLoading: false,
268
- loading: false,
269
- email: "test@example.com",
270
- sendCodeError: true,
271
- },
272
- callbacks: {
273
- submitEmail: async () => setShowCode(true),
274
- },
275
- text: props.getTextProps(),
276
- }, props.demoData || {}, { arrayMerge: (_, a) => a });
277
- }
278
-
279
- export { WidgetEmailVerification as sqm_email_verification };