@saasquatch/mint-components 1.11.1-8 → 1.11.1

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/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/sqm-referral-table/sqm-referral-table.js",
     "./components/sqm-reward-exchange-list/sqm-reward-exchange-list.js",
@@ -46,8 +48,6 @@
     "./components/sqm-navigation-menu/sqm-navigation-menu.js",
     "./components/sqm-navigation-sidebar/sqm-navigation-sidebar.js",
     "./components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item.js",
-    "./components/sqm-referral-codes/sqm-referral-codes.js",
-    "./components/sqm-pagination/sqm-pagination.js",
     "./components/sqm-popup-container/sqm-popup-container.js",
     "./components/sqm-portal-change-password/sqm-portal-change-password.js",
     "./components/sqm-portal-container/sqm-portal-container.js",

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,17 @@ const style = {
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function PaginationView(props) {
-  const { onNext, onPrev, currentPage, totalPages } = 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),
-    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 }, 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

@@ -1,11 +1,12 @@
+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";
-import deepmerge from "deepmerge";
-import { withHooks } from "@saasquatch/stencil-hooks";
-import { useState } from "@saasquatch/universal-hooks";
-import { isDemo } from "@saasquatch/component-boilerplate";
 /**
  * @uiName Pagination
  * @exampleGroup Common Components
@@ -14,40 +15,57 @@ import { isDemo } from "@saasquatch/component-boilerplate";
 export class Pagination {
   constructor() {
     this.ignored = true;
+    /**
+     * @uiName Pagination text
+     */
+    this.paginationText = "{currentPage} of {totalPages}";
     withHooks(this);
   }
   disconnectedCallback() { }
   render() {
-    // const props = getProps(this);
-    var _a, _b;
     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,
-      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",
-      },
-    };
-    return h(PaginationView, Object.assign({}, props));
+      : 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<any>",
-        "resolved": "{ [x: string]: any; [x: number]: any; }",
+        "original": "DemoData<UsePagination>",
+        "resolved": "{}",
         "references": {
           "DemoData": {
             "location": "import",
             "path": "../../global/demo"
+          },
+          "UsePagination": {
+            "location": "import",
+            "path": "./usePagination"
           }
         }
       },
@@ -73,14 +91,22 @@ function useDemoPagination(props) {
   const [currentPage, setCurrentPage] = useState(1);
   return deepmerge({
     states: {
-      currentPage: currentPage,
-      pageCount: 5,
+      currentPage,
+      totalPages: 5,
+      loading: false,
     },
     callbacks: {
-      setCurrentPage,
+      onNext: () => setCurrentPage(currentPage + 1),
+      onPrev: () => setCurrentPage(currentPage - 1),
     },
     text: {
-      ofText: `${currentPage} of 5`,
+      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

@@ -1,8 +1,29 @@
 import { useParentValue } from "@saasquatch/component-boilerplate";
 import { REFERRAL_CODES_PAGINATION_CONTEXT, } from "../sqm-referral-codes/useReferralCodes";
-export function usePagination() {
+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 {
-    ...context,
+    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-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-code/sqm-referral-code.js

@@ -8,7 +8,7 @@ import { useReferralCode } from "./useReferralCode";
 /**
  * @uiName Referral Code
  * @exampleGroup Sharing
- * @example Referral Code - <sqm-referral-code tooltip-text="Copied to Clipboard" tooltip-lifespan="1000"></sqm-referral-code>
+ * @example Referral Code - <sqm-referral-code tooltip-text="Copied to Clipboard" tooltip-lifespan="1000" show-notification-text="true"></sqm-referral-code>
  */
 export class ReferralCode {
   constructor() {
@@ -25,7 +25,7 @@ export class ReferralCode {
      */
     this.showNotificationText = false;
     /**
-     * Shown underneath the referral code when the user has already copied the code
+     * Shown underneath single-use promo codes when the user has already copied the code
      *
      * @uiName Notification text
      */
@@ -39,7 +39,7 @@ export class ReferralCode {
     /**
      * Change the text alignment
      *
-     * @uiName referral code alignment
+     * @uiName Referral code alignment
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
@@ -151,7 +151,7 @@ export class ReferralCode {
             "text": "Notification text",
             "name": "uiName"
           }],
-        "text": "Shown underneath the referral code when the user has already copied the code"
+        "text": "Shown underneath single-use promo codes when the user has already copied the code"
       },
       "attribute": "notification-text",
       "reflect": false,
@@ -190,7 +190,7 @@ export class ReferralCode {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "referral code alignment",
+            "text": "Referral code alignment",
             "name": "uiName"
           }, {
             "text": "string",
@@ -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,9 +1,9 @@
 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) {
+  query getReferralCode($programId: ID) {
     user: viewer {
       ... on User {
         referralCode(programId: $programId)
@@ -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] = 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,12 @@ 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,
+    showNotificationText: props.showNotificationText && !!(contextData === null || contextData === void 0 ? void 0 : contextData.singleUse),
+  };
 }

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

@@ -6,6 +6,16 @@ export default {
     scenario,
   },
 };
+const demoData = {
+  titleText: "Start sharing",
+  emptyStateHeaderText: "Your new codes and links aren’t ready yet",
+  emptyStateDescriptionText: "Please contact our program support team to let them know you’re out of codes.",
+  emptyStateImageUrl: "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png",
+  states: {
+    noCodes: false,
+    loading: false,
+  },
+};
 const pagination = (slot) => {
   return h("sqm-pagination", { slot: slot });
 };
@@ -33,3 +43,23 @@ 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 EmptyWithCustomTextAndImage = () => {
+  return (h("sqm-referral-codes", { emptyStateHeaderText: "Tus nuevos c\u00F3digos y enlaces a\u00FAn no est\u00E1n listos", emptyStateDescriptionText: "Comun\u00EDquese con nuestro equipo de soporte del programa para informarles que no tiene c\u00F3digos.", emptyStateImageUrl: "https://img.freepik.com/free-vector/hand-drawn-no-data-concept_52683-127829.jpg?t=st=1738890457~exp=1738894057~hmac=2f0f32c1f0fc051f47d772a4517e2e4c4f38af5069fb855edc96d8331d9d1329&w=826", 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,14 +46,24 @@ 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,
       styleString),
     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)));
+      !states.noCodes && !states.loading && slots.pagination),
+    getSlotContent(states)));
 }

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

@@ -3,19 +3,32 @@ import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, Prop, h } from "@stencil/core";
 import deepmerge from "deepmerge";
 import { getProps } from "../../utils/utils";
-import { useReferralCodes } from "./useReferralCodes";
 import { ReferralCodesView, } from "./sqm-referral-codes-view";
+import { useReferralCodes } from "./useReferralCodes";
 /**
- * @uiName Referral Codes
+ * @uiName Promo Codes
+ * @slots [{"name":"", "title":"Promo Codes Content"}]
  * @exampleGroup Sharing
- * @example Referral Codes - <sqm-referral-codes><sqm-pagination slot="pagination"></sqm-pagination><sqm-referral-code slot="shareCodes"></sqm-referral-code><sqm-portal-container gap="small" slot="shareButtons"><sqm-share-button medium="email">Share via email</sqm-share-button><sqm-share-button medium="facebook">Share on Facebook</sqm-share-button><sqm-share-button medium="whatsapp">Share on WhatsApp</sqm-share-button></sqm-portal-container></sqm-referral-codes>
+ * @example Promo Codes - <sqm-referral-codes><sqm-pagination slot="pagination"></sqm-pagination><sqm-referral-code slot="shareCodes" show-notification-text="true"></sqm-referral-code><sqm-portal-container gap="small" slot="shareButtons"><sqm-share-button medium="email">Share via email</sqm-share-button><sqm-share-button medium="fbmessenger">Share on Facebook</sqm-share-button><sqm-share-button medium="whatsapp">Share on WhatsApp</sqm-share-button></sqm-portal-container></sqm-referral-codes>
  */
 export class ReferralCodes {
   constructor() {
     /**
      * @uiName Title Text
      */
-    this.titleText = "Your referral code";
+    this.titleText = "Start sharing";
+    /**
+     * @uiName Empty State Header Text
+     */
+    this.emptyStateHeaderText = "Your new codes and links aren’t ready yet";
+    /**
+     * @uiName Empty State Description Text
+     */
+    this.emptyStateDescriptionText = "Please contact our program support team to let them know you’re out of codes.";
+    /**
+     * @uiName Empty State Image URL
+     */
+    this.emptyStateImageUrl = "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -24,11 +37,12 @@ export class ReferralCodes {
     const props = isDemo()
       ? useDemoReferralCodes(thisProps)
       : useReferralCodes(thisProps);
-    console.log(props);
     const slots = {
       shareButtons: h("slot", { name: "shareButtons" }),
       shareCodes: h("slot", { name: "shareCodes" }),
       pagination: h("slot", { name: "pagination" }),
+      empty: (h(EmptySlot, { headerText: this.emptyStateHeaderText, descriptionText: this.emptyStateDescriptionText, imageUrl: this.emptyStateImageUrl })),
+      loading: h(LoadingSlot, null),
     };
     const viewProps = {
       slots,
@@ -60,14 +74,100 @@ export class ReferralCodes {
       },
       "attribute": "title-text",
       "reflect": false,
-      "defaultValue": "\"Your referral code\""
+      "defaultValue": "\"Start sharing\""
+    },
+    "emptyStateHeaderText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Empty State Header Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "empty-state-header-text",
+      "reflect": false,
+      "defaultValue": "\"Your new codes and links aren\u2019t ready yet\""
+    },
+    "emptyStateDescriptionText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Empty State Description Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "empty-state-description-text",
+      "reflect": false,
+      "defaultValue": "\"Please contact our program support team to let them know you\u2019re out of codes.\""
+    },
+    "emptyStateImageUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Empty State Image URL",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "empty-state-image-url",
+      "reflect": false,
+      "defaultValue": "\"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png\""
+    },
+    "programId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Program ID",
+            "name": "uiName"
+          }, {
+            "text": "programSelector",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "program-id",
+      "reflect": false
     },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<ReferralCodesViewProps>",
-        "resolved": "{ slots?: { shareButtons: VNode; shareCodes: VNode; pagination: VNode; }; loading?: boolean; titleText?: string; noCodes?: boolean; }",
+        "resolved": "{ states?: { noCodes: boolean; loading: boolean; }; slots?: { shareButtons: VNode; shareCodes: VNode; pagination: VNode; empty: VNode; loading: VNode; }; titleText?: string; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -94,6 +194,20 @@ export class ReferralCodes {
     }
   }; }
 }
+function EmptySlot({ headerText, descriptionText, imageUrl, }) {
+  return (h("slot", { name: "empty" },
+    h("sqm-empty", { emptyStateHeader: headerText, emptyStateText: descriptionText, emptyStateImage: imageUrl })));
+}
+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,