@saasquatch/mint-components 1.12.0-15 → 1.12.0-20

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 (96) hide show
  1. package/dist/cjs/loader.cjs.js +1 -1
  2. package/dist/cjs/mint-components.cjs.js +1 -1
  3. package/dist/cjs/{sqm-banking-info-form_16.cjs.entry.js → sqm-banking-info-form_17.cjs.entry.js} +443 -91
  4. package/dist/cjs/sqm-big-stat_39.cjs.entry.js +2 -2
  5. package/dist/cjs/sqm-empty_4.cjs.entry.js +1 -1
  6. package/dist/cjs/{sqm-invoice-table-view-b0602970.js → sqm-invoice-table-view-4fcf021f.js} +1 -0
  7. package/dist/cjs/sqm-stencilbook.cjs.entry.js +43 -8
  8. package/dist/cjs/sqm-widget-verification-controller.cjs.entry.js +113 -0
  9. package/dist/cjs/sqm-widget-verification.cjs.entry.js +86 -108
  10. package/dist/collection/collection-manifest.json +1 -1
  11. package/dist/collection/components/sqm-payout-button-scroll/sqm-payout-button-scroll-view.js +2 -2
  12. package/dist/collection/components/sqm-text/sqm-text.js +1 -1
  13. package/dist/collection/components/sqm-widget-verification/sqm-email-verification/WidgetEmailVerification.stories.js +22 -6
  14. package/dist/collection/components/sqm-widget-verification/sqm-widget-verification-controller.js +120 -0
  15. package/dist/collection/components/sqm-widget-verification/sqm-widget-verification.js +95 -125
  16. package/dist/collection/components/tax-and-cash/BankingForm.stories.js +17 -0
  17. package/dist/collection/components/tax-and-cash/TaxForm.stories.js +1 -0
  18. package/dist/collection/components/tax-and-cash/sqm-banking-info-form/sqm-banking-info-form.js +71 -5
  19. package/dist/collection/components/tax-and-cash/sqm-banking-info-form/useBankingInfoForm.js +2 -1
  20. package/dist/esm/{keys-db1897ae.js → keys-406491dc.js} +1 -1
  21. package/dist/esm/loader.js +1 -1
  22. package/dist/esm/mint-components.js +1 -1
  23. package/dist/esm/{sqm-banking-info-form_16.entry.js → sqm-banking-info-form_17.entry.js} +445 -94
  24. package/dist/esm/sqm-big-stat_39.entry.js +2 -2
  25. package/dist/esm/sqm-email-verification.entry.js +1 -1
  26. package/dist/esm/sqm-empty_4.entry.js +1 -1
  27. package/dist/esm/{sqm-invoice-table-view-b1ac1bfc.js → sqm-invoice-table-view-b3127605.js} +1 -0
  28. package/dist/esm/sqm-stencilbook.entry.js +43 -8
  29. package/dist/esm/sqm-widget-verification-controller.entry.js +109 -0
  30. package/dist/esm/sqm-widget-verification.entry.js +90 -112
  31. package/dist/esm-es5/{keys-db1897ae.js → keys-406491dc.js} +1 -1
  32. package/dist/esm-es5/loader.js +1 -1
  33. package/dist/esm-es5/mint-components.js +1 -1
  34. package/dist/esm-es5/sqm-banking-info-form_17.entry.js +1 -0
  35. package/dist/esm-es5/sqm-big-stat_39.entry.js +1 -1
  36. package/dist/esm-es5/sqm-email-verification.entry.js +1 -1
  37. package/dist/esm-es5/sqm-empty_4.entry.js +1 -1
  38. package/dist/esm-es5/sqm-invoice-table-view-b3127605.js +1 -0
  39. package/dist/esm-es5/sqm-stencilbook.entry.js +1 -1
  40. package/dist/esm-es5/sqm-widget-verification-controller.entry.js +1 -0
  41. package/dist/esm-es5/sqm-widget-verification.entry.js +1 -1
  42. package/dist/mint-components/mint-components.esm.js +1 -1
  43. package/dist/mint-components/{p-e11b605d.entry.js → p-021ccc29.entry.js} +1 -1
  44. package/dist/mint-components/{p-158568e5.system.entry.js → p-0a94fe9f.system.entry.js} +1 -1
  45. package/dist/mint-components/p-156e37c2.system.entry.js +1 -0
  46. package/dist/mint-components/{p-c58250e6.system.entry.js → p-2c342de3.system.entry.js} +1 -1
  47. package/dist/mint-components/p-3007fb7d.system.entry.js +1 -0
  48. package/dist/mint-components/p-38c7775a.js +1 -0
  49. package/dist/mint-components/{p-a8e79cad.entry.js → p-478a3755.entry.js} +2 -2
  50. package/dist/mint-components/p-57dd28bd.system.js +1 -0
  51. package/dist/mint-components/{p-9ec008cb.system.entry.js → p-70af9ba2.system.entry.js} +1 -1
  52. package/dist/mint-components/p-97c92e75.entry.js +16 -0
  53. package/dist/mint-components/p-9bd417fd.entry.js +1 -0
  54. package/dist/mint-components/{p-a5c96f2a.entry.js → p-a954c299.entry.js} +21 -11
  55. package/dist/mint-components/p-c1fa5e04.system.js +1 -0
  56. package/dist/mint-components/p-ca809fdd.system.js +1 -1
  57. package/dist/mint-components/p-cb55d3c4.system.entry.js +1 -0
  58. package/dist/mint-components/{p-4671e644.entry.js → p-cd200c95.entry.js} +1 -1
  59. package/dist/mint-components/p-d4877a65.system.entry.js +1 -0
  60. package/dist/mint-components/p-f1184442.js +1 -0
  61. package/dist/mint-components/{p-fc17c2d2.entry.js → p-f196d71a.entry.js} +11 -11
  62. package/dist/types/components/sqm-widget-verification/sqm-email-verification/WidgetEmailVerification.stories.d.ts +1 -0
  63. package/dist/types/components/sqm-widget-verification/sqm-widget-verification-controller.d.ts +12 -0
  64. package/dist/types/components/sqm-widget-verification/sqm-widget-verification.d.ts +3 -4
  65. package/dist/types/components/tax-and-cash/BankingForm.stories.d.ts +1 -0
  66. package/dist/types/components/tax-and-cash/sqm-banking-info-form/sqm-banking-info-form-view.d.ts +3 -0
  67. package/dist/types/components/tax-and-cash/sqm-banking-info-form/sqm-banking-info-form.d.ts +9 -0
  68. package/dist/types/components/tax-and-cash/sqm-tax-and-cash/extractProps.d.ts +5 -1
  69. package/dist/types/components/tax-and-cash/sqm-tax-and-cash/sqm-tax-and-cash.d.ts +1 -1
  70. package/dist/types/components.d.ts +27 -37
  71. package/docs/docs.docx +0 -0
  72. package/docs/raisins.json +1 -1
  73. package/grapesjs/grapesjs.js +1 -1
  74. package/package.json +1 -1
  75. package/dist/cjs/sqm-code-verification.cjs.entry.js +0 -342
  76. package/dist/cjs/sqm-widget-verification-internal.cjs.entry.js +0 -109
  77. package/dist/collection/components/sqm-widget-verification/sqm-widget-verification-internal.js +0 -345
  78. package/dist/esm/sqm-code-verification.entry.js +0 -338
  79. package/dist/esm/sqm-widget-verification-internal.entry.js +0 -105
  80. package/dist/esm-es5/sqm-banking-info-form_16.entry.js +0 -1
  81. package/dist/esm-es5/sqm-code-verification.entry.js +0 -1
  82. package/dist/esm-es5/sqm-invoice-table-view-b1ac1bfc.js +0 -1
  83. package/dist/esm-es5/sqm-widget-verification-internal.entry.js +0 -1
  84. package/dist/mint-components/p-02892b2a.entry.js +0 -11
  85. package/dist/mint-components/p-03e1ac96.system.entry.js +0 -1
  86. package/dist/mint-components/p-2584baa5.entry.js +0 -16
  87. package/dist/mint-components/p-39840341.js +0 -1
  88. package/dist/mint-components/p-7789349d.system.js +0 -1
  89. package/dist/mint-components/p-8fa2809f.system.entry.js +0 -1
  90. package/dist/mint-components/p-9596e97c.system.entry.js +0 -1
  91. package/dist/mint-components/p-9e788a1a.js +0 -1
  92. package/dist/mint-components/p-b2a99637.system.js +0 -1
  93. package/dist/mint-components/p-b99108a6.system.entry.js +0 -1
  94. package/dist/mint-components/p-bfd92031.system.entry.js +0 -1
  95. package/dist/mint-components/p-c510fb88.entry.js +0 -1
  96. package/dist/types/components/sqm-widget-verification/sqm-widget-verification-internal.d.ts +0 -20
@@ -1720,7 +1720,7 @@ NavigationMenu.style = sqmNavigationMenuCss;
1720
1720
  const style$2 = {
1721
1721
  Wrapper: {
1722
1722
  maxWidth: "200px",
1723
- border: "1px solid black",
1723
+ marginLeft: "auto",
1724
1724
  },
1725
1725
  PayoutButtonDescription: {
1726
1726
  color: "var(--sl-color-neutral-500)",
@@ -1734,7 +1734,7 @@ function PayoutButtonScrollView(props) {
1734
1734
  const { text, states } = props;
1735
1735
  if (!states.payoutSettingsComplete)
1736
1736
  return h$1("div", null);
1737
- return (h$1("div", { part: "sqm-base", class: sheet$2.classes.Wrapper },
1737
+ return (h$1("div", { class: sheet$2.classes.Wrapper },
1738
1738
  h$1("style", { type: "text/css" }, styleString$2),
1739
1739
  h$1("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.payoutButtonText, "scroll-animation": "smooth" }),
1740
1740
  h$1("p", { class: sheet$2.classes.PayoutButtonDescription }, text.payoutButtonDescription)));
@@ -6,7 +6,7 @@ import { c as cjs } from './cjs-bdfb4486.js';
6
6
  import { c as createStyleSheet } from './JSS-67b5cff8.js';
7
7
  import { g as getProps } from './utils-334c1e34.js';
8
8
  import { T as TextSpanView } from './sqm-text-span-view-8d140661.js';
9
- import { S as SHOW_CODE_NAMESPACE, a as VERIFICATION_EMAIL_NAMESPACE } from './keys-db1897ae.js';
9
+ import { S as SHOW_CODE_NAMESPACE, V as VERIFICATION_EMAIL_NAMESPACE } from './keys-406491dc.js';
10
10
  import { u as useVerificationEmail } from './useVerificationEmail-2a21d0e3.js';
11
11
 
12
12
  const UpsertUserEmailMutation = dist.gql `
@@ -117,7 +117,7 @@ const vanillaStyle = `
117
117
 
118
118
  sqm-text h4 {
119
119
  font-size: var(--sl-font-size-large);
120
- font-weight: var(--sl-font-weight-semibold);
120
+ font-weight: var(--sl-font-weight-bold);
121
121
  color: var(--sl-color-neutral-800);
122
122
  margin: 0;
123
123
  }
@@ -707,6 +707,7 @@ const stepFourProps = {
707
707
  saveDisabled: false,
708
708
  thresholds: [],
709
709
  loadingError: false,
710
+ email: "test@example.com",
710
711
  formState: {
711
712
  paymentMethodChecked: "toBankAccount",
712
713
  },
@@ -26,7 +26,7 @@ import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-7
26
26
  import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-d7ea2c56.js';
27
27
  import { S as ShareButtonView, L as LeaderboardView, C as CopyTextView, B as BigStatView, P as PortalFrameView, E as EditProfileView, u as useShareLink, a as useShareButton, b as useDemoBigStat, c as StatContainerView, d as PortalChangePasswordView, e as PortalLoginView, f as PortalRegisterView, T as TaskCardView, g as ProgressBarView, h as PoweredByImg$1, i as PortalFooterView, H as HeroView, R as ReferralIframeView, N as NameFieldsView, j as CheckboxFieldView, D as DropdownFieldView, I as InputFieldView, k as RewardExchangeView, r as rewardExchangeCustomErrorMsg, l as rewardExchangeLongText, m as rewardExchangeSelected, n as chooseAmountFixed, o as chooseAmountFixedNoDescription, p as chooseAmountVariable, q as chooseAmountVariableNoDescription, s as chooseAmountVariableDisabled, t as chooseAmountVariableUnavailable, v as confirmFixed, w as confirmVariable, x as redemptionError, y as queryError, z as success, A as successVariable, F as loading, G as empty$1, J as rewardExchange, K as CardFeedView, M as CouponCodeView, O as ProgressBar$2, Q as autoColorScaleCss, U as ShadowViewAddon } from './ShadowViewAddon-69b61037.js';
28
28
  import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-6c582684.js';
29
- import { O as OtherRegionSlotView, I as InvoiceTableView, T as TaxForm } from './sqm-invoice-table-view-b1ac1bfc.js';
29
+ import { O as OtherRegionSlotView, I as InvoiceTableView, T as TaxForm } from './sqm-invoice-table-view-b3127605.js';
30
30
 
31
31
  /**
32
32
  * lodash (Custom Build) <https://lodash.com/>
@@ -14413,6 +14413,7 @@ const bankingFormProps = {
14413
14413
  thresholds: [],
14414
14414
  currency: "USD",
14415
14415
  loadingError: false,
14416
+ email: "test@example.com",
14416
14417
  },
14417
14418
  callbacks: {
14418
14419
  onVerificationHide: () => { },
@@ -14726,6 +14727,22 @@ const BankingInfoFormWithFixedDayPaymentScheduleLoading = () => {
14726
14727
  },
14727
14728
  } }));
14728
14729
  };
14730
+ const BankingInfoFormVerififyIdentityModal = () => {
14731
+ return (h("sqm-banking-info-form", { demoData: {
14732
+ ...bankingFormProps,
14733
+ states: {
14734
+ ...bankingFormProps.states,
14735
+ isPartner: true,
14736
+ showVerification: true,
14737
+ formState: {
14738
+ ...bankingFormProps.states.formState,
14739
+ bankCountry: "US",
14740
+ paymentScheduleChecked: "FIXED_DAY",
14741
+ },
14742
+ currency: "USD",
14743
+ },
14744
+ } }));
14745
+ };
14729
14746
 
14730
14747
  const BankingInfoForm = /*#__PURE__*/Object.freeze({
14731
14748
  __proto__: null,
@@ -14751,7 +14768,8 @@ const BankingInfoForm = /*#__PURE__*/Object.freeze({
14751
14768
  BankingInfoFormWithBalanceThresholdPaymentScheduleLoading: BankingInfoFormWithBalanceThresholdPaymentScheduleLoading,
14752
14769
  BankingInfoFormWithFixedDayPaymentSchedule: BankingInfoFormWithFixedDayPaymentSchedule,
14753
14770
  BankingInfoFormWithFixedDayPaymentScheduleWithError: BankingInfoFormWithFixedDayPaymentScheduleWithError,
14754
- BankingInfoFormWithFixedDayPaymentScheduleLoading: BankingInfoFormWithFixedDayPaymentScheduleLoading
14771
+ BankingInfoFormWithFixedDayPaymentScheduleLoading: BankingInfoFormWithFixedDayPaymentScheduleLoading,
14772
+ BankingInfoFormVerififyIdentityModal: BankingInfoFormVerififyIdentityModal
14755
14773
  });
14756
14774
 
14757
14775
  const InvoiceTableCell_stories = {
@@ -15010,12 +15028,17 @@ const defaultProps$k = {
15010
15028
  sendCodeError: false,
15011
15029
  };
15012
15030
  const Default$i = () => (h("sqm-email-verification", { demoData: {} }));
15013
- const EmailIsPrefilled = () => (h("sqm-email-verification", { demoData: {
15014
- states: {
15015
- ...defaultProps$k,
15016
- email: "test@example.com",
15017
- },
15018
- } }));
15031
+ const EmailIsPrefilled = () => (h("div", null,
15032
+ h("sqm-text", null,
15033
+ h("h4", null, "Verify your email")),
15034
+ h("sqm-text", null,
15035
+ h("sub", null, "To get your cash paid out directly to your bank account, please complete your account setup")),
15036
+ h("sqm-email-verification", { demoData: {
15037
+ states: {
15038
+ ...defaultProps$k,
15039
+ email: "test@example.com",
15040
+ },
15041
+ } })));
15019
15042
  const Loading$7 = () => (h("sqm-email-verification", { demoData: {
15020
15043
  states: {
15021
15044
  ...defaultProps$k,
@@ -15028,6 +15051,17 @@ const SaveLoading = () => (h("sqm-email-verification", { demoData: {
15028
15051
  loading: true,
15029
15052
  },
15030
15053
  } }));
15054
+ const WithHeader$1 = () => (h("div", null,
15055
+ h("sqm-text", null,
15056
+ h("h4", null, "Verify your email")),
15057
+ h("sqm-text", null,
15058
+ h("sub", null, "To get your cash paid out directly to your bank account, please complete your account setup")),
15059
+ h("sqm-email-verification", { demoData: {
15060
+ states: {
15061
+ ...defaultProps$k,
15062
+ email: "test@example.com",
15063
+ },
15064
+ } })));
15031
15065
  const InvalidEmail = () => (h("sqm-email-verification", { demoData: {
15032
15066
  states: {
15033
15067
  ...defaultProps$k,
@@ -15048,6 +15082,7 @@ const WidgetEmailVerification = /*#__PURE__*/Object.freeze({
15048
15082
  EmailIsPrefilled: EmailIsPrefilled,
15049
15083
  Loading: Loading$7,
15050
15084
  SaveLoading: SaveLoading,
15085
+ WithHeader: WithHeader$1,
15051
15086
  InvalidEmail: InvalidEmail,
15052
15087
  SendCodeError: SendCodeError
15053
15088
  });
@@ -0,0 +1,109 @@
1
+ import { r as registerInstance, h as h$1, c as Host } from './index-17b4da69.js';
2
+ import { b as browser, n as h, k as useState, f as useEffect } from './stencil-hooks.module-ac12ca1c.js';
3
+ import { F as Fn, b as useCallback } from './index.module-6c840c4e.js';
4
+ import { a as VERIFICATION_PARENT_NAMESPACE } from './keys-406491dc.js';
5
+
6
+ const debug = browser("sq:widget-verification");
7
+ function useTemplateChildren({ parent, callback }) {
8
+ const parentObserver = new MutationObserver(listenForTemplateChanges);
9
+ const childTemplateObserver = new MutationObserver(callback);
10
+ parentObserver.observe(parent, {
11
+ childList: true,
12
+ // We only care about immediate children templates
13
+ subtree: false,
14
+ });
15
+ listenForTemplateChanges({ addedNodes: parent.querySelectorAll("template") });
16
+ function listenForTemplateChanges(mutationList) {
17
+ var _a;
18
+ // Be smart, only look at the mutation list
19
+ (_a = mutationList.addedNodes) === null || _a === void 0 ? void 0 : _a.forEach((t) => {
20
+ childTemplateObserver.observe(t.content, {
21
+ childList: true,
22
+ attributes: true,
23
+ // Look deep into the templates for re-rendering
24
+ subtree: true,
25
+ });
26
+ });
27
+ }
28
+ return () => {
29
+ parentObserver.disconnect();
30
+ childTemplateObserver.disconnect();
31
+ };
32
+ }
33
+ const WidgetVerificationController = class {
34
+ constructor(hostRef) {
35
+ registerInstance(this, hostRef);
36
+ h(this);
37
+ }
38
+ disconnectedCallback() { }
39
+ render() {
40
+ const [context, setContext] = Fn({
41
+ namespace: VERIFICATION_PARENT_NAMESPACE,
42
+ initialValue: false,
43
+ });
44
+ const [container, setContainer] = useState(undefined);
45
+ const [slot, setSlot] = useState(undefined);
46
+ const updateTemplates = useCallback(() => {
47
+ const isAuth = context;
48
+ const templates = slot.querySelectorAll(`template`);
49
+ const template = Array.from(templates).find((t) => t.slot === (isAuth ? "verified" : "not-verified"));
50
+ if (template) {
51
+ // use outerHTML if template's innerHTML is unset (only happens in Stencilbook)
52
+ const newContent = template.innerHTML || template.firstElementChild.outerHTML;
53
+ // if template contents are an exact match
54
+ if (newContent === container.innerHTML) {
55
+ debug("don't rerender");
56
+ }
57
+ else if (template) {
58
+ container.innerHTML = newContent;
59
+ }
60
+ }
61
+ const plopTargets = Array.from(slot.children).filter((el) => el.tagName === "RAISINS-PLOP-TARGET");
62
+ // if editing in raisins
63
+ if (plopTargets.length) {
64
+ const loggedInPlopTargets = plopTargets.filter((el) => el.slot === "verified");
65
+ const loggedOutPlopTargets = plopTargets.filter((el) => el.slot === "not-verified");
66
+ loggedOutPlopTargets.forEach((target, i) => {
67
+ if (isAuth) {
68
+ target.style.display = "none";
69
+ return;
70
+ }
71
+ // Place last plop target at the bottom of the parent
72
+ if (i === loggedOutPlopTargets.length - 1) {
73
+ target.style.bottom = "0px";
74
+ target.style.left = "0px";
75
+ target.style.right = "0px";
76
+ target.style.position = "absolute";
77
+ }
78
+ target.style.height = "25px";
79
+ });
80
+ loggedInPlopTargets.forEach((target, i) => {
81
+ if (!isAuth) {
82
+ target.style.display = "none";
83
+ return;
84
+ }
85
+ // Place last plop target at the bottom of the parent
86
+ if (i === loggedInPlopTargets.length - 1) {
87
+ target.style.bottom = "0px";
88
+ target.style.left = "0px";
89
+ target.style.right = "0px";
90
+ target.style.position = "absolute";
91
+ }
92
+ target.style.height = "25px";
93
+ });
94
+ }
95
+ }, [container, slot, context]);
96
+ useEffect(() => {
97
+ if (!container || !slot) {
98
+ debug("DOM not ready:");
99
+ return;
100
+ }
101
+ // Run on first render
102
+ updateTemplates();
103
+ return useTemplateChildren({ parent: slot, callback: updateTemplates });
104
+ }, [slot, container, context]);
105
+ return (h$1(Host, null, h$1("div", { ref: setSlot, style: { display: "contents" } }, h$1("slot", { name: "not-verified" }), h$1("slot", { name: "verified" })), h$1("div", { ref: setContainer }, h$1("slot", { name: "shown" }))));
106
+ }
107
+ };
108
+
109
+ export { WidgetVerificationController as sqm_widget_verification_controller };
@@ -1,46 +1,72 @@
1
- import { r as registerInstance, h as h$1, c as Host } from './index-17b4da69.js';
2
- import { b as browser, n as h, k as useState, f as useEffect } from './stencil-hooks.module-ac12ca1c.js';
3
- import { F as Fn, b as useCallback } from './index.module-6c840c4e.js';
1
+ import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
2
+ import { n as h, k as useState, f as useEffect } from './stencil-hooks.module-ac12ca1c.js';
3
+ import { d as dist, i as isDemo, F as Fn, S as Sn, K, o as an } from './index.module-6c840c4e.js';
4
4
  import { g as getProps } from './utils-334c1e34.js';
5
- import { V as VERIFICATION_PARENT_NAMESPACE } from './keys-db1897ae.js';
5
+ import { S as SHOW_CODE_NAMESPACE, V as VERIFICATION_EMAIL_NAMESPACE, a as VERIFICATION_PARENT_NAMESPACE } from './keys-406491dc.js';
6
+ import { e as extractProps } from './extractProps-ae1afbb3.js';
6
7
 
7
- const debug = browser("sq:widget-verification");
8
- function useTemplateChildren({ parent, callback }) {
9
- const parentObserver = new MutationObserver(listenForTemplateChanges);
10
- const childTemplateObserver = new MutationObserver(callback);
11
- parentObserver.observe(parent, {
12
- childList: true,
13
- // We only care about immediate children templates
14
- subtree: false,
15
- });
16
- listenForTemplateChanges({ addedNodes: parent.querySelectorAll("template") });
17
- function listenForTemplateChanges(mutationList) {
18
- var _a;
19
- // Be smart, only look at the mutation list
20
- (_a = mutationList.addedNodes) === null || _a === void 0 ? void 0 : _a.forEach((t) => {
21
- childTemplateObserver.observe(t.content, {
22
- childList: true,
23
- attributes: true,
24
- // Look deep into the templates for re-rendering
25
- subtree: true,
26
- });
27
- });
8
+ const USER_LOOKUP = dist.gql `
9
+ query checkUserVerification {
10
+ viewer {
11
+ ... on User {
12
+ id
13
+ accountId
14
+ email
15
+ emailVerified
16
+ managedIdentity {
17
+ email
18
+ emailVerified
19
+ }
20
+ }
21
+ }
28
22
  }
29
- return () => {
30
- parentObserver.disconnect();
31
- childTemplateObserver.disconnect();
23
+ `;
24
+ function useWidgetVerificationInternal() {
25
+ const userIdentity = K();
26
+ const [showCode, setShowCode] = Fn({
27
+ namespace: SHOW_CODE_NAMESPACE,
28
+ initialValue: false,
29
+ });
30
+ const [email, setEmail] = Fn({
31
+ namespace: VERIFICATION_EMAIL_NAMESPACE,
32
+ initialValue: userIdentity === null || userIdentity === void 0 ? void 0 : userIdentity.email,
33
+ });
34
+ const setContext = Sn(VERIFICATION_PARENT_NAMESPACE);
35
+ const [loading, setLoading] = useState(true);
36
+ const [fetch] = an(USER_LOOKUP);
37
+ useEffect(() => {
38
+ const checkUser = async () => {
39
+ var _a, _b, _c;
40
+ try {
41
+ const res = await fetch({});
42
+ if (!res || res instanceof Error)
43
+ throw new Error();
44
+ if ((_a = res === null || res === void 0 ? void 0 : res.viewer) === null || _a === void 0 ? void 0 : _a.emailVerified)
45
+ setContext(true);
46
+ else if ((_c = (_b = res === null || res === void 0 ? void 0 : res.viewer) === null || _b === void 0 ? void 0 : _b.managedIdentity) === null || _c === void 0 ? void 0 : _c.emailVerified)
47
+ setContext(true);
48
+ }
49
+ catch (e) {
50
+ console.error("Could not fetch user information:", e);
51
+ }
52
+ finally {
53
+ setLoading(false);
54
+ }
55
+ };
56
+ checkUser();
57
+ }, []);
58
+ const onVerification = () => {
59
+ setContext(true);
32
60
  };
61
+ return { showCode, onVerification, loading };
33
62
  }
34
63
  const WidgetVerification = class {
35
- /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
36
- CODE STEP PROPS
37
- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
38
64
  constructor(hostRef) {
39
65
  registerInstance(this, hostRef);
40
66
  // ! Any updated must be reflected in sqm-widget-verification-internal AND sqm-email-verification AND sqm-code-verification
41
67
  /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
42
- EMAIL STEP PROPS
43
- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
68
+ EMAIL STEP PROPS
69
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
44
70
  /**
45
71
  * @uiName Verify email widget header text
46
72
  * @uiGroup Email Verification Step
@@ -72,8 +98,8 @@ const WidgetVerification = class {
72
98
  */
73
99
  this.emailStep_emailValidationErrorText = "Please enter a valid email";
74
100
  /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
75
- EMAIL STEP PROPS
76
- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
101
+ EMAIL STEP PROPS
102
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
77
103
  /**
78
104
  * @uiName Verify code widget header text
79
105
  * @uiGroup Code Verification Step
@@ -122,85 +148,37 @@ const WidgetVerification = class {
122
148
  h(this);
123
149
  }
124
150
  disconnectedCallback() { }
151
+ getStepTextProps(prefix) {
152
+ const props = getProps(this);
153
+ return extractProps(props, prefix);
154
+ }
125
155
  render() {
126
- const [context, setContext] = Fn({
127
- namespace: VERIFICATION_PARENT_NAMESPACE,
128
- initialValue: false,
129
- });
130
- const [container, setContainer] = useState(undefined);
131
- const [slot, setSlot] = useState(undefined);
132
- const updateTemplates = useCallback(() => {
133
- const isAuth = context;
134
- const templates = slot.querySelectorAll(`template`);
135
- const template = Array.from(templates).find((t) => t.slot === (isAuth ? "verified" : "not-verified"));
136
- if (template) {
137
- // use outerHTML if template's innerHTML is unset (only happens in Stencilbook)
138
- const newContent = template.innerHTML || template.firstElementChild.outerHTML;
139
- // if template contents are an exact match
140
- if (newContent === container.innerHTML) {
141
- debug("don't rerender");
142
- }
143
- else if (template) {
144
- container.innerHTML = newContent;
145
- }
146
- }
147
- const plopTargets = Array.from(slot.children).filter((el) => el.tagName === "RAISINS-PLOP-TARGET");
148
- // if editing in raisins
149
- if (plopTargets.length) {
150
- const loggedInPlopTargets = plopTargets.filter((el) => el.slot === "verified");
151
- const loggedOutPlopTargets = plopTargets.filter((el) => el.slot === "not-verified");
152
- loggedOutPlopTargets.forEach((target, i) => {
153
- if (isAuth) {
154
- target.style.display = "none";
155
- return;
156
- }
157
- // Place last plop target at the bottom of the parent
158
- if (i === loggedOutPlopTargets.length - 1) {
159
- target.style.bottom = "0px";
160
- target.style.left = "0px";
161
- target.style.right = "0px";
162
- target.style.position = "absolute";
163
- }
164
- target.style.height = "25px";
165
- });
166
- loggedInPlopTargets.forEach((target, i) => {
167
- if (!isAuth) {
168
- target.style.display = "none";
169
- return;
170
- }
171
- // Place last plop target at the bottom of the parent
172
- if (i === loggedInPlopTargets.length - 1) {
173
- target.style.bottom = "0px";
174
- target.style.left = "0px";
175
- target.style.right = "0px";
176
- target.style.position = "absolute";
177
- }
178
- target.style.height = "25px";
179
- });
180
- }
181
- }, [container, slot, context]);
182
- useEffect(() => {
183
- if (!container || !slot) {
184
- debug("DOM not ready:");
185
- return;
186
- }
187
- // Run on first render
188
- updateTemplates();
189
- return useTemplateChildren({ parent: slot, callback: updateTemplates });
190
- }, [slot, container, context]);
191
- // useEffect(() => {
192
- // const host = useHost();
193
- // const callback = (e: CustomEvent) => {
194
- // e.stopPropagation();
195
- // setContext({ token: e.detail.token });
196
- // };
197
- // host.addEventListener(VERIFICATION_EVENT_KEY, callback);
198
- // return () => {
199
- // host.removeEventListener(VERIFICATION_EVENT_KEY, callback);
200
- // };
201
- // }, []);
202
- return (h$1(Host, null, h$1("div", { ref: setSlot, style: { display: "contents" } }, h$1("template", { slot: "not-verified" }, h$1("sqm-widget-verification-internal", Object.assign({}, getProps(this)))), h$1("slot", { name: "not-verified" }), h$1("slot", { name: "verified" })), h$1("div", { ref: setContainer }, h$1("slot", { name: "shown" }))));
156
+ const { showCode, onVerification, loading } = isDemo()
157
+ ? useDemoWidgetVerificationInternal()
158
+ : useWidgetVerificationInternal();
159
+ // TODO: Shoelace spinner is throwing errors
160
+ if (loading)
161
+ return h$1("div", null);
162
+ if (showCode) {
163
+ return (h$1("sqm-code-verification", Object.assign({ onVerification: onVerification }, this.getStepTextProps("codeStep_"))));
164
+ }
165
+ return (h$1("sqm-email-verification", Object.assign({}, this.getStepTextProps("emailStep_"))));
203
166
  }
204
167
  };
168
+ function useDemoWidgetVerificationInternal() {
169
+ const [showCode, setShowCode] = Fn({
170
+ namespace: SHOW_CODE_NAMESPACE,
171
+ initialValue: false,
172
+ });
173
+ const [email, setEmail] = Fn({
174
+ namespace: VERIFICATION_EMAIL_NAMESPACE,
175
+ initialValue: undefined,
176
+ });
177
+ const setContext = Sn(VERIFICATION_PARENT_NAMESPACE);
178
+ const onVerification = () => {
179
+ setContext(true);
180
+ };
181
+ return { showCode, onVerification, loading: false };
182
+ }
205
183
 
206
184
  export { WidgetVerification as sqm_widget_verification };
@@ -1 +1 @@
1
- var SHOW_CODE_NAMESPACE="sq:code-verification";var VERIFICATION_EMAIL_NAMESPACE="sq:verification-email";var VERIFICATION_PARENT_NAMESPACE="sq:verification-context";var VERIFICATION_EVENT_KEY="sq:code-verified";export{SHOW_CODE_NAMESPACE as S,VERIFICATION_PARENT_NAMESPACE as V,VERIFICATION_EMAIL_NAMESPACE as a,VERIFICATION_EVENT_KEY as b};
1
+ var SHOW_CODE_NAMESPACE="sq:code-verification";var VERIFICATION_EMAIL_NAMESPACE="sq:verification-email";var VERIFICATION_PARENT_NAMESPACE="sq:verification-context";var VERIFICATION_EVENT_KEY="sq:code-verified";export{SHOW_CODE_NAMESPACE as S,VERIFICATION_EMAIL_NAMESPACE as V,VERIFICATION_PARENT_NAMESPACE as a,VERIFICATION_EVENT_KEY as b};