npm - @saasquatch/mint-components - Versions diffs - 1.12.0-6 → 1.12.0-8 - Mend

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

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 (353) hide show

package/dist/cjs/sqm-stencilbook.cjs.entry.js CHANGED Viewed

@@ -3,16 +3,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
-require('./global-e4ebdbcc.js');
-const index_module = require('./index.module-236d0403.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+require('./global-c3637175.js');
+const index_module = require('./index.module-b8d9d0ba.js');
 require('./cjs-1066ec21.js');
 require('./mixins-fe9d4112.js');
 const JSS = require('./JSS-8503a151.js');
 const GenericTableView = require('./GenericTableView-80d7642e.js');
-require('./useChildElements-23beb180.js');
-const luxon = require('./luxon-20eafbd9.js');
-const index$1 = require('./index-56d1fa5b.js');
+require('./useChildElements-410d2435.js');
+const luxon = require('./luxon-05098e19.js');
 require('./utils-6847bc06.js');
 require('./sqm-text-span-view-e1cd9bd3.js');
 const sqmAssetCardView = require('./sqm-asset-card-view-a0e33f21.js');
@@ -22,16 +21,16 @@ const emailRegistrationView = require('./email-registration-view-248652bb.js');
 const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-5a3d4a88.js');
 const sqmLogoutCurrentUserView = require('./sqm-logout-current-user-view-c9f18d96.js');
 const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-921704fb.js');
-const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-fc865ecf.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-4bc2760b.js');
+const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-a2135064.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-050dbe0f.js');
 const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-969c49ed.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-cbab7c80.js');
-require('./utilities-ac5b5f2c.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-d97086bc.js');
+require('./utilities-f7de6c04.js');
 const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-96f329ed.js');
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-7ffcc0d4.js');
-const ShadowViewAddon = require('./ShadowViewAddon-13173901.js');
+const ShadowViewAddon = require('./ShadowViewAddon-040cffad.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-990a85a3.js');
-const sqmInvoiceTableView = require('./sqm-invoice-table-view-e530775f.js');
+const sqmInvoiceTableView = require('./sqm-invoice-table-view-5d3a2d35.js');
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -3461,7 +3460,7 @@ const FormMessage = /*#__PURE__*/Object.freeze({
   FullStackSuccess: FullStackSuccess
 });
-const EXCHANGE = index$1.dist.gql `
+const EXCHANGE = index_module.dist.gql `
   mutation exchange($exchangeRewardInput: ExchangeRewardInput!) {
     exchangeReward(exchangeRewardInput: $exchangeRewardInput) {
       reward {
@@ -15113,6 +15112,7 @@ const PayoutStatusAlert_stories = {
   title: "Components/Payout Status Alert",
 };
 const defaultProps$n = {
+  error: false,
   status: "INFORMATION_REQUIRED",
   loading: false,
   showVerifyIdentity: false,
@@ -15128,6 +15128,7 @@ const VerifyIdentityOpen = () => (index.h("sqm-payout-status-alert", { demoData:
   } }));
 const Hold = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$n, status: "HOLD" } } }));
 const Loading$9 = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$n, loading: true } } }));
+const Error$a = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$n, error: true } } }));
 const PayoutStatusAlert = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -15136,7 +15137,8 @@ const PayoutStatusAlert = /*#__PURE__*/Object.freeze({
   VerifyIdentity: VerifyIdentity,
   VerifyIdentityOpen: VerifyIdentityOpen,
   Hold: Hold,
-  Loading: Loading$9
+  Loading: Loading$9,
+  Error: Error$a
 });
 /**
@@ -17871,7 +17873,7 @@ const StencilStorybook = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {

package/dist/cjs/sqm-tab.cjs.entry.js CHANGED Viewed

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
-require('./index.module-236d0403.js');
-const reRender = require('./re-render-5de6631a.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+require('./index.module-b8d9d0ba.js');
+const reRender = require('./re-render-5bde3d2e.js');
 const TabView = ({}, children) => {
   return index.h(index.Host, null, children);
@@ -14,7 +14,7 @@ const TabView = ({}, children) => {
 const Tab = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {

package/dist/cjs/sqm-tabs.cjs.entry.js CHANGED Viewed

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = 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 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 utils = require('./utils-6847bc06.js');
 const TabsView = ({ content, placement, }) => {
@@ -86,7 +86,7 @@ function useTabs() {
 const Tabs = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {

package/dist/cjs/sqm-text-span.cjs.entry.js CHANGED Viewed

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
 require('./JSS-8503a151.js');
 const sqmTextSpanView = require('./sqm-text-span-view-e1cd9bd3.js');
@@ -11,7 +11,7 @@ const Text = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   componentWillLoad() { }

package/dist/cjs/sqm-widget-verification-internal.cjs.entry.js CHANGED Viewed

@@ -2,16 +2,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-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 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 utils = require('./utils-6847bc06.js');
 const keys = require('./keys-cff24974.js');
 const extractProps = require('./extractProps-fd93ba62.js');
-const USER_LOOKUP = index.dist.gql `
-  query viewer {
+const USER_LOOKUP = index_module.dist.gql `
+  query checkUserVerification {
     viewer {
       ... on User {
         id
@@ -46,7 +45,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);
@@ -61,8 +60,8 @@ function useWidgetVerificationInternal() {
 }
 const WidgetVerificationInternal = class {
   constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
-    stencilHooks_module.h(this);
+    index.registerInstance(this, hostRef);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   getStepTextProps(prefix) {
@@ -73,14 +72,16 @@ const WidgetVerificationInternal = class {
     const { showCode, onVerification, loading } = index_module.isDemo()
       ? useDemoWidgetVerificationInternal()
       : useWidgetVerificationInternal();
-    if (loading) {
-      // TODO: Proper loading state
-      return index$1.h("div", null, "Loading");
-    }
+    // TODO: Shoelace spinner is throwing errors
+    if (loading)
+      return index.h("div", null);
+    // if (loading) {
+    //   return <sl-spinner style="font-size: 2rem;"></sl-spinner>;
+    // }
     if (showCode) {
-      return (index$1.h("sqm-code-verification", Object.assign({ onVerification: onVerification }, this.getStepTextProps("codeStep_"))));
+      return (index.h("sqm-code-verification", Object.assign({ onVerification: onVerification }, this.getStepTextProps("codeStep_"))));
     }
-    return (index$1.h("sqm-email-verification", Object.assign({}, this.getStepTextProps("emailStep_"))));
+    return (index.h("sqm-email-verification", Object.assign({}, this.getStepTextProps("emailStep_"))));
   }
 };
 function useDemoWidgetVerificationInternal() {

package/dist/cjs/sqm-widget-verification.cjs.entry.js CHANGED Viewed

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
-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 utils = require('./utils-6847bc06.js');
 const keys = require('./keys-cff24974.js');
@@ -123,7 +123,7 @@ const WidgetVerification = class {
      * @uiGroup Code Verification Step
      */
     this.codeStep_networkErrorMessage = "An error occurred while verifying your email. Please refresh the page and try again.";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {

package/dist/cjs/{stencil-hooks.module-a5a04d8a.js → stencil-hooks.module-72742a0b.js} RENAMED Viewed

@@ -1114,14 +1114,17 @@ function c$1(){return (c$1=Object.assign||function(e){for(var t=1;t<arguments.le
 function s$2(){return index.getRenderingRef()}function l$1(){var e=s$2();return index.getElement(e)}function d$2(e,t){void 0===t&&(t={});var n=l$1();return h$1(n,e,t)}function m$2(e,t){var n=l$1();return y$1(n,e,t)}var p$1=browser("stencil-hook");function h$2(t){var r,u=index.getElement(t),c=(r=!1,new State(function(){p$1("Queue update on element",u),r||(r=!0,Promise.resolve().then(function(){p$1("Forced update on element",u),r=!1,index.forceUpdate(u);}));},u)),a=t.disconnectedCallback;if(!a)throw new Error("Stencil hooks requires `disconnectedCallback` to be defined (even if it's empty). This is because of how the Stencil compiler works internally");t.disconnectedCallback=function(){c.teardown(),v(a);};var i=t.connectedCallback;t.connectedCallback=function(){c.update(),v(i);};var f=t.render.bind(t);t.render=function(){var e=c.run(f);return c.runEffects(),e};}function v(e){"function"==typeof e&&e();}
 exports.browser = browser;
+exports.c = c;
 exports.commonjsGlobal = commonjsGlobal;
 exports.createCommonjsModule = createCommonjsModule;
 exports.d = d$2;
 exports.getAugmentedNamespace = getAugmentedNamespace;
 exports.getDefaultExportFromCjs = getDefaultExportFromCjs;
-exports.h = h$2;
+exports.h = h$1;
+exports.h$1 = h$2;
 exports.l = l$1;
 exports.m = m$2;
+exports.s = s$1;
 exports.useEffect = useEffect;
 exports.useMemo = useMemo;
 exports.useReducer = useReducer;

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

@@ -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} RENAMED Viewed

@@ -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/{useReferralTable-54d0ba70.js → useReferralTable-824ac152.js} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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 CHANGED Viewed

@@ -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-widget-verification-internal.js CHANGED Viewed

@@ -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
@@ -34,7 +34,6 @@ function useWidgetVerificationInternal() {
   useEffect(() => {
     const checkUser = async () => {
       var _a;
-      let result = null;
       try {
         const res = await fetch({});
         if (!res || res instanceof Error)
@@ -43,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);
@@ -69,10 +68,12 @@ export class WidgetVerificationInternal {
     const { showCode, onVerification, loading } = isDemo()
       ? useDemoWidgetVerificationInternal()
       : useWidgetVerificationInternal();
-    if (loading) {
-      // TODO: Proper loading state
-      return h("div", null, "Loading");
-    }
+    // TODO: Shoelace spinner is throwing errors
+    if (loading)
+      return h("div", null);
+    // if (loading) {
+    //   return <sl-spinner style="font-size: 2rem;"></sl-spinner>;
+    // }
     if (showCode) {
       return (h("sqm-code-verification", Object.assign({ onVerification: onVerification }, this.getStepTextProps("codeStep_"))));
     }

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

@@ -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 CHANGED Viewed

@@ -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)",
@@ -32,7 +41,7 @@ const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function PayoutStatusAlertView(props) {
   var _a, _b, _c, _d, _e;
-  const { text, states, callbacks } = props;
+  const { text, states, data, callbacks } = props;
   if (states.loading) {
     return h("sl-skeleton", { class: sheet.classes.SkeletonOne });
   }
@@ -40,12 +49,21 @@ 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 {
           header: text.informationRequiredHeader,
           description: text.informationRequiredDescription,
-          buttonText: text.verificationRequiredButtonText,
+          buttonText: text.informationRequiredButtonText,
           alertType: "info",
           icon: "info-circle",
           class: sheet.classes.InfoAlertContainer,
@@ -76,7 +94,7 @@ export function PayoutStatusAlertView(props) {
   function getButton(status) {
     switch (status) {
       case "INFORMATION_REQUIRED":
-        return (h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": "Payout and tax settings", "scroll-animation": "smooth" }));
+        return data.type === "SquatchJS2" ? (h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.informationRequiredButtonText, "scroll-animation": "smooth" })) : data.type === "SquatchPortal" ? (h("sl-button", { type: "default", onClick: callbacks.onTermsClick }, text.informationRequiredButtonText)) : (h("sl-button", { type: "default" }, text.informationRequiredButtonText));
       case "VERIFICATION_NEEDED":
         return (h("sl-button", { type: "default", loading: states.loading,
           //AL: TODO callback to open verification form