@saasquatch/mint-components 1.12.0-13 → 1.12.0-15

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

@@ -21,7 +21,7 @@ const utilities = require('./utilities-f7de6c04.js');
 const AsYouType = require('./AsYouType-6788393a.js');
 const ShadowViewAddon = require('./ShadowViewAddon-040cffad.js');
 require('./sqm-portal-container-view-990a85a3.js');
-const usePayoutStatus = require('./usePayoutStatus-5ac536a3.js');
+const usePayoutStatus = require('./usePayoutStatus-8f924372.js');
 
 const BigStat = class {
   constructor(hostRef) {
@@ -1724,6 +1724,7 @@ NavigationMenu.style = sqmNavigationMenuCss;
 const style$2 = {
   Wrapper: {
     maxWidth: "200px",
+    border: "1px solid black",
   },
   PayoutButtonDescription: {
     color: "var(--sl-color-neutral-500)",
@@ -1743,6 +1744,41 @@ function PayoutButtonScrollView(props) {
     index.h("p", { class: sheet$2.classes.PayoutButtonDescription }, text.payoutButtonDescription)));
 }
 
+const GET_PAYOUT_DETAILS = index_module.dist.gql `
+  query getPayoutDetails {
+    user: viewer {
+      ... on User {
+        id
+        impactConnection {
+          connected
+          publisher {
+            id
+            payoutsAccount {
+              hold
+              balance
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+function usePayoutButton(props) {
+  var _a, _b, _c;
+  const { data, refetch } = index_module.En(GET_PAYOUT_DETAILS, {});
+  stencilHooks_module.useEffect(() => {
+    const cb = () => refetch();
+    window.addEventListener("sqm:tax-form-updated", cb);
+    return () => window.removeEventListener("sqm:tax-form-updated", cb);
+  }, []);
+  return {
+    states: {
+      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(),
+  };
+}
+
 const PayoutButtonScroll = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -1763,7 +1799,9 @@ const PayoutButtonScroll = class {
     return utils.getProps(this);
   }
   render() {
-    const props = useDemoPayoutButtonScroll(this);
+    const props = index_module.isDemo()
+      ? useDemoPayoutButtonScroll(this)
+      : usePayoutButton(this);
     return index.h(PayoutButtonScrollView, Object.assign({}, props));
   }
 };
@@ -1861,7 +1899,12 @@ function PayoutStatusAlertView(props) {
       case "VERIFICATION:REQUIRED":
         return {
           header: text.verificationRequiredHeader,
-          description: text.verificationRequiredDescription,
+          description: global.intl.formatMessage({
+            id: "verificationRequiredDescription",
+            defaultMessage: text.verificationRequiredDescription,
+          }, {
+            supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
           buttonText: text.verificationRequiredButtonText,
           alertType: "warning",
           icon: "exclamation-triangle",
@@ -1870,7 +1913,12 @@ function PayoutStatusAlertView(props) {
       case "VERIFICATION:INTERNAL":
         return {
           header: text.verificationRequiredInternalHeader,
-          description: text.verificationRequiredInternalDescription,
+          description: global.intl.formatMessage({
+            id: "verificationRequiredInternalDescription",
+            defaultMessage: text.verificationRequiredInternalDescription,
+          }, {
+            supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
           alertType: "warning",
           icon: "exclamation-triangle",
           class: sheet$3.classes.WarningAlertContainer,
@@ -1878,7 +1926,12 @@ function PayoutStatusAlertView(props) {
       case "VERIFICATION:REVIEW":
         return {
           header: text.verificationReviewInternalHeader,
-          description: text.verificationReviewInternalDescription,
+          description: global.intl.formatMessage({
+            id: "verificationReviewInternalDescription",
+            defaultMessage: text.verificationReviewInternalDescription,
+          }, {
+            supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
           alertType: "warning",
           icon: "exclamation-triangle",
           class: sheet$3.classes.WarningAlertContainer,
@@ -1886,7 +1939,12 @@ function PayoutStatusAlertView(props) {
       case "VERIFICATION:FAILED":
         return {
           header: text.verificationFailedInternalHeader,
-          description: text.verificationFailedInternalDescription,
+          description: global.intl.formatMessage({
+            id: "verificationFailedInternalDescription",
+            defaultMessage: text.verificationFailedInternalDescription,
+          }, {
+            supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
           alertType: "critical",
           icon: "exclamation-octagon",
           class: sheet$3.classes.ErrorAlertContainer,
@@ -1894,7 +1952,12 @@ function PayoutStatusAlertView(props) {
       case "HOLD":
         return {
           header: text.holdHeader,
-          description: text.holdDescription,
+          description: global.intl.formatMessage({
+            id: "holdDescription",
+            defaultMessage: text.holdDescription,
+          }, {
+            supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
           buttonText: null,
           alertType: "warning",
           icon: "exclamation-triangle",
@@ -1907,7 +1970,9 @@ function PayoutStatusAlertView(props) {
   function getButton(status) {
     switch (status) {
       case "INFORMATION_REQUIRED":
-        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));
+        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)) : (
+        // Demo case
+        index.h("sl-button", { type: "default" }, text.informationRequiredButtonText));
       case "VERIFICATION:REQUIRED":
         return (index.h("sl-button", { type: "default", loading: states.veriffLoading, onClick: callbacks.onClick }, text.verificationRequiredButtonText));
       default:
@@ -1945,7 +2010,7 @@ const PayoutStatusAlert = class {
     /**
      * @uiName Verification required alert description
      */
-    this.verificationRequiredDescription = "Complete your verification to start receiving your cash rewards. It should only take a few minutes verify.";
+    this.verificationRequiredDescription = "It should only take a few minutes verify. If you run in to an issue verifying your identity contact our {supportLink}.";
     /**
      * @uiName Verification required alert button text
      */
@@ -1957,7 +2022,7 @@ const PayoutStatusAlert = class {
     /**
      * @uiName Verification required internal alert description
      */
-    this.verificationRequiredInternalDescription = "Identity verification submission has been received. Our system is currently performing additional checks and analyzing the results. You will be updated shortley.";
+    this.verificationRequiredInternalDescription = "Identity verification submission has been received. Our system is currently performing additional checks and analyzing the results. You will be updated shortley. If you don't hear from us contact our {supportLink}.";
     /**
      * @uiName Verification review internal alert header
      */
@@ -1965,7 +2030,7 @@ const PayoutStatusAlert = class {
     /**
      * @uiName Verification review internal alert description
      */
-    this.verificationReviewInternalDescription = "Identity verification requires further review due to a potential error. Our team is reviewing the information and will update you shortly.";
+    this.verificationReviewInternalDescription = "Identity verification requires further review due to a potential error. Our team is reviewing the information and will update you shortly. If you don't hear from us contact our {supportLink}.";
     /**
      * @uiName Verification failed internal alert header
      */
@@ -1973,7 +2038,7 @@ const PayoutStatusAlert = class {
     /**
      * @uiName Verification failed internal alert description
      */
-    this.verificationFailedInternalDescription = "Identity verification has failed. Our team is reviewing the report and will contact you with further information.";
+    this.verificationFailedInternalDescription = "Identity verification has failed. Our team is reviewing the report and will contact you with further information. If you don't hear from us contact our {supportLink}.";
     /**
      * @uiName Payout on hold alert header
      */
@@ -1982,11 +2047,15 @@ const PayoutStatusAlert = class {
      * @uiName Payout on hold alert description
      * AL: TODO copy not finalized for support section
      */
-    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 our support team.";
+    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 our {supportLink}.";
+    /**
+     * @uiName Cash & Payouts Microsite Page (only set if alert is used in a microsite)
+     */
+    this.cashPayoutsPageUrl = "/cash";
     /**
-     * @uiName Cash & Payouts Terms and Conditions url
+     * @uiName Support link text
      */
-    this.termsUrl = "https://terms.advocate.impact.com/PayoutTermsAndConditions.html";
+    this.supportLink = "support team";
     /**
      * @uiName Error header
      */

package/dist/cjs/sqm-email-verification.cjs.entry.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const global = require('./global-c3637175.js');
 const index_module = require('./index.module-b8d9d0ba.js');
 const cjs = require('./cjs-1066ec21.js');
 const JSS = require('./JSS-8503a151.js');
@@ -153,10 +154,7 @@ const style = {
       backgroundColor: "var(--sl-color-red-100)",
       borderTop: "none",
     },
-    "&::part(message)": {
-      display: "flex",
-      flexDirection: "column",
-    },
+    "&::part(message)": {},
   },
   ContinueButton: {
     width: "100%",
@@ -209,7 +207,13 @@ function WidgetEmailVerificationView(props) {
     states.sendCodeError && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", class: sheet.classes.ErrorAlertContainer, open: true },
       index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
       index.h("b", null, text.sendCodeErrorHeader),
-      text.sendCodeErrorDescription)),
+      index.h("br", null),
+      global.intl.formatMessage({
+        id: "sendCodeErrorDescription",
+        defaultMessage: text.sendCodeErrorDescription,
+      }, {
+        supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+      }))),
     states.initialLoading ? (renderLoadingSkeleton()) : (index.h("div", { class: sheet.classes.Wrapper },
       index.h(sqmTextSpanView.TextSpanView, { type: "p" }, text.verifyEmailHeaderText),
       index.h("sl-form", { "onSl-submit": callbacks.submitEmail },
@@ -233,11 +237,15 @@ const WidgetEmailVerification = class {
     /**
      * @uiName Send code to email alert header
      */
-    this.sendCodeErrorHeader = "There was an error sending your code.";
+    this.sendCodeErrorHeader = "There was an error sending your code";
+    /**
+     * @uiName Support link text
+     */
+    this.supportLink = "support team";
     /**
      * @uiName Send code to email alert description
      */
-    this.sendCodeErrorDescription = "Please try again. If this problem continues, contact our program support team.";
+    this.sendCodeErrorDescription = "Please try again. If this problem continues, contact our program {supportLink}.";
     /**
      * @uiName Email input label
      */

package/dist/cjs/{sqm-invoice-table-view-e92c557a.js → sqm-invoice-table-view-b0602970.js}

@@ -779,7 +779,7 @@ const GeneralLoadingView = () => {
   return index.h(LoadingView, null);
 };
 const GeneralErrorView = () => {
-  return (index.h(ErrorView, { loadingErrorAlertHeader: "There was a problem loading your form", loadingErrorAlertDescription: "Please refresh the page and try again. If this problem continues, contact Support." }));
+  return (index.h(ErrorView, { loadingErrorAlertHeader: "There was a problem loading your form", loadingErrorAlertDescription: "Please refresh the page and try again. If this problem continues, contact our support team." }));
 };
 // STEP ONE
 const StepOne = () => {
@@ -1263,6 +1263,20 @@ const StepFourToPaypalChecked = () => {
       },
     } }));
 };
+const StepFourReVerifyEmail = () => {
+  return (index.h("sqm-banking-info-form", { demoData: {
+      ...stepFourProps,
+      states: {
+        ...stepFourProps.states,
+        showVerification: true,
+        isPartner: true,
+        formState: {
+          ...stepFourProps.states.formState,
+          paymentMethodChecked: "toPayPalAccount",
+        },
+      },
+    } }));
+};
 const TaxAndCashDashboardActiveW9Form = () => {
   return (index.h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
@@ -1756,6 +1770,7 @@ const TaxForm = /*#__PURE__*/Object.freeze({
   StepFourIsPartner: StepFourIsPartner,
   StepFourDirectToBankChecked: StepFourDirectToBankChecked,
   StepFourToPaypalChecked: StepFourToPaypalChecked,
+  StepFourReVerifyEmail: StepFourReVerifyEmail,
   TaxAndCashDashboardActiveW9Form: TaxAndCashDashboardActiveW9Form,
   TaxAndCashDashboardActiveW8BENForm: TaxAndCashDashboardActiveW8BENForm,
   TaxAndCashDashboardActiveW8BENEForm: TaxAndCashDashboardActiveW8BENEForm,

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

@@ -30,7 +30,7 @@ const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-96f
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-7ffcc0d4.js');
 const ShadowViewAddon = require('./ShadowViewAddon-040cffad.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-990a85a3.js');
-const sqmInvoiceTableView = require('./sqm-invoice-table-view-e92c557a.js');
+const sqmInvoiceTableView = require('./sqm-invoice-table-view-b0602970.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -8438,6 +8438,9 @@ const deniedReward = {
 const payoutFailedReward = {
   statuses: ["PAYOUT_FAILED"],
 };
+const payoutCancelledReward = {
+  statuses: ["PAYOUT_CANCELLED"],
+};
 const pendingReviewReward = {
   statuses: ["PENDING_REVIEW"],
 };
@@ -8517,8 +8520,8 @@ function getMonths() {
 function getYears() {
   return luxon.luxon.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} }";
 const PendingNoUnpend = () => {
   return (index.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." }));
 };
@@ -8601,8 +8604,7 @@ 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
-const PayoutCancelled = () => {
+const PayoutDenied = () => {
   return (index.h("sqm-referral-table-rewards-cell", { rewards: [
       {
         ...cashPayoutSentReward,
@@ -8612,6 +8614,16 @@ 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." }));
 };
+const PayoutCancelled = () => {
+  return (index.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." }));
+};
 const PendingReview = () => {
   return (index.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." }));
 };
@@ -8669,6 +8681,7 @@ const ReferralTableRewardsCell = /*#__PURE__*/Object.freeze({
   Expired: Expired,
   Denied: Denied,
   PayoutFailed: PayoutFailed,
+  PayoutDenied: PayoutDenied,
   PayoutCancelled: PayoutCancelled,
   PendingReview: PendingReview,
   PendingTaxReview: PendingTaxReview,
@@ -8899,6 +8912,12 @@ const simpleUserTableProps = {
         index.h(DateCell, null),
         index.h(PayoutFailed, null),
       ],
+      [
+        index.h("sqm-referral-table-user-cell", { name: "Sarah Joseph" }),
+        index.h(Converted, null),
+        index.h(DateCell, null),
+        index.h(PayoutCancelled, null),
+      ],
       [
         index.h("sqm-referral-table-user-cell", { name: "Sarah Joseph" }),
         index.h(Converted, null),
@@ -12016,24 +12035,16 @@ 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"],
 };
@@ -12095,6 +12106,9 @@ const StatusCellPayoutSent = () => {
 const StatusCellPayoutFailed = () => {
   return (index.h("sqm-rewards-table-status-cell", { statusText: "Payout Failed", reward: { ...rewardsData$1, ...payoutFailed } }));
 };
+const StatusCellPayoutCancelled = () => {
+  return (index.h("sqm-rewards-table-status-cell", { statusText: "Payout Cancelled", reward: { ...rewardsData$1, ...payoutCancelled } }));
+};
 const StatusCellPendingWithLongText = () => {
   return (index.h("div", { style: { width: "200px" } },
     index.h("sqm-rewards-table-status-cell", { statusText: "Pending for 300,000,000 months and some change", reward: { ...rewardsData$1, ...pending } })));
@@ -12198,6 +12212,7 @@ const RewardsTableCell = /*#__PURE__*/Object.freeze({
   StatusCellPendingPartnerCreation: StatusCellPendingPartnerCreation,
   StatusCellPayoutSent: StatusCellPayoutSent,
   StatusCellPayoutFailed: StatusCellPayoutFailed,
+  StatusCellPayoutCancelled: StatusCellPayoutCancelled,
   StatusCellPendingWithLongText: StatusCellPendingWithLongText,
   StatusCellPendingUsTax: StatusCellPendingUsTax,
   StatusCellPendingScheduled: StatusCellPendingScheduled,
@@ -15094,11 +15109,19 @@ const defaultProps$m = {
   payoutSettingsComplete: true,
 };
 const CompletedTaxForm = () => (index.h("sqm-payout-button-scroll", { demoData: { states: { ...defaultProps$m, payoutSettingsComplete: true } } }));
+const CompletedTaxFormWithStatsContainer = () => (index.h("sqm-portal-container", { display: "flex", maxWidth: "100%", minWidth: "100%", "justify-content": "space-between", flexWrap: "nowrap" },
+  index.h("sqm-portal-container", { display: "flex", "max-width": "fit-content" },
+    index.h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/referralsCount" },
+      index.h("p", null, "Referrals")),
+    index.h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/payoutBalance" },
+      index.h("p", null, "Cash Balance"))),
+  index.h("sqm-payout-button-scroll", { demoData: { states: { ...defaultProps$m, payoutSettingsComplete: true } } })));
 
 const PayoutButtonScroll = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PayoutButtonScroll_stories,
-  CompletedTaxForm: CompletedTaxForm
+  CompletedTaxForm: CompletedTaxForm,
+  CompletedTaxFormWithStatsContainer: CompletedTaxFormWithStatsContainer
 });
 
 const PayoutStatusAlert_stories = {

package/dist/cjs/{usePayoutStatus-5ac536a3.js → usePayoutStatus-8f924372.js}

@@ -1032,7 +1032,7 @@ function usePayoutStatus(props) {
     data: { type },
     text: props.getTextProps(),
     callbacks: {
-      onTermsClick: () => window.open(props.termsUrl, "_blank").focus(),
+      onTermsClick: () => window.open(props.cashPayoutsPageUrl, "_blank").focus(),
       onClick: render,
     },
   };

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",
+    border: "1px solid black",
   },
   PayoutButtonDescription: {
     color: "var(--sl-color-neutral-500)",

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 } })));