@saasquatch/mint-components 1.12.0-4 → 1.12.0-6

package/dist/collection/components/sqm-widget-verification/sqm-widget-verification-internal.js

@@ -1,9 +1,23 @@
-import { isDemo, useParentState, useUserIdentity, } from "@saasquatch/component-boilerplate";
-import { withHooks } from "@saasquatch/stencil-hooks";
+import { isDemo, useLazyQuery, useParentState, useSetParent, useUserIdentity, } from "@saasquatch/component-boilerplate";
+import { useState, withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Prop } from "@stencil/core";
-import { SHOW_CODE_NAMESPACE, VERIFICATION_EMAIL_NAMESPACE } from "./keys";
+import { SHOW_CODE_NAMESPACE, VERIFICATION_EMAIL_NAMESPACE, VERIFICATION_PARENT_NAMESPACE, } from "./keys";
 import { getProps } from "../../utils/utils";
 import { extractProps } from "../tax-and-cash/sqm-tax-and-cash/extractProps";
+import { gql } from "graphql-request";
+import { useEffect } from "@saasquatch/universal-hooks";
+const USER_LOOKUP = gql `
+  query viewer {
+    viewer {
+      ... on User {
+        id
+        accountId
+        email
+        emailVerified
+      }
+    }
+  }
+`;
 function useWidgetVerificationInternal() {
   const userIdentity = useUserIdentity();
   const [showCode, setShowCode] = useParentState({
@@ -14,7 +28,33 @@ function useWidgetVerificationInternal() {
     namespace: VERIFICATION_EMAIL_NAMESPACE,
     initialValue: userIdentity === null || userIdentity === void 0 ? void 0 : userIdentity.email,
   });
-  return { showCode };
+  const setContext = useSetParent(VERIFICATION_PARENT_NAMESPACE);
+  const [loading, setLoading] = useState(true);
+  const [fetch] = useLazyQuery(USER_LOOKUP);
+  useEffect(() => {
+    const checkUser = async () => {
+      var _a;
+      let result = null;
+      try {
+        const res = await fetch({});
+        if (!res || res instanceof Error)
+          throw new Error();
+        if ((_a = res === null || res === void 0 ? void 0 : res.viewer) === null || _a === void 0 ? void 0 : _a.emailVerified)
+          setContext(true);
+      }
+      catch (e) {
+        console.error("Could not fetch user information", e);
+      }
+      finally {
+        setLoading(false);
+      }
+    };
+    checkUser();
+  }, []);
+  const onVerification = () => {
+    setContext(true);
+  };
+  return { showCode, onVerification, loading };
 }
 export class WidgetVerificationInternal {
   constructor() {
@@ -26,11 +66,15 @@ export class WidgetVerificationInternal {
     return extractProps(props, prefix);
   }
   render() {
-    const { showCode } = isDemo()
+    const { showCode, onVerification, loading } = isDemo()
       ? useDemoWidgetVerificationInternal()
       : useWidgetVerificationInternal();
+    if (loading) {
+      // TODO: Proper loading state
+      return h("div", null, "Loading");
+    }
     if (showCode) {
-      return (h("sqm-code-verification", Object.assign({}, this.getStepTextProps("codeStep_"))));
+      return (h("sqm-code-verification", Object.assign({ onVerification: onVerification }, this.getStepTextProps("codeStep_"))));
     }
     return (h("sqm-email-verification", Object.assign({}, this.getStepTextProps("emailStep_"))));
   }
@@ -286,5 +330,9 @@ function useDemoWidgetVerificationInternal() {
     namespace: VERIFICATION_EMAIL_NAMESPACE,
     initialValue: undefined,
   });
-  return { showCode };
+  const setContext = useSetParent(VERIFICATION_PARENT_NAMESPACE);
+  const onVerification = () => {
+    setContext(true);
+  };
+  return { showCode, onVerification, loading: false };
 }

package/dist/collection/components/sqm-widget-verification/sqm-widget-verification.js

@@ -1,9 +1,9 @@
 import { useParentState } from "@saasquatch/component-boilerplate";
-import { useHost, withHooks } from "@saasquatch/stencil-hooks";
+import { withHooks } from "@saasquatch/stencil-hooks";
 import { useCallback, useEffect, useState } from "@saasquatch/universal-hooks";
 import { Component, h, Host, Prop } from "@stencil/core";
 import debugFn from "debug";
-import { VERIFICATION_EVENT_KEY, VERIFICATION_PARENT_NAMESPACE } from "./keys";
+import { VERIFICATION_PARENT_NAMESPACE } from "./keys";
 import { getProps } from "../../utils/utils";
 const debug = debugFn("sq:widget-verification");
 function useTemplateChildren({ parent, callback }) {
@@ -132,15 +132,12 @@ export class WidgetVerification {
   render() {
     const [context, setContext] = useParentState({
       namespace: VERIFICATION_PARENT_NAMESPACE,
-      initialValue: undefined,
+      initialValue: false,
     });
-    const authToken = context === null || context === void 0 ? void 0 : context.token;
     const [container, setContainer] = useState(undefined);
     const [slot, setSlot] = useState(undefined);
-    if (!authToken)
-      debug("No user identity available");
     const updateTemplates = useCallback(() => {
-      const isAuth = !!authToken;
+      const isAuth = context;
       const templates = slot.querySelectorAll(`template`);
       const template = Array.from(templates).find((t) => t.slot === (isAuth ? "verified" : "not-verified"));
       if (template) {
@@ -188,7 +185,7 @@ export class WidgetVerification {
           target.style.height = "25px";
         });
       }
-    }, [container, slot, authToken]);
+    }, [container, slot, context]);
     useEffect(() => {
       if (!container || !slot) {
         debug("DOM not ready:");
@@ -197,18 +194,18 @@ export class WidgetVerification {
       // Run on first render
       updateTemplates();
       return useTemplateChildren({ parent: slot, callback: updateTemplates });
-    }, [slot, container, authToken]);
-    useEffect(() => {
-      const host = useHost();
-      const callback = (e) => {
-        e.stopPropagation();
-        setContext({ token: e.detail.token });
-      };
-      host.addEventListener(VERIFICATION_EVENT_KEY, callback);
-      return () => {
-        host.removeEventListener(VERIFICATION_EVENT_KEY, callback);
-      };
-    }, []);
+    }, [slot, container, context]);
+    // useEffect(() => {
+    //   const host = useHost();
+    //   const callback = (e: CustomEvent) => {
+    //     e.stopPropagation();
+    //     setContext({ token: e.detail.token });
+    //   };
+    //   host.addEventListener(VERIFICATION_EVENT_KEY, callback);
+    //   return () => {
+    //     host.removeEventListener(VERIFICATION_EVENT_KEY, callback);
+    //   };
+    // }, []);
     return (h(Host, null,
       h("div", { ref: setSlot, style: { display: "contents" } },
         h("template", { slot: "not-verified" },

package/dist/collection/components/sqm-widget-verification/useVerificationEmail.js

@@ -0,0 +1,165 @@
+import { useLazyQuery, useMutation, useUserIdentity, } from "@saasquatch/component-boilerplate";
+import { useEffect, useState } from "@saasquatch/universal-hooks";
+import { gql } from "graphql-request";
+const UserLookupQuery = gql `
+  query userLookup {
+    viewer {
+      ... on User {
+        id
+        accountId
+        email
+        impactConnection {
+          user {
+            id
+            email
+          }
+        }
+      }
+    }
+  }
+`;
+const ParticipantVerificationEmailMutation = gql `
+  mutation requestUserEmailVerification($user: UserIdInput!) {
+    requestUserEmailVerification(user: $user) {
+      success
+    }
+  }
+`;
+const ImpactVerificationEmailMutation = gql `
+  mutation requestImpactPublisherEmail2FA($user: UserIdInput!) {
+    requestImpactPublisherEmail2FA(user: $user) {
+      success
+    }
+  }
+`;
+const VerifyUserEmailMutation = gql `
+  mutation verifyUserEmail($user: UserIdInput!, $code: String!) {
+    verifyUserEmail(user: $user, code: $code) {
+      id
+      accountId
+      email
+      emailVerified
+    }
+  }
+`;
+const SubmitImpactCodeMutation = gql `
+  mutation submitImpactPublisherEmail2FACode(
+    $user: UserIdInput!
+    $code: String!
+  ) {
+    submitImpactPublisherEmail2FACode(user: $user, code: $code) {
+      verifiedEmail
+      accessKey
+    }
+  }
+`;
+// ! It's important when using this hook to ensure initialisation
+// ! is done before calling any mutations
+export function useVerificationEmail() {
+  const userIdentity = useUserIdentity();
+  const [hasEmails, setHasEmails] = useState({
+    participant: false,
+    impact: false,
+  });
+  const [fetch] = useLazyQuery(UserLookupQuery);
+  // Send mutations
+  const [sendParticipantEmail, { loading: participantEmailLoading, errors: participantEmailErrors },] = useMutation(ParticipantVerificationEmailMutation);
+  const [sendImpactEmail, { loading: impactEmailLoading, errors: impactEmailErrors },] = useMutation(ImpactVerificationEmailMutation);
+  const sendLoading = participantEmailLoading || impactEmailLoading;
+  const sendErrors = participantEmailErrors || impactEmailErrors;
+  // Verification mutations
+  const [verifyUserEmail, { loading: verifyMutationLoading, errors: verifyMutationErrors },] = useMutation(VerifyUserEmailMutation);
+  const [submitImpactCode, { loading: submitImpactCodeLoading, errors: submitImpactCodeErrors },] = useMutation(SubmitImpactCodeMutation);
+  const verifyLoading = verifyMutationLoading || submitImpactCodeLoading;
+  const verifyErrors = verifyMutationErrors || submitImpactCodeErrors;
+  const [initialized, setInitialized] = useState(false);
+  const initialise = async () => {
+    var _a, _b, _c, _d;
+    try {
+      const lookup = await fetch({});
+      if (!lookup || lookup instanceof Error)
+        throw new Error();
+      setHasEmails({
+        participant: !!((_a = lookup === null || lookup === void 0 ? void 0 : lookup.viewer) === null || _a === void 0 ? void 0 : _a.email),
+        impact: !!((_d = (_c = (_b = lookup === null || lookup === void 0 ? void 0 : lookup.viewer) === null || _b === void 0 ? void 0 : _b.impactConnection) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 : _d.email),
+      });
+      setInitialized(true);
+    }
+    catch (e) {
+      console.error("Could not initialise verification", e);
+    }
+  };
+  const sendVerificationEmail = async () => {
+    let result = null;
+    if (!initialized)
+      return result;
+    if (!hasEmails.participant && !hasEmails.impact)
+      return result;
+    try {
+      const request = hasEmails.impact ? sendImpactEmail : sendParticipantEmail;
+      const res = await request({
+        user: {
+          id: userIdentity.id,
+          accountId: userIdentity.accountId,
+        },
+      });
+      if (res instanceof Error || !res)
+        throw new Error();
+      result = hasEmails.impact
+        ? res.requestImpactPublisherEmail2FA
+        : res.requestUserEmailVerification;
+    }
+    catch (e) {
+      console.error("Could not send verification email", e);
+    }
+    finally {
+      return result;
+    }
+  };
+  const verifyVerificationEmail = async (code) => {
+    var _a;
+    let result = null;
+    if (!initialized)
+      return result;
+    if (!hasEmails.participant && !hasEmails.impact)
+      return result;
+    try {
+      const request = hasEmails.impact ? submitImpactCode : verifyUserEmail;
+      const res = await request({
+        user: {
+          id: userIdentity.id,
+          accountId: userIdentity.accountId,
+        },
+        code,
+      });
+      if (res instanceof Error || !res)
+        throw new Error();
+      result = {
+        success: true,
+        accessKey: hasEmails.impact
+          ? (_a = res.submitImpactPublisherEmail2FACode) === null || _a === void 0 ? void 0 : _a.accessKey : undefined,
+      };
+    }
+    catch (e) {
+      console.error("Could not verify email", e);
+    }
+    finally {
+      return result;
+    }
+  };
+  useEffect(() => {
+    if (!initialized)
+      initialise();
+  }, []);
+  return {
+    initialized,
+    send: [
+      sendVerificationEmail,
+      { loading: sendLoading, errors: sendErrors },
+    ],
+    verify: [
+      verifyVerificationEmail,
+      { loading: verifyLoading, errors: verifyErrors },
+    ],
+  };
+}

package/dist/collection/components/tax-and-cash/BankingForm.stories.js

@@ -21,6 +21,7 @@ const bankingFormProps = {
     loadingError: false,
   },
   callbacks: {
+    onVerification: () => { },
     onSubmit: async () => console.log("Submit"),
     setPaymentMethodChecked: () => { },
     setPaymentScheduleChecked: () => { },

package/dist/collection/components/tax-and-cash/TaxForm.stories.js

@@ -210,6 +210,7 @@ const stepFourProps = {
     },
   },
   callbacks: {
+    onVerification: () => { },
     onSubmit: async () => console.log("Submit"),
     setPaymentMethodChecked: () => { },
     setPaymentScheduleChecked: () => { },
@@ -257,6 +258,7 @@ const dashboardProps = {
     indirectTaxNumber: "123456",
     indirectTaxType: "VAT",
     showNewFormDialog: false,
+    hasHold: false,
   },
   slots: {
     payoutDetailsCardSlot: (h("sqm-payout-details-card", { demoData: {
@@ -771,6 +773,7 @@ export const TaxAndCashDashboardActiveW8BENForm = () => {
         indirectTaxType: "VAT",
         indirectTaxNumber: "123456",
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -786,6 +789,7 @@ export const TaxAndCashDashboardActiveW8BENEForm = () => {
         indirectTaxType: "VAT",
         indirectTaxNumber: "123456",
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -802,6 +806,7 @@ export const TaxAndCashDashboardNotActiveW9Form = () => {
         indirectTaxType: "VAT",
         indirectTaxNumber: "123456",
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -819,6 +824,7 @@ export const TaxAndCashDashboardNotVerifiedW9Form = () => {
         indirectTaxType: "VAT",
         indirectTaxNumber: "123456",
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -837,6 +843,7 @@ export const TaxAndCashDashboardNotVerifiedW8BENForm = () => {
         indirectTaxType: "VAT",
         indirectTaxNumber: "123456",
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -855,6 +862,7 @@ export const TaxAndCashDashboardNotVerifiedW8BENEForm = () => {
         indirectTaxType: "VAT",
         indirectTaxNumber: "123456",
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -873,6 +881,7 @@ export const TaxAndCashDashboardNotActiveW8BENEForm = () => {
         indirectTaxType: "VAT",
         country: "United Kingdom",
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -891,6 +900,7 @@ export const TaxAndCashDashboardNoFormNeeded = () => {
         indirectTaxNumber: "123456",
         indirectTaxType: "GST",
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -910,6 +920,7 @@ export const TaxAndCashDashboardIndirectTaxCanada = () => {
         indirectTaxType: "GST",
         indirectTaxNumber: "123456",
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -930,6 +941,7 @@ export const TaxAndCashDashboardIndirectTaxCanadaQuebec = () => {
         indirectTaxNumber: "123456",
         qstNumber: "44212",
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -950,6 +962,7 @@ export const TaxAndCashDashboardIndirectTaxSpain = () => {
         indirectTaxNumber: "123456",
         subRegionTaxNumber: "44212",
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -965,6 +978,7 @@ export const TaxAndCashDashboardIndirectTaxNotRegistered = () => {
         noFormNeeded: false,
         notRegistered: true,
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -982,6 +996,7 @@ export const TaxAndCashDashboardIdentityVerifcationRequired = () => {
         noFormNeeded: false,
         notRegistered: true,
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -997,6 +1012,25 @@ export const TaxAndCashDashboardNewTaxForm = () => {
         noFormNeeded: false,
         notRegistered: true,
         showNewFormDialog: true,
+        hasHold: false,
+      },
+    } }));
+};
+export const TaxAndCashDashboardPayoutsOnHold = () => {
+  return (h("sqm-tax-and-cash-dashboard", { demoData: {
+      ...dashboardProps,
+      states: {
+        canEditPayoutInfo: true,
+        disabled: true,
+        status: "ACTIVE",
+        documentType: "W8BEN",
+        documentTypeString: taxTypeToName("W8BEN"),
+        dateSubmitted: "Jan 18th, 2025",
+        noFormNeeded: false,
+        indirectTaxNumber: "123456",
+        country: "Slovania",
+        showNewFormDialog: false,
+        hasHold: true,
       },
     } }));
 };
@@ -1013,6 +1047,7 @@ export const TaxAndCashDashboardLoading = () => {
         noFormNeeded: false,
         loading: true,
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -1030,6 +1065,7 @@ export const TaxAndCashDashboardWithLoadingError = () => {
         loading: true,
         loadingError: true,
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -1048,6 +1084,7 @@ export const TaxAndCashDashboardWithGeneralError = () => {
         indirectTaxType: "VAT",
         country: "Slovania",
         showNewFormDialog: false,
+        hasHold: false,
         errors: {
           general: true,
         },
@@ -1068,6 +1105,7 @@ export const TaxAndCashDashboardDisabled = () => {
         indirectTaxNumber: "123456",
         country: "Slovania",
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };

package/dist/collection/components/tax-and-cash/sqm-banking-info-form/sqm-banking-info-form.js

@@ -314,7 +314,7 @@ export class BankingInfoForm {
       },
     };
     if (props.states.isPartner && props.states.showVerification) {
-      return h("sqm-code-verification", null);
+      return (h("sqm-code-verification", { onVerification: props.callbacks.onVerification }));
     }
     return (h(Host, null,
       h(BankingInfoFormView, { callbacks: props.callbacks, text: props.text, states: props.states, refs: props.refs, slots: {
@@ -1619,6 +1619,7 @@ function useDemoBankingInfoForm(props) {
       setPaymentScheduleChecked,
       setCountrySearch: () => { },
       onBack: async () => setStep("/dashboard"),
+      onVerification: () => { },
     },
     text: props.getTextProps(),
     refs: {

package/dist/collection/components/tax-and-cash/sqm-banking-info-form/useBankingInfoForm.js

@@ -288,6 +288,12 @@ export function useBankingInfoForm(props) {
     }
     await runMutation(formData, token);
   };
+  const onVerification = async (token) => {
+    host.dispatchEvent(new CustomEvent(VERIFICATION_EVENT_KEY, {
+      detail: { token },
+      bubbles: false,
+    }));
+  };
   function setPaymentMethodChecked(paymentMethod) {
     _setPaymentMethodChecked(paymentMethod);
     if (paymentMethod === "toPayPalAccount") {
@@ -312,6 +318,7 @@ export function useBankingInfoForm(props) {
       setPaymentScheduleChecked,
       onBack: () => setStep("/dashboard"),
       setCountrySearch,
+      onVerification,
     },
     states: {
       showVerification,

package/dist/collection/components/tax-and-cash/sqm-payout-status-alert/PayoutStatusAlert.stories.js

@@ -5,8 +5,16 @@ export default {
 const defaultProps = {
   status: "INFORMATION_REQUIRED",
   loading: false,
+  showVerifyIdentity: false,
 };
 export const InformationRequired = () => (h("sqm-payout-status-alert", { demoData: { states: defaultProps } }));
 export const VerifyIdentity = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, status: "VERIFICATION_NEEDED" } } }));
+export const VerifyIdentityOpen = () => (h("sqm-payout-status-alert", { demoData: {
+    states: {
+      ...defaultProps,
+      status: "VERIFICATION_NEEDED",
+      showVerifyIdentity: true,
+    },
+  } }));
 export const Hold = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, status: "HOLD" } } }));
 export const Loading = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, loading: true } } }));

package/dist/collection/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert-view.js

@@ -32,7 +32,7 @@ const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function PayoutStatusAlertView(props) {
   var _a, _b, _c, _d, _e;
-  const { text, states } = props;
+  const { text, states, callbacks } = props;
   if (states.loading) {
     return h("sl-skeleton", { class: sheet.classes.SkeletonOne });
   }
@@ -78,7 +78,9 @@ export function PayoutStatusAlertView(props) {
       case "INFORMATION_REQUIRED":
         return (h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": "Payout and tax settings", "scroll-animation": "smooth" }));
       case "VERIFICATION_NEEDED":
-        return (h("sl-button", { type: "default", loading: states.loading }, text.verificationRequiredButtonText));
+        return (h("sl-button", { type: "default", loading: states.loading, 
+          //AL: TODO callback to open verification form
+          onClick: () => callbacks.onClick }, text.verificationRequiredButtonText));
       default:
         return;
     }
@@ -89,5 +91,8 @@ export function PayoutStatusAlertView(props) {
       h("sl-icon", { slot: "icon", name: (_c = getAlert(states.status)) === null || _c === void 0 ? void 0 : _c.icon }),
       h("strong", null, (_d = getAlert(states.status)) === null || _d === void 0 ? void 0 : _d.header),
       h("p", { class: sheet.classes.AlertDescriptionText }, (_e = getAlert(states.status)) === null || _e === void 0 ? void 0 : _e.description),
-      getButton(states.status))));
+      getButton(states.status)),
+    h("sl-dialog", { 
+      // class={sheet.classes.Dialog}
+      open: states.showVerifyIdentity, "onSl-hide": callbacks.onCancel }, "AL: TODO add IFRAME URL")));
 }

package/dist/collection/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert.js

@@ -5,6 +5,11 @@ import { getProps } from "../../../utils/utils";
 import { PayoutStatusAlertView, } from "./sqm-payout-status-alert-view";
 import { usePayoutStatus } from "./usePayoutStatus";
 import { isDemo } from "@saasquatch/component-boilerplate";
+/**
+ * @uiName Payout Status Alert
+ * @exampleGroup Tax and Cash
+ * @example Payout Status Alert - <sqm-payout-status-alert></sqm-payout-status-alert>
+ */
 export class PayoutStatusAlert {
   constructor() {
     /**
@@ -227,7 +232,7 @@ export class PayoutStatusAlert {
       "mutable": false,
       "complexType": {
         "original": "DemoData<PayoutStatusAlertViewProps>",
-        "resolved": "{ states?: { loading: boolean; status: PayoutStatus; }; }",
+        "resolved": "{ states?: { loading: boolean; status: PayoutStatus; showVerifyIdentity: boolean; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -259,7 +264,12 @@ function useDemoPayoutStatusAlert(props) {
     states: {
       status: "INFORMATION_REQUIRED",
       loading: false,
+      showVerifyIdentity: false,
     },
     text: props.getTextProps(),
+    callbacks: {
+      onClick: () => console.log("show"),
+      onCancel: () => console.log("hide"),
+    },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }

package/dist/collection/components/tax-and-cash/sqm-payout-status-alert/usePayoutStatus.js

@@ -22,6 +22,7 @@ const GET_USER_STATUS = gql `
 export function usePayoutStatus(props) {
   const { loading, data, errors, refetch } = useQuery(GET_USER_STATUS, {});
   const [status, setStatus] = useState(undefined);
+  const [showDialog, setShowDialog] = useState(false);
   useEffect(() => {
     if (!data)
       return;
@@ -45,5 +46,12 @@ export function usePayoutStatus(props) {
     window.addEventListener("sqm:tax-form-updated", cb);
     return () => window.removeEventListener("sqm:tax-form-updated", cb);
   }, []);
-  return { states: { loading, status }, text: props.getTextProps() };
+  return {
+    states: { loading, status, showVerifyIdentity: showDialog },
+    text: props.getTextProps(),
+    callbacks: {
+      onClick: () => setShowDialog(true),
+      onCancel: () => setShowDialog(false)
+    }
+  };
 }

package/dist/collection/components/tax-and-cash/sqm-tax-and-cash/data.js

@@ -19,6 +19,11 @@ export const GET_USER = gql `
         email
         countryCode
         customFields
+        managedIdentity {
+          uid
+          email
+          emailVerified
+        }
         impactConnection {
           connected
           user {