@saasquatch/mint-components 1.12.0-7 → 1.12.0-9

package/dist/cjs/{useChildElements-23beb180.js → useChildElements-410d2435.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
-const index_module = require('./index.module-236d0403.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const index_module = require('./index.module-b8d9d0ba.js');
 
 function useChildElements() {
   const host = index_module.T();

package/dist/cjs/{useInstantAccessRegistration-7c125c00.js → useInstantAccessRegistration-ccf81eae.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
-const index_module = require('./index.module-236d0403.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const index_module = require('./index.module-b8d9d0ba.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
-const useRegistrationFormState = require('./useRegistrationFormState-e7e820d0.js');
+const useRegistrationFormState = require('./useRegistrationFormState-f9ce55be.js');
 
 function useInstantAccessRegistration(props) {
   const cookie = new URLSearchParams(window.location.search);

package/dist/cjs/usePayoutStatus-b9fb7399.js

@@ -0,0 +1,70 @@
+'use strict';
+
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const index_module = require('./index.module-b8d9d0ba.js');
+
+const GET_USER_STATUS = index_module.dist.gql `
+  query getUserStatus {
+    user: viewer {
+      ... on User {
+        id
+        impactConnection {
+          connected
+          publisher {
+            id
+            payoutsAccount {
+              hold
+              holdReasons
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+function getStatus(data) {
+  var _a, _b, _c, _d, _e;
+  const account = (_b = (_a = data.user.impactConnection) === null || _a === void 0 ? void 0 : _a.publisher) === null || _b === void 0 ? void 0 : _b.payoutsAccount;
+  if (!((_d = (_c = data.user) === null || _c === void 0 ? void 0 : _c.impactConnection) === null || _d === void 0 ? void 0 : _d.connected) || !account)
+    return "INFORMATION_REQUIRED";
+  if ((_e = account.holdReasons) === null || _e === void 0 ? void 0 : _e.includes("IDV_CHECK_REQUIRED"))
+    return "VERIFICATION_NEEDED";
+  if (account.hold)
+    return "HOLD";
+  return "DONE";
+}
+function usePayoutStatus(props) {
+  const { type } = index_module.getEnvironmentSDK();
+  const { loading, data, errors, refetch } = index_module.En(GET_USER_STATUS, {});
+  const [status, setStatus] = stencilHooks_module.useState(undefined);
+  const [showDialog, setShowDialog] = stencilHooks_module.useState(false);
+  stencilHooks_module.useEffect(() => {
+    if (!data)
+      return;
+    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);
+  }, []);
+  return {
+    states: {
+      loading,
+      status,
+      showVerifyIdentity: showDialog,
+      error: !!errors,
+    },
+    data: { type },
+    text: props.getTextProps(),
+    callbacks: {
+      onTermsClick: () => window.open(props.termsUrl, "_blank").focus(),
+      onClick: () => setShowDialog(true),
+      onCancel: () => setShowDialog(false),
+    },
+  };
+}
+
+exports.getStatus = getStatus;
+exports.usePayoutStatus = usePayoutStatus;

package/dist/cjs/{useReferralTable-54d0ba70.js → useReferralTable-824ac152.js}

@@ -1,15 +1,14 @@
 'use strict';
 
-const index$1 = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
-const index_module = require('./index.module-236d0403.js');
-const reRender = require('./re-render-5de6631a.js');
-const useChildElements = require('./useChildElements-23beb180.js');
-const index = require('./index-56d1fa5b.js');
+const index = require('./index-b0129cd6.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const index_module = require('./index.module-b8d9d0ba.js');
+const reRender = require('./re-render-5bde3d2e.js');
+const useChildElements = require('./useChildElements-410d2435.js');
 
 const debug = stencilHooks_module.browser("sq:useReferralTable");
 const CSS_NAMESPACE = "sqm-referral-table";
-const GET_REFERRER_DATA = index.dist.gql `
+const GET_REFERRER_DATA = index_module.dist.gql `
   query getReferrals(
     $programId: ID
     $rewardFilter: RewardFilterInput
@@ -78,7 +77,7 @@ const GET_REFERRER_DATA = index.dist.gql `
     }
   }
 `;
-const GET_REFERRAL_DATA = index.dist.gql `
+const GET_REFERRAL_DATA = index_module.dist.gql `
   query getReferrals(
     $limit: Int!
     $offset: Int!
@@ -215,7 +214,7 @@ const GET_REFERRAL_DATA = index.dist.gql `
     }
   }
 `;
-const GET_IMPACT_TAX = index.dist.gql `
+const GET_IMPACT_TAX = index_module.dist.gql `
   query getImpactTax {
     viewer {
       ... on User {
@@ -312,12 +311,12 @@ function useReferralTable(props, emptyElement, loadingElement) {
     // show the referrer row before any other rows
     let referrerRow;
     if (showReferrerRow && states.currentPage === 0) {
-      const referrerPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderReferrerCell(referrerData, locale, index$1.h)));
+      const referrerPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderReferrerCell(referrerData, locale, index.h)));
       referrerRow = await Promise.all(referrerPromise);
     }
     // get the column cells (renderCell is asynchronous)
     const cellsPromise = data === null || data === void 0 ? void 0 : data.map(async (r) => {
-      const cellPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderCell(r, { locale, taxConnection }, index$1.h)));
+      const cellPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderCell(r, { locale, taxConnection }, index.h)));
       const cells = (await Promise.all(cellPromise));
       return cells;
     });
@@ -405,7 +404,7 @@ async function tryMethod(c, callback) {
       debug("label promise failed", e);
     }
     debug("label promise failed", e);
-    return index$1.h("span", null);
+    return index.h("span", null);
   }
   try {
     return await renderPromise;
@@ -415,8 +414,8 @@ async function tryMethod(c, callback) {
     // This should not happen so we fail fast
     debug("Error rendering label", e);
     const userError = generateUserError(e);
-    return (index$1.h("details", null,
-      index$1.h("summary", null, "Error"),
+    return (index.h("details", null,
+      index.h("summary", null, "Error"),
       userError));
   }
 }

package/dist/cjs/{useRegistrationFormState-e7e820d0.js → useRegistrationFormState-f9ce55be.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
-const index_module = require('./index.module-236d0403.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const index_module = require('./index.module-b8d9d0ba.js');
 
 const REGISTRATION_FORM_STATE_CONTEXT = "sq:registration-form-state";
 function useRegistrationFormState(formState) {

package/dist/cjs/{useVerificationEmail-35aea294.js → useVerificationEmail-6aacdb71.js}

@@ -1,10 +1,9 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
-const index_module = require('./index.module-236d0403.js');
-const index = require('./index-56d1fa5b.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const index_module = require('./index.module-b8d9d0ba.js');
 
-const UserLookupQuery = index.dist.gql `
+const UserLookupQuery = index_module.dist.gql `
   query userLookup {
     viewer {
       ... on User {
@@ -21,21 +20,21 @@ const UserLookupQuery = index.dist.gql `
     }
   }
 `;
-const ParticipantVerificationEmailMutation = index.dist.gql `
+const ParticipantVerificationEmailMutation = index_module.dist.gql `
   mutation requestUserEmailVerification($user: UserIdInput!) {
     requestUserEmailVerification(user: $user) {
       success
     }
   }
 `;
-const ImpactVerificationEmailMutation = index.dist.gql `
+const ImpactVerificationEmailMutation = index_module.dist.gql `
   mutation requestImpactPublisherEmail2FA($user: UserIdInput!) {
     requestImpactPublisherEmail2FA(user: $user) {
       success
     }
   }
 `;
-const VerifyUserEmailMutation = index.dist.gql `
+const VerifyUserEmailMutation = index_module.dist.gql `
   mutation verifyUserEmail($user: UserIdInput!, $code: String!) {
     verifyUserEmail(user: $user, code: $code) {
       id
@@ -45,7 +44,7 @@ const VerifyUserEmailMutation = index.dist.gql `
     }
   }
 `;
-const SubmitImpactCodeMutation = index.dist.gql `
+const SubmitImpactCodeMutation = index_module.dist.gql `
   mutation submitImpactPublisherEmail2FACode(
     $user: UserIdInput!
     $code: String!

package/dist/cjs/{utilities-ac5b5f2c.js → utilities-f7de6c04.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
-const index_module = require('./index.module-236d0403.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const index_module = require('./index.module-b8d9d0ba.js');
 
 // import { IntlMessageFormat } from 'intl-messageformat';
 function isMobile(breakPoint) {

package/dist/collection/components/sqm-big-stat/useBigStat.js

@@ -709,9 +709,12 @@ const payoutBalanceQuery = () => {
       query payoutBalance {
         viewer: viewer {
           ... on User {
-            publisher {
-              payoutsAccount {
-                balance
+            id
+            impactConnection {
+              publisher {
+                payoutsAccount {
+                  balance
+                }
               }
             }
           }

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

@@ -46,9 +46,6 @@ export function useWidgetCodeVerification(props) {
   const [codeRef, setCodeRef] = useState(null);
   const [validationError, setValidationError] = useState(false);
   const [emailError, setEmailError] = useState(false);
-  // // TODO: Need to handle error states for these errors
-  // const [verifyUser, { loading: verifyLoading, errors: verifyErrors }] =
-  //   useCodeVerificationMutation();
   const { initialized, send: [sendEmail, { loading: sendLoading, errors: sendErrors }], verify: [verifyEmail, { loading: verifyLoading, errors: verifyErrors }], } = useVerificationEmail();
   useEffect(() => {
     if (!codeRef)

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

@@ -7,7 +7,7 @@ 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 {
+  query checkUserVerification {
     viewer {
       ... on User {
         id
@@ -42,7 +42,7 @@ function useWidgetVerificationInternal() {
           setContext(true);
       }
       catch (e) {
-        console.error("Could not fetch user information", e);
+        console.error("Could not fetch user information:", e);
       }
       finally {
         setLoading(false);

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

@@ -247,6 +247,8 @@ const docusignFormProps = {
 };
 const dashboardProps = {
   states: {
+    showVerifyIdentity: false,
+    payoutStatus: "DONE",
     canEditPayoutInfo: true,
     disabled: false,
     status: "ACTIVE",
@@ -765,6 +767,8 @@ export const TaxAndCashDashboardActiveW8BENForm = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
+        payoutStatus: "DONE",
+        showVerifyIdentity: false,
         noFormNeeded: false,
         canEditPayoutInfo: true,
         documentType: "W8BEN",
@@ -781,6 +785,8 @@ export const TaxAndCashDashboardActiveW8BENEForm = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
+        payoutStatus: "DONE",
+        showVerifyIdentity: false,
         noFormNeeded: false,
         canEditPayoutInfo: true,
         documentType: "W8BENE",
@@ -797,6 +803,8 @@ export const TaxAndCashDashboardNotActiveW9Form = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
+        payoutStatus: "DONE",
+        showVerifyIdentity: false,
         noFormNeeded: false,
         canEditPayoutInfo: true,
         status: "INACTIVE",
@@ -814,6 +822,8 @@ export const TaxAndCashDashboardNotVerifiedW9Form = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
+        payoutStatus: "DONE",
+        showVerifyIdentity: false,
         canEditPayoutInfo: true,
         disabled: false,
         status: "NOT_VERIFIED",
@@ -832,6 +842,8 @@ export const TaxAndCashDashboardNotVerifiedW8BENForm = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
+        payoutStatus: "DONE",
+        showVerifyIdentity: false,
         canEditPayoutInfo: true,
         disabled: false,
         status: "NOT_VERIFIED",
@@ -851,6 +863,8 @@ export const TaxAndCashDashboardNotVerifiedW8BENEForm = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
+        payoutStatus: "DONE",
+        showVerifyIdentity: false,
         canEditPayoutInfo: true,
         disabled: false,
         status: "NOT_VERIFIED",
@@ -870,6 +884,8 @@ export const TaxAndCashDashboardNotActiveW8BENEForm = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
+        payoutStatus: "DONE",
+        showVerifyIdentity: false,
         canEditPayoutInfo: true,
         disabled: false,
         status: "NOT_ACTIVE",
@@ -889,6 +905,8 @@ export const TaxAndCashDashboardNoFormNeeded = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
+        payoutStatus: "DONE",
+        showVerifyIdentity: false,
         canEditPayoutInfo: true,
         disabled: false,
         documentType: "W9",
@@ -908,6 +926,8 @@ export const TaxAndCashDashboardIndirectTaxCanada = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
+        payoutStatus: "DONE",
+        showVerifyIdentity: false,
         canEditPayoutInfo: true,
         status: "ACTIVE",
         disabled: false,
@@ -928,6 +948,8 @@ export const TaxAndCashDashboardIndirectTaxCanadaQuebec = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
+        payoutStatus: "DONE",
+        showVerifyIdentity: false,
         canEditPayoutInfo: true,
         status: "ACTIVE",
         disabled: false,
@@ -949,6 +971,8 @@ export const TaxAndCashDashboardIndirectTaxSpain = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
+        payoutStatus: "DONE",
+        showVerifyIdentity: false,
         canEditPayoutInfo: true,
         status: "ACTIVE",
         disabled: false,
@@ -970,6 +994,8 @@ export const TaxAndCashDashboardIndirectTaxNotRegistered = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
+        payoutStatus: "DONE",
+        showVerifyIdentity: false,
         canEditPayoutInfo: true,
         status: "ACTIVE",
         documentType: "W8BEN",
@@ -986,6 +1012,8 @@ export const TaxAndCashDashboardIdentityVerifcationRequired = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
+        payoutStatus: "VERIFICATION_NEEDED",
+        showVerifyIdentity: true,
         showIdentityVerificationDialog: true,
         identiyRequired: true,
         canEditPayoutInfo: true,
@@ -1004,6 +1032,8 @@ export const TaxAndCashDashboardNewTaxForm = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
+        payoutStatus: "DONE",
+        showVerifyIdentity: false,
         canEditPayoutInfo: true,
         status: "ACTIVE",
         documentType: "W8BEN",
@@ -1020,6 +1050,8 @@ export const TaxAndCashDashboardPayoutsOnHold = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
+        payoutStatus: "DONE",
+        showVerifyIdentity: false,
         canEditPayoutInfo: true,
         disabled: true,
         status: "ACTIVE",
@@ -1038,6 +1070,8 @@ export const TaxAndCashDashboardLoading = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
+        payoutStatus: "DONE",
+        showVerifyIdentity: false,
         canEditPayoutInfo: true,
         disabled: false,
         status: "ACTIVE",
@@ -1055,6 +1089,8 @@ export const TaxAndCashDashboardWithLoadingError = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
+        payoutStatus: "DONE",
+        showVerifyIdentity: false,
         disabled: false,
         canEditPayoutInfo: true,
         status: "ACTIVE",
@@ -1073,6 +1109,8 @@ export const TaxAndCashDashboardWithGeneralError = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
+        payoutStatus: "DONE",
+        showVerifyIdentity: false,
         canEditPayoutInfo: true,
         disabled: false,
         status: "ACTIVE",
@@ -1095,6 +1133,8 @@ export const TaxAndCashDashboardDisabled = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
+        payoutStatus: "DONE",
+        showVerifyIdentity: false,
         canEditPayoutInfo: true,
         disabled: true,
         status: "ACTIVE",

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

@@ -3,6 +3,7 @@ export default {
   title: "Components/Payout Status Alert",
 };
 const defaultProps = {
+  error: false,
   status: "INFORMATION_REQUIRED",
   loading: false,
   showVerifyIdentity: false,
@@ -18,3 +19,4 @@ export const VerifyIdentityOpen = () => (h("sqm-payout-status-alert", { demoData
   } }));
 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 } } }));
+export const Error = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, error: true } } }));

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

@@ -9,6 +9,15 @@ const style = {
     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)",
@@ -27,6 +36,20 @@ const style = {
       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 = createStyleSheet(style);
 const styleString = sheet.toString();
@@ -40,6 +63,15 @@ export function PayoutStatusAlertView(props) {
     return 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.classes.ErrorAlertContainer,
+      };
     switch (status) {
       case "INFORMATION_REQUIRED":
         return {
@@ -92,7 +124,8 @@ export function PayoutStatusAlertView(props) {
       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)),
-    h("sl-dialog", { 
-      // class={sheet.classes.Dialog}
-      open: states.showVerifyIdentity, "onSl-hide": callbacks.onCancel }, "AL: TODO add IFRAME URL")));
+    h("sl-dialog", { noDismiss: true, class: sheet.classes.Dialog, open: states.showVerifyIdentity, "onSl-hide": callbacks.onCancel },
+      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" }))));
 }

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

@@ -48,6 +48,14 @@ export class PayoutStatusAlert {
      * @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.";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -58,6 +66,7 @@ export class PayoutStatusAlert {
     const props = isDemo()
       ? useDemoPayoutStatusAlert(this)
       : usePayoutStatus(this);
+    console.log({ props });
     return h(PayoutStatusAlertView, Object.assign({}, props));
   }
   static get is() { return "sqm-payout-status-alert"; }
@@ -252,12 +261,54 @@ export class PayoutStatusAlert {
       "reflect": false,
       "defaultValue": "\"https://terms.advocate.impact.com/PayoutTermsAndConditions.html\""
     },
+    "errorHeader": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Error header",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "error-header",
+      "reflect": false,
+      "defaultValue": "\"Could not determine payout status.\""
+    },
+    "errorDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Error description",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "error-description",
+      "reflect": false,
+      "defaultValue": "\"There was an error with determining your payout status.\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<PayoutStatusAlertViewProps>",
-        "resolved": "{ states?: { loading: boolean; status: PayoutStatus; showVerifyIdentity: boolean; }; data?: { type: \"SquatchJS2\" | \"SquatchAndroid\" | \"SquatchIOS\" | \"SquatchPortal\" | \"SquatchAdmin\" | \"None\"; }; }",
+        "resolved": "{ states?: { error: boolean; loading: boolean; status: PayoutStatus; showVerifyIdentity: boolean; }; data?: { type: \"SquatchJS2\" | \"SquatchAndroid\" | \"SquatchIOS\" | \"SquatchPortal\" | \"SquatchAdmin\" | \"None\"; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -287,6 +338,7 @@ export class PayoutStatusAlert {
 function useDemoPayoutStatusAlert(props) {
   return deepmerge({
     states: {
+      error: false,
       status: "INFORMATION_REQUIRED",
       loading: false,
       showVerifyIdentity: false,