@saasquatch/mint-components 1.12.0-2 → 1.12.0-21

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-2eb28c2a.js

@@ -0,0 +1,173 @@
+'use strict';
+
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const index_module = require('./index.module-b8d9d0ba.js');
+
+const UserLookupQuery = index_module.dist.gql `
+  query userLookup {
+    viewer {
+      ... on User {
+        id
+        accountId
+        email
+        impactConnection {
+          user {
+            id
+            email
+          }
+        }
+      }
+    }
+  }
+`;
+const ParticipantVerificationEmailMutation = index_module.dist.gql `
+  mutation requestUserEmailVerification($user: UserIdInput!) {
+    requestUserEmailVerification(user: $user) {
+      success
+    }
+  }
+`;
+const ImpactVerificationEmailMutation = index_module.dist.gql `
+  mutation requestImpactPublisherEmail2FA($user: UserIdInput!) {
+    requestImpactPublisherEmail2FA(user: $user) {
+      success
+    }
+  }
+`;
+const VerifyUserEmailMutation = index_module.dist.gql `
+  mutation verifyUserEmail($user: UserIdInput!, $code: String!) {
+    verifyUserEmail(user: $user, code: $code) {
+      id
+      accountId
+      email
+      emailVerified
+    }
+  }
+`;
+const SubmitImpactCodeMutation = index_module.dist.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
+function useVerificationEmail() {
+  const userIdentity = index_module.K();
+  const [verificationEmail, setVerificationEmail] = stencilHooks_module.useState(null);
+  const [hasEmails, setHasEmails] = stencilHooks_module.useState({
+    participant: false,
+    impact: false,
+  });
+  const [fetch] = index_module.an(UserLookupQuery);
+  // Send mutations
+  const [sendParticipantEmail, { loading: participantEmailLoading, errors: participantEmailErrors },] = index_module.xe(ParticipantVerificationEmailMutation);
+  const [sendImpactEmail, { loading: impactEmailLoading, errors: impactEmailErrors },] = index_module.xe(ImpactVerificationEmailMutation);
+  const sendLoading = participantEmailLoading || impactEmailLoading;
+  const sendErrors = participantEmailErrors || impactEmailErrors;
+  // Verification mutations
+  const [verifyUserEmail, { loading: verifyMutationLoading, errors: verifyMutationErrors },] = index_module.xe(VerifyUserEmailMutation);
+  const [submitImpactCode, { loading: submitImpactCodeLoading, errors: submitImpactCodeErrors },] = index_module.xe(SubmitImpactCodeMutation);
+  const verifyLoading = verifyMutationLoading || submitImpactCodeLoading;
+  const verifyErrors = verifyMutationErrors || submitImpactCodeErrors;
+  const [initialized, setInitialized] = stencilHooks_module.useState(false);
+  const initialise = async () => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    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),
+      });
+      setVerificationEmail(((_g = (_f = (_e = lookup === null || lookup === void 0 ? void 0 : lookup.viewer) === null || _e === void 0 ? void 0 : _e.impactConnection) === null || _f === void 0 ? void 0 : _f.user) === null || _g === void 0 ? void 0 : _g.email) || ((_h = lookup === null || lookup === void 0 ? void 0 : lookup.viewer) === null || _h === void 0 ? void 0 : _h.email) ||
+        null);
+      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;
+    }
+  };
+  stencilHooks_module.useEffect(() => {
+    if (!initialized)
+      initialise();
+  }, []);
+  return {
+    initialized,
+    verificationEmail,
+    send: [
+      sendVerificationEmail,
+      { loading: sendLoading, errors: sendErrors },
+    ],
+    verify: [
+      verifyVerificationEmail,
+      { loading: verifyLoading, errors: verifyErrors },
+    ],
+  };
+}
+
+exports.useVerificationEmail = useVerificationEmail;

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/collection-manifest.json

@@ -108,10 +108,10 @@
     "./components/sqm-timeline/sqm-timeline.js",
     "./components/sqm-titled-section/sqm-titled-section.js",
     "./components/sqm-user-name/sqm-user-name.js",
-    "./components/sqm-widget-verification/sqm-widget-verification-internal.js",
+    "./components/sqm-widget-verification/sqm-widget-verification-controller.js",
     "./components/sqm-widget-verification/sqm-widget-verification.js",
-    "./components/sqm-widget-verification/sqm-email-verification/sqm-email-verification.js",
     "./components/sqm-widget-verification/sqm-code-verification/sqm-code-verification.js",
+    "./components/sqm-widget-verification/sqm-email-verification/sqm-email-verification.js",
     "./components/tax-and-cash/sqm-payout-details-card/sqm-payout-details-card.js",
     "./components/tax-and-cash/sqm-tax-and-cash/sqm-tax-and-cash.js"
   ],

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-payout-button-scroll/PayoutButtonScroll.stories.js

@@ -6,3 +6,10 @@ const defaultProps = {
   payoutSettingsComplete: true,
 };
 export const CompletedTaxForm = () => (h("sqm-payout-button-scroll", { demoData: { states: { ...defaultProps, payoutSettingsComplete: true } } }));
+export const CompletedTaxFormWithStatsContainer = () => (h("sqm-portal-container", { display: "flex", maxWidth: "100%", minWidth: "100%", "justify-content": "space-between", flexWrap: "nowrap" },
+  h("sqm-portal-container", { display: "flex", "max-width": "fit-content" },
+    h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/referralsCount" },
+      h("p", null, "Referrals")),
+    h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/payoutBalance" },
+      h("p", null, "Cash Balance"))),
+  h("sqm-payout-button-scroll", { demoData: { states: { ...defaultProps, payoutSettingsComplete: true } } })));

package/dist/collection/components/sqm-payout-button-scroll/sqm-payout-button-scroll-view.js

@@ -3,6 +3,7 @@ import { createStyleSheet } from "../../styling/JSS";
 const style = {
   Wrapper: {
     maxWidth: "200px",
+    marginLeft: "auto",
   },
   PayoutButtonDescription: {
     color: "var(--sl-color-neutral-500)",
@@ -16,7 +17,7 @@ export function PayoutButtonScrollView(props) {
   const { text, states } = props;
   if (!states.payoutSettingsComplete)
     return h("div", null);
-  return (h("div", { part: "sqm-base", class: sheet.classes.Wrapper },
+  return (h("div", { class: sheet.classes.Wrapper },
     h("style", { type: "text/css" }, styleString),
     h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.payoutButtonText, "scroll-animation": "smooth" }),
     h("p", { class: sheet.classes.PayoutButtonDescription }, text.payoutButtonDescription)));

package/dist/collection/components/sqm-payout-button-scroll/sqm-payout-button-scroll.js

@@ -1,8 +1,10 @@
 import { Component, h, Prop, State } from "@stencil/core";
 import { withHooks } from "@saasquatch/stencil-hooks";
+import { isDemo } from "@saasquatch/component-boilerplate";
 import { getProps } from "../../utils/utils";
 import { PayoutButtonScrollView, } from "./sqm-payout-button-scroll-view";
 import deepmerge from "deepmerge";
+import { usePayoutButton } from "./usePayoutButton";
 /**
  * @uiName Payout Button Scroll
  */
@@ -25,7 +27,9 @@ export class PayoutButtonScroll {
     return getProps(this);
   }
   render() {
-    const props = useDemoPayoutButtonScroll(this);
+    const props = isDemo()
+      ? useDemoPayoutButtonScroll(this)
+      : usePayoutButton(this);
     return h(PayoutButtonScrollView, Object.assign({}, props));
   }
   static get is() { return "sqm-payout-button-scroll"; }

package/dist/collection/components/sqm-payout-button-scroll/usePayoutButton.js

@@ -1,6 +1,6 @@
 import { gql } from "graphql-request";
 import { useQuery } from "@saasquatch/component-boilerplate";
-import { useEffect, useState } from "@saasquatch/universal-hooks";
+import { useEffect } from "@saasquatch/universal-hooks";
 const GET_PAYOUT_DETAILS = gql `
   query getPayoutDetails {
     user: viewer {
@@ -21,15 +21,8 @@ const GET_PAYOUT_DETAILS = gql `
   }
 `;
 export function usePayoutButton(props) {
+  var _a, _b, _c;
   const { data, refetch } = useQuery(GET_PAYOUT_DETAILS, {});
-  const [completed, setCompleted] = useState(false);
-  useEffect(() => {
-    var _a, _b, _c;
-    if (!data)
-      return;
-    const hasCompleted = (_c = (_b = (_a = data.user) === null || _a === void 0 ? void 0 : _a.impactConnection) === null || _b === void 0 ? void 0 : _b.publisher) === null || _c === void 0 ? void 0 : _c.payoutAccount;
-    setCompleted(hasCompleted);
-  }, [data]);
   useEffect(() => {
     const cb = () => refetch();
     window.addEventListener("sqm:tax-form-updated", cb);
@@ -37,7 +30,7 @@ export function usePayoutButton(props) {
   }, []);
   return {
     states: {
-      payoutSettingsComplete: completed,
+      payoutSettingsComplete: !!((_c = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.impactConnection) === null || _b === void 0 ? void 0 : _b.publisher) === null || _c === void 0 ? void 0 : _c.payoutsAccount),
     },
     text: props.getTextProps(),
   };

package/dist/collection/components/sqm-referral-table/ReferralTable.stories.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { GenericTableView } from "../../tables/GenericTableView";
-import { AvailableNoExpiry, PendingNoUnpend, Redeemed, Denied, PendingReview, PayoutSent, PayoutFailed, PendingNewTaxForm, PendingPartnerCreation, PendingTaxReview, PendingTaxSubmission, } from "./ReferralTableRewardsCell.stories";
+import { AvailableNoExpiry, PendingNoUnpend, Redeemed, Denied, PendingReview, PayoutSent, PayoutFailed, PendingNewTaxForm, PendingPartnerCreation, PendingTaxReview, PendingTaxSubmission, PayoutCancelled, } from "./ReferralTableRewardsCell.stories";
 import { DateCell, PendingReview as PendingReviewStatus, Pending as PendingStatus, Denied as DeniedStatus, Converted as ConvertedStatus, InProgress, } from "./ReferralTableCell.stories";
 import scenario from "./referral-table.feature";
 export default {
@@ -132,6 +132,12 @@ const simpleUserTableProps = {
         h(DateCell, null),
         h(PayoutFailed, null),
       ],
+      [
+        h("sqm-referral-table-user-cell", { name: "Sarah Joseph" }),
+        h(ConvertedStatus, null),
+        h(DateCell, null),
+        h(PayoutCancelled, null),
+      ],
       [
         h("sqm-referral-table-user-cell", { name: "Sarah Joseph" }),
         h(ConvertedStatus, null),

package/dist/collection/components/sqm-referral-table/ReferralTableRewardsCell.stories.js

@@ -126,6 +126,9 @@ const deniedReward = {
 const payoutFailedReward = {
   statuses: ["PAYOUT_FAILED"],
 };
+const payoutCancelledReward = {
+  statuses: ["PAYOUT_CANCELLED"],
+};
 const pendingReviewReward = {
   statuses: ["PENDING_REVIEW"],
 };
@@ -205,8 +208,8 @@ function getMonths() {
 function getYears() {
   return DateTime.now().toMillis() + 200000000000;
 }
-const statusText = "{status, select, AVAILABLE {Available} PAYOUT_SENT {Payout Sent} CANCELLED {Cancelled} PAYOUT_FAILED {Payout Failed} PENDING {Pending} PENDING_REVIEW {Pending} PENDING_TAX_REVIEW {Pending} PENDING_NEW_TAX_FORM {Pending} PENDING_TAX_SUBMISSION {Pending} PENDING_PARTNER_CREATION {Pending} DENIED {Denied} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }";
-const statusLongText = "{status, select, AVAILABLE {Reward expiring on} PAYOUT_SENT {Reward approved for payout and was scheduled for payment based on your settings.} DENIED {Denied on} EXPIRED {Reward expired on} REDEEMED {Redeemed}  other {Not available} }";
+const statusText = "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PAYOUT_FAILED {Payout Failed} PAYOUT_CANCELLED {Payout Cancelled} PENDING_TAX_REVIEW {Pending} PENDING_NEW_TAX_FORM {Pending} PENDING_TAX_SUBMISSION {Pending} PENDING_PARTNER_CREATION {Pending} DENIED {Denied} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }";
+const statusLongText = "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} PENDING_REVIEW {Pending since} PAYOUT_APPROVED {Reward approved for payout and was scheduled for payment based on your settings.} PAYOUT_FAILED {Payout failed due to a fulfillment issue and is currently being retried.} PAYOUT_CANCELLED {If you think this is a mistake, contact our Support team.} PENDING_TAX_REVIEW {Awaiting tax form review} PENDING_NEW_TAX_FORM {Invalid tax form. Submit a new form to receive your rewards.} PENDING_TAX_SUBMISSION {Submit your tax documents to receive your rewards} PENDING_PARTNER_CREATION {Complete your tax and cash payout setup to receive your rewards} DENIED {Denied on} EXPIRED {Reward expired on} other {Not available} }";
 export const PendingNoUnpend = () => {
   return (h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...pendingReward, ...nullScheduledFor }], statusText: statusText, statusLongText: statusLongText, fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}", deniedHelpText: "Contact support if you think this is a mistake." }));
 };
@@ -289,8 +292,7 @@ export const PayoutFailed = () => {
       },
     ], statusText: statusText, statusLongText: statusLongText, fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}", deniedHelpText: "Contact support if you think this is a mistake." }));
 };
-// AL: TODO payout cancelled
-export const PayoutCancelled = () => {
+export const PayoutDenied = () => {
   return (h("sqm-referral-table-rewards-cell", { rewards: [
       {
         ...cashPayoutSentReward,
@@ -300,6 +302,16 @@ export const PayoutCancelled = () => {
       },
     ], statusText: statusText, statusLongText: statusLongText, fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}", deniedHelpText: "Contact support if you think this is a mistake." }));
 };
+export const PayoutCancelled = () => {
+  return (h("sqm-referral-table-rewards-cell", { rewards: [
+      {
+        ...cashPayoutSentReward,
+        ...payoutCancelledReward,
+        datePayoutRetried: getDays(),
+        dateGiven: null,
+      },
+    ], statusText: statusText, statusLongText: statusLongText, fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}", deniedHelpText: "Contact support if you think this is a mistake." }));
+};
 export const PendingReview = () => {
   return (h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...pendingReviewReward }], statusText: statusText, statusLongText: statusLongText, fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}", deniedHelpText: "Contact support if you think this is a mistake." }));
 };

package/dist/collection/components/sqm-rewards-table/RewardsTableCell.stories.js

@@ -263,24 +263,16 @@ export const StatusCellExpired = () => {
 const pending = {
   statuses: ["PENDING"],
 };
-// const pendingTaxReview = {
-//   statuses: ["PENDING_TAX_REVIEW"],
-// };
-// const pendingNewTaxForm = {
-//   statuses: ["PENDING_NEW_TAX_FORM"],
-// };
-// const pendingTaxSubmission = {
-//   statuses: ["PENDING_TAX_SUBMISSION"],
-// };
-// const pendingPartnerCreation = {
-//   statuses: ["PENDING_PARTNER_CREATION"],
-// };
 const payoutSent = {
   statuses: ["PAYOUT_SENT"],
 };
 const payoutFailed = {
   statuses: ["PAYOUT_FAILED"],
 };
+const payoutCancelled = {
+  statuses: ["PAYOUT_CANCELLED"],
+  dateCancelled: 1355612521321,
+};
 const us_tax = {
   pendingReasons: ["US_TAX"],
 };
@@ -342,6 +334,9 @@ export const StatusCellPayoutSent = () => {
 export const StatusCellPayoutFailed = () => {
   return (h("sqm-rewards-table-status-cell", { statusText: "Payout Failed", reward: { ...rewardsData, ...payoutFailed } }));
 };
+export const StatusCellPayoutCancelled = () => {
+  return (h("sqm-rewards-table-status-cell", { statusText: "Payout Cancelled", reward: { ...rewardsData, ...payoutCancelled } }));
+};
 export const StatusCellPendingWithLongText = () => {
   return (h("div", { style: { width: "200px" } },
     h("sqm-rewards-table-status-cell", { statusText: "Pending for 300,000,000 months and some change", reward: { ...rewardsData, ...pending } })));

package/dist/collection/components/sqm-text/sqm-text.js

@@ -28,7 +28,7 @@ const vanillaStyle = `
 
   sqm-text h4 {
     font-size: var(--sl-font-size-large);
-    font-weight: var(--sl-font-weight-semibold);
+    font-weight: var(--sl-font-weight-bold);
     color: var(--sl-color-neutral-800);
     margin: 0;
   }

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

@@ -3,12 +3,19 @@ export default {
   title: "Components/Widget Code Verification",
 };
 const defaultProps = {
+  initialiseLoading: false,
   email: "testemail@example.com",
   loading: false,
   verifyFailed: false,
   emailResent: false,
 };
 export const Default = () => (h("sqm-code-verification", { demoData: { states: defaultProps } }));
+export const InitialLoading = () => (h("sqm-code-verification", { demoData: {
+    states: {
+      ...defaultProps,
+      initialiseLoading: true,
+    },
+  } }));
 export const Loading = () => (h("sqm-code-verification", { demoData: {
     states: {
       ...defaultProps,

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

@@ -8,7 +8,7 @@ const style = {
     display: "flex",
     flexDirection: "column",
     gap: "var(--sl-spacing-medium)",
-    maxWidth: "515px",
+    maxWidth: "550px",
   },
   HeaderContainer: {
     display: "flex",
@@ -122,7 +122,7 @@ export function WidgetCodeVerificationView(props) {
           h("sl-input", { class: inputClass, name: "code" }),
           h("sl-input", { class: inputClass, name: "code" })),
         states.verifyFailed && (h("p", { class: sheet.classes.ErrorText }, text.invalidCodeText)),
-        h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.submitCode, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, text.verifyText)),
+        h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.submitCode, disabled: states.loading || states.initialiseLoading, loading: states.loading || states.initialiseLoading, exportparts: "base: primarybutton-base", type: "primary" }, text.verifyText)),
       h("div", { class: sheet.classes.FooterContainer },
         h(TextSpanView, { type: "p" }, resendCodeText)))));
 }

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

@@ -1,10 +1,11 @@
-import { isDemo } from "@saasquatch/component-boilerplate";
-import { withHooks } from "@saasquatch/stencil-hooks";
+import { isDemo, useSetParent } from "@saasquatch/component-boilerplate";
+import { useState, withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Prop } from "@stencil/core";
 import deepmerge from "deepmerge";
 import { getProps } from "../../../utils/utils";
 import { WidgetCodeVerificationView, } from "./sqm-code-verification-view";
 import { useWidgetCodeVerification } from "./useCodeVerification";
+import { VERIFICATION_PARENT_NAMESPACE } from "../keys";
 export class WidgetCodeVerification {
   constructor() {
     /**
@@ -232,7 +233,7 @@ export class WidgetCodeVerification {
       "mutable": false,
       "complexType": {
         "original": "DemoData<WidgetCodeVerificationViewProps>",
-        "resolved": "{ states?: { loading: boolean; email: string; verifyFailed?: boolean; emailResent: boolean; }; refs?: { codeWrapperRef: any; }; }",
+        "resolved": "{ states?: { initialiseLoading: boolean; loading: boolean; email: string; verifyFailed?: boolean; emailResent: boolean; }; refs?: { codeWrapperRef: any; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -256,22 +257,44 @@ export class WidgetCodeVerification {
           }],
         "text": ""
       }
+    },
+    "onVerification": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "(token: string) => any",
+        "resolved": "(token: string) => any",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }],
+        "text": ""
+      }
     }
   }; }
 }
 function useDemoWidgetCodeVerification(props) {
+  const [emailResent, setEmailResent] = useState(false);
+  const setVerifiedContext = useSetParent(VERIFICATION_PARENT_NAMESPACE);
   return deepmerge({
     states: {
       loading: false,
-      email: "",
-      verifyFailed: false,
+      email: "test@example.com",
+      emailResent,
+      resendError: true,
+      verifyFailed: true,
     },
     refs: {
       codeWrapperRef: () => { },
     },
     callbacks: {
-      resendEmail: async () => { },
-      submitCode: async () => { },
+      resendEmail: async () => setEmailResent(true),
+      submitCode: async () => setVerifiedContext(true),
     },
     text: props.getTextProps(),
   }, props.demoData || {}, { arrayMerge: (_, a) => a });