@saasquatch/mint-components 1.12.0-8 → 1.12.0

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

@@ -1,10 +1,10 @@
 'use strict';
 
-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 index = require('./index-ff72278c.js');
+const stencilHooks_module = require('./stencil-hooks.module-8f69ed33.js');
+const index_module = require('./index.module-191d84c2.js');
+const reRender = require('./re-render-811491ef.js');
+const useChildElements = require('./useChildElements-d64dfedd.js');
 
 const debug = stencilHooks_module.browser("sq:useReferralTable");
 const CSS_NAMESPACE = "sqm-referral-table";
@@ -245,8 +245,8 @@ const GET_IMPACT_TAX = index_module.dist.gql `
 `;
 function useReferralTable(props, emptyElement, loadingElement) {
   var _a, _b, _c, _d;
-  const user = index_module.K();
-  const programIdContext = index_module.z();
+  const user = index_module.Q();
+  const programIdContext = index_module.H();
   // Default to context, overriden by props
   const programId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
   // If no program ID, shows all programs
@@ -268,17 +268,17 @@ function useReferralTable(props, emptyElement, loadingElement) {
     loading: false,
     page: 0,
   });
-  const locale = index_module.Q();
-  const { data: referrerResponse, loading: referrerLoading, refetch, } = index_module.En(GET_REFERRER_DATA, {
+  const locale = index_module.L();
+  const { data: referrerResponse, loading: referrerLoading, refetch, } = index_module.yn(GET_REFERRER_DATA, {
     programId: programId === "classic" ? null : programId,
     rewardFilter,
     locale,
   }, !props.showReferrer || !(user === null || user === void 0 ? void 0 : user.jwt));
   const referrerData = (_b = referrerResponse === null || referrerResponse === void 0 ? void 0 : referrerResponse.viewer) === null || _b === void 0 ? void 0 : _b.referredByReferral;
   const showReferrerRow = props.showReferrer && !!(referrerData === null || referrerData === void 0 ? void 0 : referrerData.dateReferralStarted);
-  const { data: taxResponse, loading: taxLoading } = index_module.En(GET_IMPACT_TAX, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const { data: taxResponse, loading: taxLoading } = index_module.yn(GET_IMPACT_TAX, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
   const taxConnection = (_c = taxResponse === null || taxResponse === void 0 ? void 0 : taxResponse.viewer) === null || _c === void 0 ? void 0 : _c.impactConnection;
-  const { envelope: referralData, states, callbacks, } = index_module.On(GET_REFERRAL_DATA, (data) => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.referrals; }, {
+  const { envelope: referralData, states, callbacks, } = index_module.kn(GET_REFERRAL_DATA, (data) => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.referrals; }, {
     limit: props.perPage,
     offset: 0,
   }, {

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

@@ -1,11 +1,11 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
-const index_module = require('./index.module-b8d9d0ba.js');
+const stencilHooks_module = require('./stencil-hooks.module-8f69ed33.js');
+const index_module = require('./index.module-191d84c2.js');
 
 const REGISTRATION_FORM_STATE_CONTEXT = "sq:registration-form-state";
 function useRegistrationFormState(formState) {
-  const host = index_module.T();
+  const host = index_module._();
   const [registrationFormState, setRegistrationFormState] = stencilHooks_module.y(host, REGISTRATION_FORM_STATE_CONTEXT, formState);
   return { registrationFormState, setRegistrationFormState };
 }

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

@@ -1,7 +1,7 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
-const index_module = require('./index.module-b8d9d0ba.js');
+const stencilHooks_module = require('./stencil-hooks.module-8f69ed33.js');
+const index_module = require('./index.module-191d84c2.js');
 
 const UserLookupQuery = index_module.dist.gql `
   query userLookup {
@@ -58,25 +58,26 @@ const SubmitImpactCodeMutation = index_module.dist.gql `
 // ! It's important when using this hook to ensure initialisation
 // ! is done before calling any mutations
 function useVerificationEmail() {
-  const userIdentity = index_module.K();
+  const userIdentity = index_module.Q();
+  const [verificationEmail, setVerificationEmail] = stencilHooks_module.useState(null);
   const [hasEmails, setHasEmails] = stencilHooks_module.useState({
     participant: false,
     impact: false,
   });
-  const [fetch] = index_module.an(UserLookupQuery);
+  const [fetch] = index_module.Xe(UserLookupQuery);
   // Send mutations
-  const [sendParticipantEmail, { loading: participantEmailLoading, errors: participantEmailErrors },] = index_module.xe(ParticipantVerificationEmailMutation);
-  const [sendImpactEmail, { loading: impactEmailLoading, errors: impactEmailErrors },] = index_module.xe(ImpactVerificationEmailMutation);
+  const [sendParticipantEmail, { loading: participantEmailLoading, errors: participantEmailErrors },] = index_module.$e(ParticipantVerificationEmailMutation);
+  const [sendImpactEmail, { loading: impactEmailLoading, errors: impactEmailErrors },] = index_module.$e(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 [verifyUserEmail, { loading: verifyMutationLoading, errors: verifyMutationErrors },] = index_module.$e(VerifyUserEmailMutation);
+  const [submitImpactCode, { loading: submitImpactCodeLoading, errors: submitImpactCodeErrors },] = index_module.$e(SubmitImpactCodeMutation);
   const verifyLoading = verifyMutationLoading || submitImpactCodeLoading;
   const verifyErrors = verifyMutationErrors || submitImpactCodeErrors;
   const [initialized, setInitialized] = stencilHooks_module.useState(false);
   const initialise = async () => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     try {
       const lookup = await fetch({});
       if (!lookup || lookup instanceof Error)
@@ -85,6 +86,8 @@ function useVerificationEmail() {
         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) {
@@ -155,6 +158,7 @@ function useVerificationEmail() {
   }, []);
   return {
     initialized,
+    verificationEmail,
     send: [
       sendVerificationEmail,
       { loading: sendLoading, errors: sendErrors },

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

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

package/dist/collection/collection-manifest.json

@@ -3,6 +3,8 @@
     "./components/tax-and-cash/sqm-banking-info-form/sqm-banking-info-form.js",
     "./components/tax-and-cash/sqm-docusign-form/sqm-docusign-form.js",
     "./components/tax-and-cash/sqm-indirect-tax-form/sqm-indirect-tax-form.js",
+    "./components/sqm-referral-codes/sqm-referral-codes.js",
+    "./components/sqm-pagination/sqm-pagination.js",
     "./components/sqm-password-field/sqm-password-field.js",
     "./components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert.js",
     "./components/sqm-referral-table/sqm-referral-table.js",
@@ -66,6 +68,7 @@
     "./components/sqm-program-explainer-step/sqm-program-explainer-step.js",
     "./components/sqm-program-menu/sqm-program-menu.js",
     "./components/sqm-referral-card/sqm-referral-card.js",
+    "./components/sqm-referral-code/sqm-referral-code.js",
     "./components/sqm-referral-iframe/sqm-referral-iframe.js",
     "./components/sqm-referral-table/cells/sqm-referral-table-cell.js",
     "./components/sqm-referral-table/cells/sqm-referral-table-date-cell.js",
@@ -108,7 +111,7 @@
     "./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-code-verification/sqm-code-verification.js",
     "./components/sqm-widget-verification/sqm-email-verification/sqm-email-verification.js",
@@ -122,6 +125,13 @@
   },
   "collections": [],
   "bundles": [
+    {
+      "components": [
+        "sqm-pagination",
+        "sqm-referral-code",
+        "sqm-referral-codes"
+      ]
+    },
     {
       "components": [
         "sqm-rewards-table",

package/dist/collection/components/sqm-coupon-code/sqm-coupon-code.js

@@ -475,7 +475,7 @@ export class CouponCode {
       "mutable": false,
       "complexType": {
         "original": "DemoData<CouponCodeViewProps>",
-        "resolved": "{ loading?: boolean; errorType?: \"error\" | \"warning\" | \"info\" | \"success\"; couponCodeLabel?: string; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; inputPlaceholderText?: string; dateAvailable?: string; onClick?: () => void; }",
+        "resolved": "{ loading?: boolean; errorType?: \"error\" | \"warning\" | \"info\" | \"success\"; couponCodeLabel?: string; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; onClick?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",

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

@@ -5,6 +5,13 @@ import { EmptyStateView } from "./sqm-empty-view";
  * @validParents ["sqm-referral-table","sqm-rewards-table","sqm-leaderboard","sqm-reward-exchange-list"]
  */
 export class Empty {
+  constructor() {
+    /**
+     * @uiWidget ImageUpload
+     * @format url
+     * @uiName Image */
+    this.emptyStateImage = "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png";
+  }
   render() {
     return (h(Host, { slot: "empty" },
       h(EmptyStateView, { emptyStateImage: this.emptyStateImage, emptyStateHeader: this.emptyStateHeader, emptyStateText: this.emptyStateText, supportText: this.supportText })));
@@ -21,7 +28,7 @@ export class Empty {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [{
             "text": "ImageUpload",
@@ -36,7 +43,8 @@ export class Empty {
         "text": ""
       },
       "attribute": "empty-state-image",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "\"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png\""
     },
     "emptyStateHeader": {
       "type": "string",

package/dist/collection/components/sqm-logout-current-user/sqm-logout-current-user.js

@@ -122,7 +122,7 @@ export class LogoutCurrentUser {
       "mutable": false,
       "complexType": {
         "original": "DemoData<CopyTextViewProps>",
-        "resolved": "{ loading?: boolean; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; inputPlaceholderText?: string; dateAvailable?: string; onClick?: () => void; }",
+        "resolved": "{ loading?: boolean; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; onClick?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/components/sqm-pagination/Pagination.stories.js

@@ -0,0 +1,12 @@
+import { h } from "@stencil/core";
+export default {
+  title: "Components/Link Button",
+};
+const defaultProps = {
+  link: "https://example.com",
+  openInNewTab: false,
+  buttonText: "Button Text",
+};
+export const Default = () => {
+  return h("sqm-pagination", null);
+};

package/dist/collection/components/sqm-pagination/sqm-pagination-view.js

@@ -0,0 +1,32 @@
+import { Fragment, h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+const style = {
+  Container: {
+    display: "flex",
+    justifyContent: "flex-end",
+    alignItems: "center",
+    gap: "var(--sl-spacing-small)",
+    width: "100%",
+  },
+  TextContainer: {
+    display: "flex",
+    gap: "var(--sl-spacing-xx-small)",
+  },
+};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+export function PaginationView(props) {
+  const { states, callbacks, text } = props;
+  const { onNext, onPrev } = callbacks;
+  const { currentPage, totalPages, loading } = states;
+  if (totalPages === 1)
+    return h(Fragment, null);
+  return (h("span", { class: sheet.classes.Container, part: "sqm-base" },
+    h("style", { type: "text/css" }, styleString),
+    !loading && (h(Fragment, null,
+      h("sl-button", { onClick: onPrev, part: "sqm-pagination-button", circle: true, disabled: currentPage === 1 },
+        h("sl-icon", { name: "chevron-left", label: "Previous Page" })),
+      h("div", { class: sheet.classes.TextContainer }, text.paginationText))),
+    h("sl-button", { onClick: onNext, part: "sqm-pagination-button", circle: true, disabled: currentPage === totalPages },
+      h("sl-icon", { name: "chevron-right", label: "Previous Page" }))));
+}

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

@@ -0,0 +1,112 @@
+import { isDemo } from "@saasquatch/component-boilerplate";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { useState } from "@saasquatch/universal-hooks";
+import { Component, h, Prop, State } from "@stencil/core";
+import deepmerge from "deepmerge";
+import { intl } from "../../global/global";
+import { getProps } from "../../utils/utils";
+import { PaginationView } from "./sqm-pagination-view";
+import { usePagination } from "./usePagination";
+/**
+ * @uiName Pagination
+ * @exampleGroup Common Components
+ * @example Link Button - <sqm-pagination></sqm-pagination>
+ */
+export class Pagination {
+  constructor() {
+    this.ignored = true;
+    /**
+     * @uiName Pagination text
+     */
+    this.paginationText = "{currentPage} of {totalPages}";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const hookProps = isDemo()
+      ? useDemoPagination(getProps(this))
+      : usePagination(getProps(this));
+    return h(PaginationView, Object.assign({}, hookProps));
+  }
+  static get is() { return "sqm-pagination"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "paginationText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Pagination text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "pagination-text",
+      "reflect": false,
+      "defaultValue": "\"{currentPage} of {totalPages}\""
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<UsePagination>",
+        "resolved": "{}",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../global/demo"
+          },
+          "UsePagination": {
+            "location": "import",
+            "path": "./usePagination"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}
+function useDemoPagination(props) {
+  const [currentPage, setCurrentPage] = useState(1);
+  return deepmerge({
+    states: {
+      currentPage,
+      totalPages: 5,
+      loading: false,
+    },
+    callbacks: {
+      onNext: () => setCurrentPage(currentPage + 1),
+      onPrev: () => setCurrentPage(currentPage - 1),
+    },
+    text: {
+      paginationText: intl.formatMessage({
+        id: `paginationText`,
+        defaultMessage: props.paginationText || "{currentPage} of {totalPages}",
+      }, {
+        currentPage: currentPage,
+        totalPages: 5,
+      }),
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}

package/dist/collection/components/sqm-pagination/usePagination.js

@@ -0,0 +1,29 @@
+import { useParentValue } from "@saasquatch/component-boilerplate";
+import { REFERRAL_CODES_PAGINATION_CONTEXT, } from "../sqm-referral-codes/useReferralCodes";
+import { intl } from "../../global/global";
+export function usePagination(props) {
+  var _a;
+  const context = useParentValue(REFERRAL_CODES_PAGINATION_CONTEXT);
+  const currentPage = context.states.currentPage + 1;
+  const totalPages = (_a = context.states) === null || _a === void 0 ? void 0 : _a.pageCount;
+  return {
+    states: {
+      currentPage,
+      totalPages,
+      loading: context.states.loading,
+    },
+    callbacks: {
+      onNext: () => { var _a, _b; return (_a = context.callbacks) === null || _a === void 0 ? void 0 : _a.setCurrentPage(((_b = context.states) === null || _b === void 0 ? void 0 : _b.currentPage) + 1); },
+      onPrev: () => { var _a, _b; return (_a = context.callbacks) === null || _a === void 0 ? void 0 : _a.setCurrentPage(((_b = context.states) === null || _b === void 0 ? void 0 : _b.currentPage) - 1); },
+    },
+    text: {
+      paginationText: intl.formatMessage({
+        id: `paginationText`,
+        defaultMessage: props.paginationText,
+      }, {
+        currentPage,
+        totalPages,
+      }),
+    },
+  };
+}

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-portal-container/sqm-portal-container.js

@@ -47,7 +47,6 @@ export class PortalContainer {
     /**
      * @uiName Background color
      * @uiWidget color
-     * @uiGroup Card style
      * @uiType string
      */
     this.backgroundColor = "#ffffff00";
@@ -327,9 +326,6 @@ export class PortalContainer {
           }, {
             "text": "color",
             "name": "uiWidget"
-          }, {
-            "text": "Card style",
-            "name": "uiGroup"
           }, {
             "text": "string",
             "name": "uiType"

package/dist/collection/components/sqm-referral-card/ReferralCard.stories.js

@@ -21,6 +21,21 @@ const sharebutton = (slot) => {
       h("sqm-share-button", { medium: "facebook" }, "Share on Facebook"),
       h("sqm-share-button", { medium: "twitter" }, "Post about us on X"))));
 };
+const shareButtonsWithPromoCodes = (slot) => {
+  return (h("sqm-portal-container", { gap: "large", slot: slot },
+    h("sqm-text", null, "Choose how you want to share:"),
+    h("sqm-text", null,
+      h("sub", null, "Share with your friends:"),
+      h("sqm-share-code", null),
+      h("sqm-share-link", null)),
+    h("sqm-portal-container", { gap: "x-small" },
+      h("sqm-share-button", { medium: "email" }, "Share via email"),
+      h("sqm-share-button", { medium: "facebook" }, "Share on Facebook"),
+      h("sqm-share-button", { medium: "twitter" }, "Post about us on X"),
+      h("sqm-portal-container", { gap: "x-small" },
+        h("span", { style: { textAlign: "center", color: "var(--sl-color-gray-500)" } }, "You have copied this code before"),
+        h("sqm-pagination", null)))));
+};
 const timeline = (slot, count) => {
   return (h("sqm-timeline", { slot: slot, icon: "circle" },
     count > 0 && (h("sqm-timeline-entry", { reward: "75", unit: "points", desc: "Your friends signs up for a free trial" })),
@@ -43,6 +58,11 @@ export const TimelineAndShareButtons = () => {
     timeline("left", 3),
     sharebutton("right")));
 };
+export const OneTimeUsePromoCodes = () => {
+  return (h("sqm-referral-card", null,
+    timeline("left", 4),
+    shareButtonsWithPromoCodes("right")));
+};
 export const StartAlignment = () => {
   return (h("sqm-referral-card", { "vertical-alignment": "start" },
     timeline("left", 4),

package/dist/collection/components/sqm-referral-code/ReferralCode.stories.js

@@ -0,0 +1,60 @@
+import { h } from "@stencil/core";
+import { CopyTextView } from "../views/copy-text-view";
+import scenario from "./ReferralCode.feature";
+export default {
+  title: "Components/Referral Code",
+  parameters: {
+    scenario,
+  },
+};
+export const ReferralCode = () => {
+  return (h("sqm-referral-code", { tooltiptext: "Copied to Clipboard" }));
+};
+export const ShowNotificationText = () => {
+  return (h("sqm-referral-code", { showNotificationText: true, notificationText: "You've copied this code before" }));
+};
+export const ShowNotificationTextWithButton = () => {
+  return (h("sqm-referral-code", { showNotificationText: true, notificationText: "You've copied this code before", buttonStyle: "button-outside" }));
+};
+export const ShowNotificationTextWithButtonBelow = () => {
+  return (h("sqm-referral-code", { showNotificationText: true, notificationText: "You've copied this code before", buttonStyle: "button-below" }));
+};
+export const CustomTooltipText = () => {
+  return (h("sqm-referral-code", { tooltiptext: "CUSTOM TOOLTIP TEXT" }));
+};
+export const TextAlignCenter = () => {
+  return h("sqm-referral-code", { textAlign: "center" });
+};
+export const TextAlignRight = () => {
+  return h("sqm-referral-code", { textAlign: "right" });
+};
+export const CustomTooltipDuration = () => {
+  return (h("sqm-referral-code", { tooltiplifespan: 5000, tooltiptext: "CUSTOM TOOLTIP TEXT" }));
+};
+export const CopyButton = () => {
+  return (h(CopyTextView, Object.assign({}, {
+    copyString: "https://noah.example.com",
+    open: false,
+    tooltiptext: "Copied!",
+    isCopyIcon: false,
+    buttonStyle: "button-outside",
+  })));
+};
+export const CopyButtonBelow = () => {
+  return (h(CopyTextView, Object.assign({}, {
+    copyString: "https://noah.example.com",
+    open: false,
+    tooltiptext: "Copied!",
+    buttonStyle: "button-below",
+  })));
+};
+export const Error = () => {
+  const props = {
+    copyString: "https://noah.example.com",
+    disabled: true,
+    open: true,
+    tooltiptext: "Copied!",
+    error: true,
+  };
+  return h(CopyTextView, Object.assign({}, props));
+};