@saasquatch/mint-components 1.11.1-2 → 1.11.1-20

package/dist/cjs/sqm-referred-registration.cjs.entry.js

@@ -2,16 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
-const index_module = require('./index.module-df530553.js');
+const index = require('./index-ff72278c.js');
+const stencilHooks_module = require('./stencil-hooks.module-8f69ed33.js');
+const index_module = require('./index.module-224d7b8d.js');
 require('./jsonpointer-11327262.js');
 require('./JSS-8503a151.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-fe9d4112.js');
-const emailRegistrationView = require('./email-registration-view-4c5d9379.js');
-require('./useRegistrationFormState-876ed65d.js');
-const useInstantAccessRegistration = require('./useInstantAccessRegistration-bbe746d1.js');
+const emailRegistrationView = require('./email-registration-view-54cedb43.js');
+require('./useRegistrationFormState-49dd9295.js');
+const useInstantAccessRegistration = require('./useInstantAccessRegistration-151a3f4a.js');
 
 const ReferredRegistration = class {
   constructor(hostRef) {

package/dist/cjs/sqm-rewards-table-customer-note-cell.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const index = require('./index-ff72278c.js');
+const stencilHooks_module = require('./stencil-hooks.module-8f69ed33.js');
 require('./JSS-8503a151.js');
-const sqmTextSpanView = require('./sqm-text-span-view-e1cd9bd3.js');
+const sqmTextSpanView = require('./sqm-text-span-view-38222836.js');
 
 const RewardTableCustomerNoteCell = class {
   constructor(hostRef) {

package/dist/cjs/sqm-rewards-table-customer-note-column.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
-require('./index.module-df530553.js');
-const reRender = require('./re-render-1976e05e.js');
+const index = require('./index-ff72278c.js');
+const stencilHooks_module = require('./stencil-hooks.module-8f69ed33.js');
+require('./index.module-224d7b8d.js');
+const reRender = require('./re-render-cd2f8774.js');
 
 const RewardTableCustomerNoteColumn = class {
   constructor(hostRef) {

package/dist/cjs/sqm-rewards-table_9.cjs.entry.js

@@ -2,20 +2,20 @@
 
 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-02e50f09.js');
-const index_module = require('./index.module-df530553.js');
+const index = require('./index-ff72278c.js');
+const stencilHooks_module = require('./stencil-hooks.module-8f69ed33.js');
+const global = require('./global-e067aa06.js');
+const index_module = require('./index.module-224d7b8d.js');
 const utils = require('./utils-6847bc06.js');
 const JSS = require('./JSS-8503a151.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-fe9d4112.js');
-const GenericTableView = require('./GenericTableView-a3f48e15.js');
-const reRender = require('./re-render-1976e05e.js');
-const useChildElements = require('./useChildElements-e0d44916.js');
-const luxon = require('./luxon-05098e19.js');
-const mockRewardData = require('./mockRewardData-4258e067.js');
-const useReferralTable = require('./useReferralTable-a76adb0d.js');
+const GenericTableView = require('./GenericTableView-bb2fcd95.js');
+const reRender = require('./re-render-cd2f8774.js');
+const useChildElements = require('./useChildElements-176ac928.js');
+const luxon = require('./luxon-45228ff5.js');
+const mockRewardData = require('./mockRewardData-d6be2267.js');
+const useReferralTable = require('./useReferralTable-c91d9310.js');
 
 const debug = stencilHooks_module.browser("sq:useRewardsTable");
 const CSS_NAMESPACE = "sqm-rewards-table";

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b0129cd6.js');
+const index = require('./index-ff72278c.js');
 
 const SqmRoute = class {
   constructor(hostRef) {

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

@@ -2,36 +2,36 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
-require('./global-02e50f09.js');
-const index_module = require('./index.module-df530553.js');
+const index = require('./index-ff72278c.js');
+const stencilHooks_module = require('./stencil-hooks.module-8f69ed33.js');
+require('./global-e067aa06.js');
+const index_module = require('./index.module-224d7b8d.js');
 require('./utils-6847bc06.js');
 const JSS = require('./JSS-8503a151.js');
-const copyTextView = require('./copy-text-view-cb8e3aac.js');
+const copyTextView = require('./copy-text-view-55c3f652.js');
 require('./cjs-1066ec21.js');
 require('./mixins-fe9d4112.js');
-const GenericTableView = require('./GenericTableView-a3f48e15.js');
-require('./useChildElements-e0d44916.js');
-const luxon = require('./luxon-05098e19.js');
-require('./sqm-text-span-view-e1cd9bd3.js');
-const sqmAssetCardView = require('./sqm-asset-card-view-a0e33f21.js');
-const sqmCloseButtonView = require('./sqm-close-button-view-217239b7.js');
+const GenericTableView = require('./GenericTableView-bb2fcd95.js');
+require('./useChildElements-176ac928.js');
+const luxon = require('./luxon-45228ff5.js');
+require('./sqm-text-span-view-38222836.js');
+const sqmAssetCardView = require('./sqm-asset-card-view-30ca5188.js');
+const sqmCloseButtonView = require('./sqm-close-button-view-6a709e00.js');
 require('./index-8c6255f5.js');
-const emailRegistrationView = require('./email-registration-view-4c5d9379.js');
-const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-5a3d4a88.js');
-const sqmLogoutCurrentUserView = require('./sqm-logout-current-user-view-c9f18d96.js');
-const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-921704fb.js');
-const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-4e90b6f5.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-bff9783d.js');
-const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-3cd69fe7.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-fde54e35.js');
-require('./utilities-cec9dd36.js');
-const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-34771d2c.js');
-const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-c8f91506.js');
-const ShadowViewAddon = require('./ShadowViewAddon-de6eb98c.js');
-const sqmPortalContainerView = require('./sqm-portal-container-view-990a85a3.js');
-const sqmInvoiceTableView = require('./sqm-invoice-table-view-e3b03a00.js');
+const emailRegistrationView = require('./email-registration-view-54cedb43.js');
+const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-317eb84f.js');
+const sqmLogoutCurrentUserView = require('./sqm-logout-current-user-view-1912b773.js');
+const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-215eba1d.js');
+const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-010a81c7.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-f8980d11.js');
+const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-24339191.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-7c70d7f9.js');
+require('./utilities-719c980a.js');
+const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-1b85b8cf.js');
+const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-cc3c87c3.js');
+const ShadowViewAddon = require('./ShadowViewAddon-2ccdc7e5.js');
+const sqmPortalContainerView = require('./sqm-portal-container-view-976bf0f5.js');
+const sqmInvoiceTableView = require('./sqm-invoice-table-view-2f4f426b.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -15112,6 +15112,12 @@ const ReferralCodes_stories = {
     scenario: scenario$E,
   },
 };
+const demoData = {
+  states: {
+    noCodes: false,
+    loading: false,
+  },
+};
 const pagination = (slot) => {
   return index.h("sqm-pagination", { slot: slot });
 };
@@ -15139,12 +15145,26 @@ const WithPreviouslyCopiedCode = () => {
     shareCodeWithPreviouslyCopied("shareCodes"),
     shareButtons("shareButtons")));
 };
+const Empty$3 = () => {
+  return (index.h("sqm-referral-codes", { demoData: { states: { ...demoData.states, noCodes: true } } },
+    pagination("pagination"),
+    shareCodes("shareCodes"),
+    shareButtons("shareButtons")));
+};
+const Loading$7 = () => {
+  return (index.h("sqm-referral-codes", { demoData: { states: { ...demoData.states, loading: true } } },
+    pagination("pagination"),
+    shareCodes("shareCodes"),
+    shareButtons("shareButtons")));
+};
 
 const ReferralCodes$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': ReferralCodes_stories,
   ReferralCodes: ReferralCodes,
-  WithPreviouslyCopiedCode: WithPreviouslyCopiedCode
+  WithPreviouslyCopiedCode: WithPreviouslyCopiedCode,
+  Empty: Empty$3,
+  Loading: Loading$7
 });
 
 /**

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
-require('./index.module-df530553.js');
-const reRender = require('./re-render-1976e05e.js');
+const index = require('./index-ff72278c.js');
+const stencilHooks_module = require('./stencil-hooks.module-8f69ed33.js');
+require('./index.module-224d7b8d.js');
+const reRender = require('./re-render-cd2f8774.js');
 
 const TabView = ({}, children) => {
   return index.h(index.Host, null, children);

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

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
-const index_module = require('./index.module-df530553.js');
+const index = require('./index-ff72278c.js');
+const stencilHooks_module = require('./stencil-hooks.module-8f69ed33.js');
+const index_module = require('./index.module-224d7b8d.js');
 const utils = require('./utils-6847bc06.js');
-const reRender = require('./re-render-1976e05e.js');
-const useChildElements = require('./useChildElements-e0d44916.js');
+const reRender = require('./re-render-cd2f8774.js');
+const useChildElements = require('./useChildElements-176ac928.js');
 
 const TabsView = ({ content, placement, }) => {
   // Vertical padding for top & bottom placement, horizontal for left & right.

package/dist/cjs/{sqm-text-span-view-e1cd9bd3.js → sqm-text-span-view-38222836.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-b0129cd6.js');
+const index = require('./index-ff72278c.js');
 const JSS = require('./JSS-8503a151.js');
 
 const style = {

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const index = require('./index-ff72278c.js');
+const stencilHooks_module = require('./stencil-hooks.module-8f69ed33.js');
 require('./JSS-8503a151.js');
-const sqmTextSpanView = require('./sqm-text-span-view-e1cd9bd3.js');
+const sqmTextSpanView = require('./sqm-text-span-view-38222836.js');
 
 const Text = class {
   constructor(hostRef) {

package/dist/cjs/{stencil-hooks.module-72742a0b.js → stencil-hooks.module-8f69ed33.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-b0129cd6.js');
+const index = require('./index-ff72278c.js');
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 

package/dist/cjs/{useChildElements-e0d44916.js → useChildElements-176ac928.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
-const index_module = require('./index.module-df530553.js');
+const stencilHooks_module = require('./stencil-hooks.module-8f69ed33.js');
+const index_module = require('./index.module-224d7b8d.js');
 
 function useChildElements() {
   const host = index_module._();

package/dist/cjs/{useInstantAccessRegistration-bbe746d1.js → useInstantAccessRegistration-151a3f4a.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
-const index_module = require('./index.module-df530553.js');
+const stencilHooks_module = require('./stencil-hooks.module-8f69ed33.js');
+const index_module = require('./index.module-224d7b8d.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
-const useRegistrationFormState = require('./useRegistrationFormState-876ed65d.js');
+const useRegistrationFormState = require('./useRegistrationFormState-49dd9295.js');
 
 function useInstantAccessRegistration(props) {
   const cookie = new URLSearchParams(window.location.search);

package/dist/cjs/{useReferralTable-a76adb0d.js → useReferralTable-c91d9310.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-df530553.js');
-const reRender = require('./re-render-1976e05e.js');
-const useChildElements = require('./useChildElements-e0d44916.js');
+const index = require('./index-ff72278c.js');
+const stencilHooks_module = require('./stencil-hooks.module-8f69ed33.js');
+const index_module = require('./index.module-224d7b8d.js');
+const reRender = require('./re-render-cd2f8774.js');
+const useChildElements = require('./useChildElements-176ac928.js');
 
 const debug = stencilHooks_module.browser("sq:useReferralTable");
 const CSS_NAMESPACE = "sqm-referral-table";

package/dist/cjs/{useRegistrationFormState-876ed65d.js → useRegistrationFormState-49dd9295.js}

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

package/dist/cjs/{utilities-cec9dd36.js → utilities-719c980a.js}

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

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; notificationText?: string; showNotificationText?: boolean; 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; notificationText?: string; showNotificationText?: boolean; 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/sqm-pagination-view.js

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { Fragment, h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 const style = {
   Container: {
@@ -16,15 +16,16 @@ const style = {
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function PaginationView(props) {
-  const { onNext, onPrev, currentPage, totalPages } = props;
+  const { onNext, onPrev, currentPage, totalPages, loading } = props;
   return (h("span", { class: sheet.classes.Container, part: "sqm-base" },
     h("style", { type: "text/css" }, styleString),
-    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 },
-      h("span", null, currentPage),
-      h("span", null, "of"),
-      h("span", null, totalPages)),
+    !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 },
+        h("span", null, currentPage),
+        h("span", null, "of"),
+        h("span", null, totalPages)))),
     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

@@ -23,14 +23,16 @@ export class Pagination {
     const hookProps = isDemo()
       ? useDemoPagination(getProps(this))
       : usePagination();
+    console.log("pagination", { hookProps });
     const props = {
-      currentPage: (_a = hookProps.states) === null || _a === void 0 ? void 0 : _a.currentPage,
+      currentPage: ((_a = hookProps.states) === null || _a === void 0 ? void 0 : _a.currentPage) + 1,
       totalPages: (_b = hookProps.states) === null || _b === void 0 ? void 0 : _b.pageCount,
       onNext: () => { var _a, _b; return (_a = hookProps.callbacks) === null || _a === void 0 ? void 0 : _a.setCurrentPage(((_b = hookProps.states) === null || _b === void 0 ? void 0 : _b.currentPage) + 1); },
       onPrev: () => { var _a, _b; return (_a = hookProps.callbacks) === null || _a === void 0 ? void 0 : _a.setCurrentPage(((_b = hookProps.states) === null || _b === void 0 ? void 0 : _b.currentPage) - 1); },
       text: {
         ofText: "of",
       },
+      loading: hookProps.states.loading,
     };
     return h(PaginationView, Object.assign({}, props));
   }

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

@@ -264,7 +264,7 @@ export class ReferralCode {
       "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; notificationText?: string; showNotificationText?: boolean; 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",
@@ -302,6 +302,8 @@ function useDemoReferralCode(props) {
     buttonStyle: props.buttonStyle,
     notificationText: props.notificationText,
     showNotificationText: props.showNotificationText,
+    isCopied: props.showNotificationText,
+    isUsed: false,
     rewardStatus: "AVAILABLE",
     open,
     onClick: () => {

package/dist/collection/components/sqm-referral-code/useReferralCode.js

@@ -1,7 +1,7 @@
 import { useEngagementMedium, useMutation, useParentValue, useProgramId, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
 import { useState } from "@saasquatch/universal-hooks";
 import { gql } from "graphql-request";
-import { REFERRAL_CODES_NAMESPACE, SET_CODE_USED, } from "../sqm-referral-codes/useReferralCodes";
+import { REFERRAL_CODES_NAMESPACE, SET_CODE_COPIED, } from "../sqm-referral-codes/useReferralCodes";
 const MessageLinkQuery = gql `
   query ($programId: ID) {
     user: viewer {
@@ -24,14 +24,15 @@ export function useReferralCode(props) {
   const contextData = useParentValue(REFERRAL_CODES_NAMESPACE);
   const { data } = useQuery(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt) || (contextData === null || contextData === void 0 ? void 0 : contextData.referralCode) !== undefined);
   const [sendLoadEvent] = useMutation(WIDGET_ENGAGEMENT_EVENT);
-  const [setUsed, usedRes] = useMutation(SET_CODE_USED);
+  const [setCopied, copiedRes] = useMutation(SET_CODE_COPIED);
   const copyString = (_b = ((contextData === null || contextData === void 0 ? void 0 : contextData.referralCode) || ((_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.referralCode))) !== null && _b !== void 0 ? _b : 
   // Shown during loading
   "...";
   const [open, setOpen] = useState(false);
-  function onClick() {
+  async function onClick() {
     if (contextData) {
-      setUsed(true);
+      await setCopied({ referralCode: contextData.referralCode });
+      contextData.refresh();
     }
     // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
     // Only if called from a user-initiated event
@@ -51,5 +52,11 @@ export function useReferralCode(props) {
       },
     });
   }
-  return { ...props, onClick, open, copyString: copyString };
+  return {
+    ...props,
+    onClick,
+    open,
+    copyString: copyString,
+    isCopied: contextData === null || contextData === void 0 ? void 0 : contextData.isCopied,
+  };
 }

package/dist/collection/components/sqm-referral-codes/ReferralCodes.stories.js

@@ -6,6 +6,12 @@ export default {
     scenario,
   },
 };
+const demoData = {
+  states: {
+    noCodes: false,
+    loading: false,
+  },
+};
 const pagination = (slot) => {
   return h("sqm-pagination", { slot: slot });
 };
@@ -33,3 +39,15 @@ export const WithPreviouslyCopiedCode = () => {
     shareCodeWithPreviouslyCopied("shareCodes"),
     shareButtons("shareButtons")));
 };
+export const Empty = () => {
+  return (h("sqm-referral-codes", { demoData: { states: { ...demoData.states, noCodes: true } } },
+    pagination("pagination"),
+    shareCodes("shareCodes"),
+    shareButtons("shareButtons")));
+};
+export const Loading = () => {
+  return (h("sqm-referral-codes", { demoData: { states: { ...demoData.states, loading: true } } },
+    pagination("pagination"),
+    shareCodes("shareCodes"),
+    shareButtons("shareButtons")));
+};

package/dist/collection/components/sqm-referral-codes/sqm-referral-codes-view.js

@@ -46,7 +46,18 @@ const vanillaStyle = `
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function ReferralCodesView(props) {
-  const { slots, titleText } = props;
+  const { slots, titleText, states } = props;
+  const getSlotContent = (states) => {
+    if (states.noCodes) {
+      return slots.empty;
+    }
+    if (states.loading) {
+      return slots.loading;
+    }
+    return (h("div", { class: sheet.classes.Wrapper },
+      h("div", { class: sheet.classes.ShareCodeContainer }, slots.shareCodes),
+      h("div", { class: sheet.classes.ShareButtonContainer }, slots.shareButtons)));
+  };
   return (h("div", { class: sheet.classes.Wrapper, part: "sqm-base" },
     h("style", { type: "text/css" },
       vanillaStyle,
@@ -54,6 +65,5 @@ export function ReferralCodesView(props) {
     h("div", { class: sheet.classes.HeaderContainer },
       h("h2", { class: sheet.classes.TitleText }, titleText),
       slots.pagination),
-    h("div", { class: sheet.classes.ShareCodeContainer }, slots.shareCodes),
-    h("div", { class: sheet.classes.ShareButtonContainer }, slots.shareButtons)));
+    getSlotContent(states)));
 }

package/dist/collection/components/sqm-referral-codes/sqm-referral-codes.js

@@ -29,10 +29,14 @@ export class ReferralCodes {
       shareButtons: h("slot", { name: "shareButtons" }),
       shareCodes: h("slot", { name: "shareCodes" }),
       pagination: h("slot", { name: "pagination" }),
+      empty: h(EmptySlot, null),
+      loading: h(LoadingSlot, null),
     };
     const viewProps = {
       slots,
       ...props,
+      loading: props.states.loading,
+      noCodes: props.states.noCodes,
     };
     return h(ReferralCodesView, Object.assign({}, viewProps));
   }
@@ -65,7 +69,7 @@ export class ReferralCodes {
       "mutable": false,
       "complexType": {
         "original": "DemoData<ReferralCodesViewProps>",
-        "resolved": "{ slots?: { shareButtons: VNode; shareCodes: VNode; pagination: VNode; }; titleText?: string; }",
+        "resolved": "{ states?: { noCodes: boolean; loading: boolean; }; slots?: { shareButtons: VNode; shareCodes: VNode; pagination: VNode; empty: VNode; loading: VNode; }; titleText?: string; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -92,8 +96,26 @@ export class ReferralCodes {
     }
   }; }
 }
+function EmptySlot() {
+  return (h("slot", { name: "empty" },
+    h("sqm-empty", { emptyStateHeader: "Your new codes and links aren\u2019t ready yet", emptyStateText: "Please contact our program support team to let them know you\u2019re out of codes." })));
+}
+function LoadingSlot() {
+  return (h("slot", { name: "loading" },
+    h(LoadingRow, null),
+    h(LoadingRow, null),
+    h(LoadingRow, null),
+    h(LoadingRow, null)));
+}
+function LoadingRow() {
+  return h("sl-skeleton", { style: { width: "100%" } });
+}
 function useDemoReferralCodes(props) {
   return deepmerge({
     titleText: props.titleText,
+    states: {
+      noCodes: false,
+      loading: false,
+    },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }