@saasquatch/mint-components 1.12.0-1 → 1.12.0-10

package/dist/cjs/sqm-banking-info-form_16.cjs.entry.js

@@ -16,8 +16,10 @@ const useChildElements = require('./useChildElements-410d2435.js');
 const luxon = require('./luxon-05098e19.js');
 const useReferralTable = require('./useReferralTable-824ac152.js');
 const utils = require('./utils-6847bc06.js');
-const sqmInvoiceTableView = require('./sqm-invoice-table-view-ce9a34ac.js');
+const sqmInvoiceTableView = require('./sqm-invoice-table-view-c58966f8.js');
 const keys = require('./keys-cff24974.js');
+const usePayoutStatus = require('./usePayoutStatus-b9fb7399.js');
+const extractProps = require('./extractProps-fd93ba62.js');
 
 const TAX_CONTEXT_NAMESPACE = "sq:tax-and-cash";
 const TAX_FORM_CONTEXT_NAMESPACE = "sq:tax-form-context";
@@ -39,6 +41,11 @@ const GET_USER = index_module.dist.gql `
         email
         countryCode
         customFields
+        managedIdentity {
+          uid
+          email
+          emailVerified
+        }
         impactConnection {
           connected
           user {
@@ -82,6 +89,7 @@ const GET_USER = index_module.dist.gql `
             }
             payoutsAccount {
               hold
+              holdReasons
               balance
             }
           }
@@ -1182,6 +1190,12 @@ function useBankingInfoForm(props) {
     }
     await runMutation(formData, token);
   };
+  const onVerification = async (token) => {
+    host.dispatchEvent(new CustomEvent(keys.VERIFICATION_EVENT_KEY, {
+      detail: { token },
+      bubbles: false,
+    }));
+  };
   function setPaymentMethodChecked(paymentMethod) {
     _setPaymentMethodChecked(paymentMethod);
     if (paymentMethod === "toPayPalAccount") {
@@ -1206,6 +1220,7 @@ function useBankingInfoForm(props) {
       setPaymentScheduleChecked,
       onBack: () => setStep("/dashboard"),
       setCountrySearch,
+      onVerification,
     },
     states: {
       showVerification,
@@ -1545,7 +1560,7 @@ const BankingInfoForm = class {
       },
     };
     if (props.states.isPartner && props.states.showVerification) {
-      return index.h("sqm-code-verification", null);
+      return (index.h("sqm-code-verification", { onVerification: props.callbacks.onVerification }));
     }
     return (index.h(index.Host, null, index.h(BankingInfoFormView, { callbacks: props.callbacks, text: props.text, states: props.states, refs: props.refs, slots: {
         formInputsSlot: inputFields === null || inputFields === void 0 ? void 0 : inputFields.map(({ input }) => input),
@@ -1679,6 +1694,7 @@ function useDemoBankingInfoForm(props) {
       setPaymentScheduleChecked,
       setCountrySearch: () => { },
       onBack: async () => setStep("/dashboard"),
+      onVerification: () => { },
     },
     text: props.getTextProps(),
     refs: {
@@ -1920,7 +1936,6 @@ const DocusignIframe = ({ states, data, callbacks, text, }) => {
     const allowed = allowedDomains.some((d) => { var _a; return (_a = e.origin) === null || _a === void 0 ? void 0 : _a.includes(d); });
     if (!allowed)
       return;
-    console.log(e);
     if (typeof e.data === "number") {
       setiFrameHeight(e.data + "px");
     }
@@ -3779,27 +3794,9 @@ const TableRow = class {
   }
 };
 
-/**
- * Util function for getting just the props with a certain prefix.
- * @param props Text props on stencil component
- * @param prefix Prefix denoting which group the text prop belongs to
- * @returns A new object with all keys with the prefix provided. The prefix is removed from each key.
- */
-function extractProps(props, prefix) {
-  const keys = Object.keys(props).filter((k) => k.startsWith(prefix));
-  const formattedProps = keys.reduce((prev, k) => {
-    const key = k.replace(prefix, "");
-    return {
-      ...prev,
-      [key]: props[k],
-    };
-  }, {});
-  return formattedProps;
-}
-
 function getCurrentStep(user) {
-  var _a;
-  if (!((_a = user.impactConnection) === null || _a === void 0 ? void 0 : _a.connected)) {
+  var _a, _b;
+  if (!((_a = user.impactConnection) === null || _a === void 0 ? void 0 : _a.connected) || !((_b = user.impactConnection) === null || _b === void 0 ? void 0 : _b.publisher)) {
     return "/1";
   }
   const { requiredTaxDocumentType, currentTaxDocument, withdrawalSettings, brandedSignup, } = user.impactConnection.publisher;
@@ -4693,14 +4690,14 @@ const TaxAndCashMonolith = class {
      * @uiGroup Dashboard Properties
      * @uiWidget textArea
      */
-    this.dashboard_errorTitleText = "Your payout is on hold ";
+    this.payoutHoldAlertHeader = "Your payout is on hold";
     /**
      * Part of the alert displayed at the top of the page when there’s been an issue preventing payouts.
      * @uiName Payout error message description
      * @uiGroup Dashboard Properties
      * @uiWidget textArea
      */
-    this.dashboard_errorDescriptionText = "If you’ve recently added your payout information, please wait while we verify your information. If it’s still on hold after a few days, please contact Support or check your inbox for an email from our referral program provider, impact.com.";
+    this.payoutHoldAlertDescription = "Please contact Support or check your inbox for an email from our referral program provider, impact.com.";
     /**
      * Text displayed for existing publishers that do not have saved banking information.
      * @uiName Payout missing information subtext
@@ -4850,7 +4847,7 @@ const TaxAndCashMonolith = class {
   getGeneralStepTextProps(prefix) {
     const props = utils.getProps(this);
     return {
-      ...extractProps(props, prefix),
+      ...extractProps.extractProps(props, prefix),
       generalErrorTitle: props.generalErrorTitle,
       generalErrorDescription: props.generalErrorDescription,
       fieldRequiredError: props.fieldRequiredError,
@@ -4915,6 +4912,12 @@ const style$5 = {
       borderTop: "none",
     },
   },
+  HoldAlertContainer: {
+    "&::part(base)": {
+      border: "none",
+      backgroundColor: "transparent",
+    },
+  },
   ExpiringSoonAlertContainer: {
     "&::part(base)": {
       backgroundColor: "var(--sl-color-yellow-100)",
@@ -5154,22 +5157,22 @@ const TaxAndCashDashboardView = (props) => {
         index.h("strong", null, text.error.generalTitle),
         index.h("br", null),
         text.error.generalDescription)),
-      states.identiyRequired && (index.h("div", null,
-        index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "warning", open: true, class: sheet$4.classes.ExpiringSoonAlertContainer },
-          index.h("sl-icon", { slot: "icon", name: "exclamation-triangle" }),
-          index.h("strong", null, text.verifyIdentityAlertHeader),
-          index.h("br", null),
-          text.verifyIdentityAlertMessage,
-          index.h("br", null),
-          index.h("sl-button", null, text.verifyIdentityButton)))),
-      index.h("sl-dialog", { 
-        // AL: todo plugin open dialog
-        label: " verify Identity iframe", class: sheet$4.classes.Dialog, open: states.showIdentityVerificationDialog },
-        index.h("div", { style: {
-            width: "420px",
-            height: "420px",
-            border: "1px dotted black",
-          } })),
+      states.hasHold && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "warning", open: true, class: sheet$4.classes.HoldAlertContainer },
+        index.h("sl-icon", { slot: "icon", name: "exclamation-triangle" }),
+        index.h("strong", null, text.payoutHoldAlertHeader),
+        index.h("br", null),
+        text.payoutHoldAlertDescription)),
+      states.payoutStatus === "VERIFICATION_NEEDED" && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "warning", open: true, class: sheet$4.classes.HoldAlertContainer },
+        index.h("sl-icon", { slot: "icon", name: "exclamation-triangle" }),
+        index.h("strong", null, text.verificationRequiredHeader),
+        index.h("p", { style: { margin: "0" } }, text.verificationRequiredDescription),
+        index.h("sl-button", { style: { marginTop: "var(--sl-spacing-x-small)" }, type: "default", loading: states.loading, 
+          //AL: TODO hooks
+          onClick: () => callbacks.onClick }, text.verificationRequiredButtonText))),
+      index.h("sl-dialog", { noDismiss: true, class: sheet$4.classes.Dialog, open: states.showVerifyIdentity, "onSl-hide": callbacks.onVerifyIdentityCancel },
+        index.h("iframe", { 
+          // AL: TODO replace iframe URL with verification url when available
+          scrolling: "yes", frameBorder: "0", width: "100%", height: "100%", src: "https://impacttech.complytaxforms.com/ServiceRedirect.aspx?Language=eng&Param1=UxBORV4bOIrqNb4gbpNmtvW3wjdZJyx4gPElIGMJNR8=&UUID=B576EA3E-80FD-4D85-AA59-653D23A7CCE8" })),
       index.h("sl-dialog", { label: text.replaceTaxFormModalHeader, class: sheet$4.classes.Dialog, open: states.showNewFormDialog, "onSl-hide": callbacks.onNewFormCancel },
         index.h("p", null, text.replaceTaxFormModalBodyText),
         index.h("sl-button", { slot: "footer", type: "primary", class: sheet$4.classes.DialogButton, onClick: callbacks.onNewFormClick }, text.newFormButton),
@@ -5275,10 +5278,11 @@ function getIndirectTaxType(taxInformation) {
   return "Indirect Tax";
 }
 const useTaxAndCashDashboard = (props) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
   const setStep = index_module.Sn(TAX_CONTEXT_NAMESPACE);
   const setContext = index_module.Sn(TAX_FORM_CONTEXT_NAMESPACE);
   const [showDialog, setShowDialog] = stencilHooks_module.useState(false);
+  const [showVerification, setShowVerification] = stencilHooks_module.useState(false);
   const locale = index_module.Q();
   stencilHooks_module.useEffect(() => {
     // Clear override context once on submitted
@@ -5309,6 +5313,7 @@ const useTaxAndCashDashboard = (props) => {
     setStep("/3");
   };
   const provinceName = (_d = sqmInvoiceTableView.INDIRECT_TAX_PROVINCES.find((p) => { var _a; return p.regionCode === ((_a = publisher === null || publisher === void 0 ? void 0 : publisher.taxInformation) === null || _a === void 0 ? void 0 : _a.indirectTaxRegion); })) === null || _d === void 0 ? void 0 : _d.displayName;
+  const payoutStatus = usePayoutStatus.getStatus(data);
   return {
     states: {
       dateSubmitted,
@@ -5330,12 +5335,16 @@ const useTaxAndCashDashboard = (props) => {
       loading,
       loadingError: !!(userError === null || userError === void 0 ? void 0 : userError.message),
       showNewFormDialog: showDialog,
+      hasHold: !!((_m = publisher === null || publisher === void 0 ? void 0 : publisher.payoutsAccount) === null || _m === void 0 ? void 0 : _m.hold),
+      payoutStatus,
+      showVerifyIdentity: showVerification,
     },
     callbacks: {
       onClick: () => setShowDialog(true),
       onEditPayoutInfo,
       onNewFormCancel: () => setShowDialog(false),
       onNewFormClick,
+      onVerifyIdentityCancel: () => setShowVerification(false),
     },
     text: props.getTextProps(),
   };
@@ -5403,18 +5412,6 @@ const TaxAndCashDashboard = class {
      * @uiName Inactive W-8 error message description
      */
     this.taxAlertNotActiveMessageW8 = "Your tax form may have expired or has personal information that doesn’t match your profile. Please submit a new {documentType} form.";
-    /**
-     * Part of the alert displayed at the top of the page.
-     *
-     * @uiName Verify identity warning message header
-     */
-    this.verifyIdentityAlertHeader = "Verify your identity";
-    /**
-     * Part of the alert displayed at the top of the page.
-     *
-     * @uiName Verify identity warning message description
-     */
-    this.verifyIdentityAlertMessage = "Complete your verification to start receiving your cash rewards. It should only take a few minutes verify.";
     /**
      * Additional text displayed next to the tax form's status badge.
      *
@@ -5519,18 +5516,35 @@ const TaxAndCashDashboard = class {
      * @uiName Payout error message title
      * @uiWidget textArea
      */
-    this.errorTitleText = "Your payout is on hold ";
+    this.payoutHoldAlertHeader = "Your payout is on hold";
     /**
      * Part of the alert displayed at the top of the page when there’s been an issue preventing payouts.
      * @uiName Payout error message description
      * @uiWidget textArea
      */
-    this.errorDescriptionText = "If you’ve recently added your payout information, please wait while we verify your information. If it’s still on hold after a few days, please contact Support or check your inbox for an email from our referral program provider, impact.com.";
+    this.payoutHoldAlertDescription = "Please contact Support or check your inbox for an email from our referral program provider, impact.com.";
     /**
      * Text displayed for existing publishers that do not have saved banking information.
      * @uiName Payout missing information subtext
      */
     this.payoutMissingInformationText = "Missing banking information, go to Impact.com to resolve.";
+    /**
+     * Part of the alert displayed at the top of the page when the user needs to verify their identity.
+     * @uiName Verification required alert message title
+     * @uiWidget textArea
+     */
+    this.verificationRequiredHeader = "Verify your identity";
+    /**
+     * Part of the alert displayed at the top of the page when the user needs to verify their identity
+     * @uiName Verification required alert message description
+     * @uiWidget textArea
+     */
+    this.verificationRequiredDescription = "Complete your verification to start receiving your cash rewards. It should only take a few minutes verify.";
+    /**
+     * Part of the alert displayed at the top of the page when the user needs to verify their identity.
+     * @uiName Verification required alert button text
+     */
+    this.verificationRequiredButtonText = "Start Verification";
     /**
      * Part of the alert displayed at the top of the page.
      * @uiName Form submission error message title
@@ -5615,10 +5629,6 @@ const TaxAndCashDashboard = class {
      * @uiName Cancel button label
      */
     this.cancelButton = "Cancel";
-    /**
-     * @uiName Verify button label
-     */
-    this.verifyIdentityButton = "Start Verification";
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
@@ -5657,12 +5667,16 @@ function useDemoTaxAndCashDashboard(props) {
       disabled: false,
       loading: false,
       showNewFormDialog: false,
+      hasHold: false,
+      showVerifyIdentity: false,
+      payoutStatus: "DONE",
     },
     callbacks: {
       onClick: () => console.debug("check step"),
       onEditPayoutInfo: () => console.debug("payout info"),
       onNewFormCancel: () => console.log("hide"),
       onNewFormClick: () => console.log("show"),
+      onVerifyIdentityCancel: () => console.log("hide"),
     },
     text: props.getTextProps(),
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
@@ -6952,17 +6966,20 @@ function useUserInfoForm(props) {
   const [filteredCurrencies, setFilteredCurrencies] = stencilHooks_module.useState(currencies || []);
   const [formErrors, setErrors] = stencilHooks_module.useState({});
   stencilHooks_module.useEffect(() => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const user = data === null || data === void 0 ? void 0 : data.user;
     if (!user || step !== "/1")
       return;
     // If form already filled out, skip initialising it
     if (sqmInvoiceTableView.objectIsFull(userFormContext))
       return;
-    if (((_a = user.impactConnection) === null || _a === void 0 ? void 0 : _a.publisher) && ((_b = user.impactConnection) === null || _b === void 0 ? void 0 : _b.user)) {
+    // Prefer MI email if it was verified before this
+    const email = ((_a = user.managedIdentity) === null || _a === void 0 ? void 0 : _a.emailVerified) ? user.managedIdentity.email
+      : user.email;
+    if (((_b = user.impactConnection) === null || _b === void 0 ? void 0 : _b.publisher) && ((_c = user.impactConnection) === null || _c === void 0 ? void 0 : _c.user)) {
       // Initialise with partner information
       setUserFormContext({
-        email: user.email,
+        email,
         firstName: user.impactConnection.user.firstName,
         lastName: user.impactConnection.user.lastName,
         countryCode: user.impactConnection.publisher.countryCode,
@@ -6978,17 +6995,17 @@ function useUserInfoForm(props) {
     else if (!(userFormContext === null || userFormContext === void 0 ? void 0 : userFormContext.email)) {
       // Initialise with user information
       setUserFormContext({
-        email: user.email,
+        email,
         firstName: user.firstName,
         lastName: user.lastName,
         countryCode: user.countryCode || "US",
-        currency: (_c = user.customFields) === null || _c === void 0 ? void 0 : _c.currency,
-        phoneNumberCountryCode: ((_d = user.customFields) === null || _d === void 0 ? void 0 : _d.phoneNumberCountryCode) || "US",
-        phoneNumber: (_e = user.customFields) === null || _e === void 0 ? void 0 : _e.phoneNumber,
-        address: (_f = user.customFields) === null || _f === void 0 ? void 0 : _f.address,
-        city: (_g = user.customFields) === null || _g === void 0 ? void 0 : _g.city,
-        state: (_h = user.customFields) === null || _h === void 0 ? void 0 : _h.state,
-        postalCode: (_j = user.customFields) === null || _j === void 0 ? void 0 : _j.postalCode,
+        currency: (_d = user.customFields) === null || _d === void 0 ? void 0 : _d.currency,
+        phoneNumberCountryCode: ((_e = user.customFields) === null || _e === void 0 ? void 0 : _e.phoneNumberCountryCode) || "US",
+        phoneNumber: (_f = user.customFields) === null || _f === void 0 ? void 0 : _f.phoneNumber,
+        address: (_g = user.customFields) === null || _g === void 0 ? void 0 : _g.address,
+        city: (_h = user.customFields) === null || _h === void 0 ? void 0 : _h.city,
+        state: (_j = user.customFields) === null || _j === void 0 ? void 0 : _j.state,
+        postalCode: (_k = user.customFields) === null || _k === void 0 ? void 0 : _k.postalCode,
       });
     }
   }, [data, step, userFormContext]);
@@ -7067,6 +7084,8 @@ function useUserInfoForm(props) {
     const { allowBankingCollection, ...userData } = formData;
     setUserFormContext({
       ...userFormContext,
+      firstName: userData.firstName,
+      lastName: userData.lastName,
       phoneNumberCountryCode: userData.phoneNumberCountryCode,
       phoneNumber: userData.phoneNumber,
       countryCode: userData.countryCode,

package/dist/cjs/sqm-big-stat_39.cjs.entry.js

@@ -19,8 +19,9 @@ const index$1 = require('./index-8c6255f5.js');
 const useRegistrationFormState = require('./useRegistrationFormState-f9ce55be.js');
 const utilities = require('./utilities-f7de6c04.js');
 const AsYouType = require('./AsYouType-6788393a.js');
-const ShadowViewAddon = require('./ShadowViewAddon-88821c64.js');
+const ShadowViewAddon = require('./ShadowViewAddon-040cffad.js');
 require('./sqm-portal-container-view-990a85a3.js');
+const usePayoutStatus = require('./usePayoutStatus-b9fb7399.js');
 
 const BigStat = class {
   constructor(hostRef) {
@@ -1727,6 +1728,7 @@ const style$2 = {
   PayoutButtonDescription: {
     color: "var(--sl-color-neutral-500)",
     fontSize: "var(--sl-font-size-small)",
+    margin: "0",
   },
 };
 const sheet$2 = JSS.createStyleSheet(style$2);
@@ -1744,7 +1746,14 @@ function PayoutButtonScrollView(props) {
 const PayoutButtonScroll = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    /**
+     * @uiName Payout button text
+     */
     this.payoutButtonText = "Payouts & Tax Settings";
+    /**
+     * Description text under payout button
+     * @uiName Payout button description text
+     */
     this.payoutButtonDescription = "Check your payout settings to see when you’ll get paid out next";
     this.ignored = true;
     stencilHooks_module.h$1(this);
@@ -1776,12 +1785,53 @@ const style$3 = {
     margin: "0",
     marginBottom: "var(--sl-spacing-small)",
   },
+  ErrorAlertContainer: {
+    "&::part(base)": {
+      backgroundColor: "var(--sl-color-red-100)",
+      borderTop: "none",
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-danger-500)",
+    },
+  },
+  WarningAlertContainer: {
+    "&::part(base)": {
+      backgroundColor: "var(--sl-color-yellow-100)",
+      borderTop: "none",
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-danger-500)",
+    },
+  },
+  InfoAlertContainer: {
+    "&::part(base)": {
+      backgroundColor: "var(--sl-color-sky-100)",
+      borderTop: "none",
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-blue-500)",
+    },
+  },
+  Dialog: {
+    "&::part(panel)": {
+      height: "600px",
+    },
+    "&::part(close-button)": {
+      marginBottom: "var(--sl-spacing-xx-large)",
+    },
+    "&::part(title)": {
+      display: "none",
+    },
+    "&::part(header)": {},
+    "&::part(body)": { padding: "0" },
+    "&::part(footer)": {},
+  },
 };
 const sheet$3 = JSS.createStyleSheet(style$3);
 const styleString$3 = sheet$3.toString();
 function PayoutStatusAlertView(props) {
-  var _a, _b, _c, _d;
-  const { text, states } = props;
+  var _a, _b, _c, _d, _e;
+  const { text, states, data, callbacks } = props;
   if (states.loading) {
     return index.h("sl-skeleton", { class: sheet$3.classes.SkeletonOne });
   }
@@ -1789,14 +1839,24 @@ function PayoutStatusAlertView(props) {
     return index.h("div", null);
   }
   function getAlert(status) {
+    if (states.error)
+      return {
+        header: text.errorHeader,
+        description: text.errorDescription,
+        buttonText: null,
+        alertType: "critical",
+        icon: "exclamation-triangle",
+        class: sheet$3.classes.ErrorAlertContainer,
+      };
     switch (status) {
       case "INFORMATION_REQUIRED":
         return {
           header: text.informationRequiredHeader,
           description: text.informationRequiredDescription,
-          buttonText: text.verificationRequiredButtonText,
+          buttonText: text.informationRequiredButtonText,
           alertType: "info",
-          icon: "exclamation-octagon",
+          icon: "info-circle",
+          class: sheet$3.classes.InfoAlertContainer,
         };
       case "VERIFICATION_NEEDED":
         return {
@@ -1804,7 +1864,8 @@ function PayoutStatusAlertView(props) {
           description: text.verificationRequiredDescription,
           buttonText: text.verificationRequiredButtonText,
           alertType: "warning",
-          icon: "exclamation-octagon",
+          icon: "exclamation-triangle",
+          class: sheet$3.classes.WarningAlertContainer,
         };
       case "HOLD":
         return {
@@ -1812,7 +1873,8 @@ function PayoutStatusAlertView(props) {
           description: text.holdDescription,
           buttonText: null,
           alertType: "warning",
-          icon: "exclamation-octagon",
+          icon: "exclamation-triangle",
+          class: sheet$3.classes.WarningAlertContainer,
         };
       default:
         return;
@@ -1822,81 +1884,75 @@ function PayoutStatusAlertView(props) {
   function getButton(status) {
     switch (status) {
       case "INFORMATION_REQUIRED":
-        return (index.h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": "Payout and tax settings", "scroll-animation": "smooth" }));
+        return data.type === "SquatchJS2" ? (index.h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.informationRequiredButtonText, "scroll-animation": "smooth" })) : data.type === "SquatchPortal" ? (index.h("sl-button", { type: "default", onClick: callbacks.onTermsClick }, text.informationRequiredButtonText)) : (index.h("sl-button", { type: "default" }, text.informationRequiredButtonText));
       case "VERIFICATION_NEEDED":
-        return (index.h("sl-button", { type: "default", loading: states.loading }, text.verificationRequiredButtonText));
+        return (index.h("sl-button", { type: "default", loading: states.loading, 
+          //AL: TODO callback to open verification form
+          onClick: () => callbacks.onClick }, text.verificationRequiredButtonText));
       default:
         return;
     }
   }
   return (index.h("div", { part: "sqm-base" },
     index.h("style", { type: "text/css" }, styleString$3),
-    index.h("sqm-form-message", { style: { display: "flex", gap: "2px" }, exportparts: "base: alert-base, icon:alert-icon", type: (_a = getAlert(states.status)) === null || _a === void 0 ? void 0 : _a.alertType },
-      index.h("sl-icon", { slot: "icon", name: (_b = getAlert(states.status)) === null || _b === void 0 ? void 0 : _b.icon }),
-      index.h("strong", null, (_c = getAlert(states.status)) === null || _c === void 0 ? void 0 : _c.header),
-      index.h("p", { class: sheet$3.classes.AlertDescriptionText }, (_d = getAlert(states.status)) === null || _d === void 0 ? void 0 : _d.description),
-      getButton(states.status))));
-}
-
-const GET_USER_STATUS = index_module.dist.gql `
-  query getUserStatus {
-    user: viewer {
-      ... on User {
-        id
-        impactConnection {
-          connected
-          publisher {
-            id
-            payoutsAccount {
-              hold
-            }
-          }
-        }
-      }
-    }
-  }
-`;
-function usePayoutStatus(props) {
-  const { loading, data, errors, refetch } = index_module.En(GET_USER_STATUS, {});
-  const [status, setStatus] = stencilHooks_module.useState(undefined);
-  stencilHooks_module.useEffect(() => {
-    if (!data)
-      return;
-    function getStatus(data) {
-      var _a, _b;
-      const account = (_b = (_a = data.user.impactConnection) === null || _a === void 0 ? void 0 : _a.publisher) === null || _b === void 0 ? void 0 : _b.payoutsAccount;
-      if (!account)
-        return "INFORMATION_REQUIRED";
-      if (account.hold)
-        return "HOLD";
-      // @ts-ignore, TODO: add check for account verification
-      if (!account.verified)
-        return "VERIFICATION_NEEDED";
-      return "DONE";
-    }
-    const s = getStatus(data);
-    setStatus(s);
-  }, [data]);
-  stencilHooks_module.useEffect(() => {
-    const cb = () => refetch();
-    window.addEventListener("sqm:tax-form-updated", cb);
-    return () => window.removeEventListener("sqm:tax-form-updated", cb);
-  }, []);
-  console.log({ data });
-  return { states: { loading, status }, text: props.getTextProps() };
+    index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: (_a = getAlert(states.status)) === null || _a === void 0 ? void 0 : _a.alertType, class: (_b = getAlert(states.status)) === null || _b === void 0 ? void 0 : _b.class, open: true },
+      index.h("sl-icon", { slot: "icon", name: (_c = getAlert(states.status)) === null || _c === void 0 ? void 0 : _c.icon }),
+      index.h("strong", null, (_d = getAlert(states.status)) === null || _d === void 0 ? void 0 : _d.header),
+      index.h("p", { class: sheet$3.classes.AlertDescriptionText }, (_e = getAlert(states.status)) === null || _e === void 0 ? void 0 : _e.description),
+      getButton(states.status)),
+    index.h("sl-dialog", { noDismiss: true, class: sheet$3.classes.Dialog, open: states.showVerifyIdentity, "onSl-hide": callbacks.onCancel },
+      index.h("iframe", { 
+        // AL: TODO replace iframe URL with verification url when available
+        scrolling: "yes", frameBorder: "0", width: "100%", height: "100%", src: "https://impacttech.complytaxforms.com/ServiceRedirect.aspx?Language=eng&Param1=UxBORV4bOIrqNb4gbpNmtvW3wjdZJyx4gPElIGMJNR8=&UUID=B576EA3E-80FD-4D85-AA59-653D23A7CCE8" }))));
 }
 
 const PayoutStatusAlert = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    /**
+     * @uiName Info required alert header
+     */
     this.informationRequiredHeader = "Payout and tax information required";
+    /**
+     * @uiName Info required alert description
+     */
     this.informationRequiredDescription = "Submit your banking details and tax documents to receive your rewards.";
+    /**
+     * @uiName Info required alert button text
+     */
     this.informationRequiredButtonText = "Payouts & Tax Settings";
+    /**
+     * @uiName Verification required alert header
+     */
     this.verificationRequiredHeader = "Verify your identity";
+    /**
+     * @uiName Verification required alert description
+     */
     this.verificationRequiredDescription = "Complete your verification to start receiving your cash rewards. It should only take a few minutes verify.";
+    /**
+     * @uiName Verification required alert button text
+     */
     this.verificationRequiredButtonText = "Start Verification";
+    /**
+     * @uiName Payout on hold alert header
+     */
     this.holdHeader = "Your payouts and account are on hold";
+    /**
+     * @uiName Payout on hold alert description
+     */
     this.holdDescription = "Please check your inbox for an email from our referral provider, impact.com. It contains details on how to resolve this issue. If you need further assistance, feel free to reach out to {support email}.";
+    /**
+     * @uiName Cash & Payouts Terms and Conditions url
+     */
+    this.termsUrl = "https://terms.advocate.impact.com/PayoutTermsAndConditions.html";
+    /**
+     * @uiName Error header
+     */
+    this.errorHeader = "Could not determine payout status.";
+    /**
+     * @uiName Error description
+     */
+    this.errorDescription = "There was an error with determining your payout status.";
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
@@ -1906,17 +1962,26 @@ const PayoutStatusAlert = class {
   render() {
     const props = index_module.isDemo()
       ? useDemoPayoutStatusAlert(this)
-      : usePayoutStatus(this);
+      : usePayoutStatus.usePayoutStatus(this);
+    console.log({ props });
     return index.h(PayoutStatusAlertView, Object.assign({}, props));
   }
 };
 function useDemoPayoutStatusAlert(props) {
   return cjs.cjs({
     states: {
+      error: false,
       status: "INFORMATION_REQUIRED",
       loading: false,
+      showVerifyIdentity: false,
     },
+    data: { type: "SquatchAdmin" },
     text: props.getTextProps(),
+    callbacks: {
+      onTermsClick: () => { },
+      onClick: () => console.log("show"),
+      onCancel: () => console.log("hide"),
+    },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }