@saasquatch/mint-components 1.11.1-0 → 1.11.1-10

package/dist/esm/{ShadowViewAddon-5bb2b69a.js → ShadowViewAddon-faef41b7.js}

@@ -4,7 +4,7 @@ import { i as intl } from './global-b89b6edc.js';
 import { d as dist, H, Q, I as In, y as yn, $ as $e, B, a as getEnvironmentSDK, L } from './index.module-f122af7b.js';
 import { l as luxonLocale } from './utils-334c1e34.js';
 import { c as createStyleSheet, j as jss, a as create } from './JSS-67b5cff8.js';
-import { a as REFERRAL_CODES_NAMESPACE, C as CopyTextView } from './copy-text-view-bf55abeb.js';
+import { a as REFERRAL_CODES_NAMESPACE, S as SET_CODE_USED, C as CopyTextView } from './copy-text-view-3fa5df7b.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { H as HostBlock, A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-f60a614c.js';
 import { u as useChildElements } from './useChildElements-37daf533.js';
@@ -379,11 +379,15 @@ function useShareLink(props) {
   const contextData = In(REFERRAL_CODES_NAMESPACE);
   const { data } = yn(MessageLinkQuery, { programId, engagementMedium }, !(user === null || user === void 0 ? void 0 : user.jwt) || !!props.linkOverride || (contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) !== undefined);
   const [sendLoadEvent] = $e(WIDGET_ENGAGEMENT_EVENT);
+  const [setUsed, usedRes] = $e(SET_CODE_USED);
   const copyString = (_b = ((contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) || ((_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.shareLink))) !== null && _b !== void 0 ? _b : 
   // Shown during loading
   "...";
   const [open, setOpen] = useState(false);
   function onClick() {
+    if (contextData) {
+      setUsed(true);
+    }
     // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
     // Only if called from a user-initiated event
     navigator.clipboard.writeText(copyString);
@@ -457,7 +461,7 @@ function GenericShare(messageLink, errorText) {
   return messageLink ? window.open(messageLink) : alert(errorText);
 }
 function useShareButton(props) {
-  var _a, _b, _c;
+  var _a, _b;
   const { sharetitle, sharetext, medium } = props;
   const programId = props.programId ? props.programId : H();
   const user = Q();
@@ -467,24 +471,29 @@ function useShareButton(props) {
     shareMedium: medium.toUpperCase(),
   };
   const data = In(REFERRAL_CODES_NAMESPACE);
+  const overrideData = data === null || data === void 0 ? void 0 : data[medium];
   // only queries if a programId is available
-  const res = yn(MessageLinkQuery$1, variables, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId || (data === null || data === void 0 ? void 0 : data[medium]) !== undefined);
-  const directLink = ((_a = data === null || data === void 0 ? void 0 : data[medium]) === null || _a === void 0 ? void 0 : _a.shareLink) || ((_c = (_b = res === null || res === void 0 ? void 0 : res.data) === null || _b === void 0 ? void 0 : _b.viewer) === null || _c === void 0 ? void 0 : _c.shareLink);
+  const res = yn(MessageLinkQuery$1, variables, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId || overrideData !== undefined);
+  const [setUsed, usedRes] = $e(SET_CODE_USED);
+  const directLink = (overrideData === null || overrideData === void 0 ? void 0 : overrideData.shareLink) || ((_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.shareLink);
   const environment = getEnvironmentSDK();
   const hide = (medium.toLocaleUpperCase() === "SMS" &&
     window.orientation === undefined) ||
     (medium.toLocaleUpperCase() === "DIRECT" && !window.navigator.share);
   function onClick() {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d;
+    if (overrideData) {
+      setUsed(true);
+    }
     if (medium.toLocaleUpperCase() === "FACEBOOK" &&
       environment.type === "SquatchAndroid") {
-      FacebookShare(directLink, ((_a = data === null || data === void 0 ? void 0 : data[medium]) === null || _a === void 0 ? void 0 : _a.messageLink) || ((_c = (_b = res.data) === null || _b === void 0 ? void 0 : _b.viewer) === null || _c === void 0 ? void 0 : _c.messageLink), props.errorText);
+      FacebookShare(directLink, (overrideData === null || overrideData === void 0 ? void 0 : overrideData.messageLink) || ((_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.messageLink), props.errorText);
     }
     else if (medium.toLocaleUpperCase() === "DIRECT") {
       NativeShare({ sharetitle, sharetext }, directLink, props.errorText, props.unsupportedPlatformText);
     }
     else {
-      GenericShare(((_d = data === null || data === void 0 ? void 0 : data[medium]) === null || _d === void 0 ? void 0 : _d.messageLink) || ((_f = (_e = res.data) === null || _e === void 0 ? void 0 : _e.viewer) === null || _f === void 0 ? void 0 : _f.messageLink), props.errorText);
+      GenericShare((overrideData === null || overrideData === void 0 ? void 0 : overrideData.messageLink) || ((_d = (_c = res.data) === null || _c === void 0 ? void 0 : _c.viewer) === null || _d === void 0 ? void 0 : _d.messageLink), props.errorText);
     }
   }
   return { ...props, loading: res.loading, onClick, hide };

package/dist/esm/{copy-text-view-bf55abeb.js → copy-text-view-3fa5df7b.js}

@@ -1,20 +1,72 @@
 import { h } from './index-17b4da69.js';
 import { f as useEffect } from './stencil-hooks.module-ac12ca1c.js';
-import { d as dist, Q, k as kn, C as Cn } from './index.module-f122af7b.js';
+import { d as dist, Q, k as kn, C as Cn, B } from './index.module-f122af7b.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import { H as HostBlock } from './mixins-f60a614c.js';
 
-const GET_REFERRAL_CODES = dist.gql `query getReferralCodes {
-}`;
+const GET_REFERRAL_CODES = dist.gql `
+  query getCodes(
+    $limit: Int!
+    $offset: Int!
+    $engagementMedium: UserEngagementMedium!
+  ) {
+    viewer {
+      ... on User {
+        referralCodeList(
+          limit: $limit
+          offset: $offset
+          filter: { fuelTank_eq: true }
+        ) {
+          data {
+            code
+            dateUsed
+            dateCopied
+            shareLinkCodes(limit: $limit, offset: $offset) {
+              data {
+                linkCode
+                shareLink: shortUrl(
+                  shareMedium: DIRECT
+                  engagementMedium: EMBED
+                )
+                email: shortUrl(
+                  shareMedium: EMAIL
+                  engagementMedium: $engagementMedium
+                )
+                whatsApp: shortUrl(
+                  shareMedium: WHATSAPP
+                  engagementMedium: $engagementMedium
+                )
+                fbMessenger: shortUrl(
+                  shareMedium: FBMESSENGER
+                  engagementMedium: $engagementMedium
+                )
+              }
+            }
+          }
+          count
+          totalCount
+        }
+      }
+    }
+  }
+`;
 const REFERRAL_CODES_NAMESPACE = "sq:referral-codes";
 const REFERRAL_CODES_PAGINATION_CONTEXT = "sq:referral-codes-pagination";
+const SET_CODE_USED = dist.gql `
+mutation test {}
+`;
 function useReferralCodes(props) {
   const user = Q();
+  const engagementMedium = B();
   console.log({ props });
-  const { envelope: referralData, states, callbacks, } = kn(GET_REFERRAL_CODES, (data) => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.referralCodes; }, {
+  const { envelope: referralData, states, callbacks, } = kn(GET_REFERRAL_CODES, (data) => {
+    var _a;
+    console.log({ queryData: data });
+    return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.referralCodeList;
+  }, {
     limit: 1,
     offset: 0,
-  }, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
+  }, { engagementMedium }, !(user === null || user === void 0 ? void 0 : user.jwt));
   const [paginationContext, setPaginationContext] = Cn({
     namespace: REFERRAL_CODES_PAGINATION_CONTEXT,
     initialValue: { states, callbacks },
@@ -36,40 +88,33 @@ function useReferralCodes(props) {
     },
   });
   useEffect(() => {
-    if (referralData === null || referralData === void 0 ? void 0 : referralData.data)
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    if ((_a = referralData === null || referralData === void 0 ? void 0 : referralData.data) === null || _a === void 0 ? void 0 : _a.length) {
+      const data = referralData.data[0];
       setReferralCodesContext({
-        referralCode: "EXAMPLECODE",
-        shareLink: "https://example.com",
+        referralCode: data.code,
+        shareLink: (_c = (_b = data.shareLinkCodes) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.direct,
         email: {
-          messageLink: "https://example.com",
+          messageLink: (_e = (_d = data.shareLinkCodes) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.email,
         },
         fbMessenger: {
-          messageLink: "https://example.com",
-          shareLink: "https://example.com",
+          messageLink: (_g = (_f = data.shareLinkCodes) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.fbMessenger,
+          shareLink: (_j = (_h = data.shareLinkCodes) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.fbMessenger,
         },
-        whatsApp: { messageLink: "https://example.com" },
+        whatsApp: { messageLink: (_l = (_k = data.shareLinkCodes) === null || _k === void 0 ? void 0 : _k[0]) === null || _l === void 0 ? void 0 : _l.whatsApp },
       });
+    }
   }, [referralData]);
   useEffect(() => {
     setPaginationContext({ states, callbacks });
-  }, [states]);
+  }, [states.loading]);
   console.log({ referralData, states });
   return {
     states: {
       ...states,
+      noCodes: (referralData === null || referralData === void 0 ? void 0 : referralData.totalCount) === 0,
     },
-    data: {
-      referralCode: "EXAMPLECODE",
-      shareLink: "https://example.com",
-      email: {
-        messageLink: "https://example.com",
-      },
-      fbMessenger: {
-        messageLink: "https://example.com",
-        shareLink: "https://example.com",
-      },
-      whatsApp: { messageLink: "https://example.com" },
-    },
+    data: referralCodesContext,
     callbacks: {
     // onPrev: () => callbacks.setCurrentPage(states.currentPage - 1),
     // onNext: () => callbacks.setCurrentPage(states.currentPage + 1),
@@ -165,4 +210,4 @@ function CopyTextView(props) {
     props.showNotificationText && props.notificationText && (h("p", { part: "sqm-notification-text", class: sheet.classes.notificationTextStyle }, props.notificationText))));
 }
 
-export { CopyTextView as C, REFERRAL_CODES_PAGINATION_CONTEXT as R, REFERRAL_CODES_NAMESPACE as a, useReferralCodes as u };
+export { CopyTextView as C, REFERRAL_CODES_PAGINATION_CONTEXT as R, SET_CODE_USED as S, REFERRAL_CODES_NAMESPACE as a, useReferralCodes as u };

package/dist/esm/sqm-big-stat_38.entry.js

@@ -5,7 +5,7 @@ import { i as isDemo, _, d as dist, Q, H, $ as $e, y as yn, B, L, g as gn, e as
 import { j as jsonpointer } from './jsonpointer-388a7082.js';
 import { g as getProps, a as getMissingProps, s as sanitizeUrlPath } from './utils-334c1e34.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { C as CopyTextView } from './copy-text-view-bf55abeb.js';
+import { C as CopyTextView } from './copy-text-view-3fa5df7b.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './mixins-f60a614c.js';
 import { a as useRequestRerender } from './re-render-c64289f3.js';
@@ -16,7 +16,7 @@ import { p as pathToRegexp } from './index-ffa26b43.js';
 import { R as REGISTRATION_FORM_STATE_CONTEXT, u as useRegistrationFormState } from './useRegistrationFormState-53c71782.js';
 import { i as isEmpty } from './utilities-18d10876.js';
 import { A as AsYouType } from './AsYouType-46f67d0d.js';
-import { b as useDemoBigStat, U as useBigStat, B as BigStatView, O as autoColorScaleCss, J as CardFeedView, C as CheckboxFieldView, K as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, V as withShadowView, L as LeaderboardView, N as NameFieldsView, d as PortalChangePasswordView, i as PortalFooterView, P as PortalFrameView, e as PortalLoginView, f as PortalRegisterView, R as ReferralIframeView, W as demoRewardExchange, j as RewardExchangeView, a as useShareButton, S as ShareButtonView, u as useShareLink, c as StatContainerView, T as TaskCardView } from './ShadowViewAddon-5bb2b69a.js';
+import { b as useDemoBigStat, U as useBigStat, B as BigStatView, O as autoColorScaleCss, J as CardFeedView, C as CheckboxFieldView, K as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, V as withShadowView, L as LeaderboardView, N as NameFieldsView, d as PortalChangePasswordView, i as PortalFooterView, P as PortalFrameView, e as PortalLoginView, f as PortalRegisterView, R as ReferralIframeView, W as demoRewardExchange, j as RewardExchangeView, a as useShareButton, S as ShareButtonView, u as useShareLink, c as StatContainerView, T as TaskCardView } from './ShadowViewAddon-faef41b7.js';
 import './sqm-portal-container-view-6c582684.js';
 
 const BigStat = class {

package/dist/esm/sqm-pagination_3.entry.js

@@ -3,7 +3,7 @@ import { n as h$1, k as useState } from './stencil-hooks.module-ac12ca1c.js';
 import { I as In, i as isDemo, d as dist, H, Q, y as yn, $ as $e, B } from './index.module-f122af7b.js';
 import { g as getProps } from './utils-334c1e34.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { R as REFERRAL_CODES_PAGINATION_CONTEXT, a as REFERRAL_CODES_NAMESPACE, C as CopyTextView, u as useReferralCodes } from './copy-text-view-bf55abeb.js';
+import { R as REFERRAL_CODES_PAGINATION_CONTEXT, a as REFERRAL_CODES_NAMESPACE, S as SET_CODE_USED, C as CopyTextView, u as useReferralCodes } from './copy-text-view-3fa5df7b.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './mixins-f60a614c.js';
 
@@ -56,6 +56,7 @@ const Pagination = class {
     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,
@@ -106,11 +107,15 @@ function useReferralCode(props) {
   const contextData = In(REFERRAL_CODES_NAMESPACE);
   const { data } = yn(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt) || (contextData === null || contextData === void 0 ? void 0 : contextData.referralCode) !== undefined);
   const [sendLoadEvent] = $e(WIDGET_ENGAGEMENT_EVENT);
+  const [setUsed, usedRes] = $e(SET_CODE_USED);
   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() {
+    if (contextData) {
+      setUsed(true);
+    }
     // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
     // Only if called from a user-initiated event
     navigator.clipboard.writeText(copyString);
@@ -276,6 +281,9 @@ function ReferralCodesView(props) {
 const ReferralCodes = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    /**
+     * @uiName Title Text
+     */
     this.titleText = "Your referral code";
     h$1(this);
   }
@@ -294,13 +302,19 @@ const ReferralCodes = class {
     const viewProps = {
       slots,
       ...props,
+      loading: props.states.loading,
+      noCodes: props.states.noCodes,
     };
     return h(ReferralCodesView, Object.assign({}, viewProps));
   }
 };
 function useDemoReferralCodes(props) {
   return cjs({
-    titleText: "Your referral code",
+    titleText: props.titleText,
+    states: {
+      noCodes: false,
+      loading: false,
+    },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 

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

@@ -4,7 +4,7 @@ import './global-b89b6edc.js';
 import { e as $n, S as Sn, b as setUserIdentity, d as dist, X as Xe, o as setProgramId } from './index.module-f122af7b.js';
 import './utils-334c1e34.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { C as CopyTextView } from './copy-text-view-bf55abeb.js';
+import { C as CopyTextView } from './copy-text-view-3fa5df7b.js';
 import './cjs-bdfb4486.js';
 import './mixins-f60a614c.js';
 import { G as GenericTableView } from './GenericTableView-bf154727.js';
@@ -25,7 +25,7 @@ import { P as PortalProfileView } from './sqm-portal-profile-view-d72dd5ac.js';
 import './utilities-18d10876.js';
 import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-f1454d43.js';
 import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-3739f523.js';
-import { S as ShareButtonView, L as LeaderboardView, B as BigStatView, P as PortalFrameView, E as EditProfileView, u as useShareLink, a as useShareButton, b as useDemoBigStat, c as StatContainerView, d as PortalChangePasswordView, e as PortalLoginView, f as PortalRegisterView, T as TaskCardView, g as ProgressBarView, h as PoweredByImg$1, i as PortalFooterView, H as HeroView, R as ReferralIframeView, N as NameFieldsView, C as CheckboxFieldView, D as DropdownFieldView, I as InputFieldView, j as RewardExchangeView, r as rewardExchangeCustomErrorMsg, k as rewardExchangeLongText, l as rewardExchangeSelected, m as chooseAmountFixed, n as chooseAmountFixedNoDescription, o as chooseAmountVariable, p as chooseAmountVariableNoDescription, q as chooseAmountVariableDisabled, s as chooseAmountVariableUnavailable, t as confirmFixed, v as confirmVariable, w as redemptionError, x as queryError, y as success, z as successVariable, A as loading, F as empty$1, G as rewardExchange, J as CardFeedView, K as CouponCodeView, M as ProgressBar$2, O as autoColorScaleCss, Q as ShadowViewAddon } from './ShadowViewAddon-5bb2b69a.js';
+import { S as ShareButtonView, L as LeaderboardView, B as BigStatView, P as PortalFrameView, E as EditProfileView, u as useShareLink, a as useShareButton, b as useDemoBigStat, c as StatContainerView, d as PortalChangePasswordView, e as PortalLoginView, f as PortalRegisterView, T as TaskCardView, g as ProgressBarView, h as PoweredByImg$1, i as PortalFooterView, H as HeroView, R as ReferralIframeView, N as NameFieldsView, C as CheckboxFieldView, D as DropdownFieldView, I as InputFieldView, j as RewardExchangeView, r as rewardExchangeCustomErrorMsg, k as rewardExchangeLongText, l as rewardExchangeSelected, m as chooseAmountFixed, n as chooseAmountFixedNoDescription, o as chooseAmountVariable, p as chooseAmountVariableNoDescription, q as chooseAmountVariableDisabled, s as chooseAmountVariableUnavailable, t as confirmFixed, v as confirmVariable, w as redemptionError, x as queryError, y as success, z as successVariable, A as loading, F as empty$1, G as rewardExchange, J as CardFeedView, K as CouponCodeView, M as ProgressBar$2, O as autoColorScaleCss, Q as ShadowViewAddon } from './ShadowViewAddon-faef41b7.js';
 import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-6c582684.js';
 import { O as OtherRegionSlotView, I as InvoiceTableView, T as TaxForm } from './sqm-invoice-table-view-09cc28d6.js';
 
@@ -15100,7 +15100,7 @@ const UseInvoiceTableCells = /*#__PURE__*/Object.freeze({
   InvoiceTableDemoHook: InvoiceTableDemoHook
 });
 
-const scenario$E = "@author: sam\n@owner: sam\n\nFeature: Referral Codes Component\n\n    A paginated display of available and used promo codes for the user to share with others\n\n    @motivating\n    Scenario: Promo code can be shared using various share mediums\n        Given an authenticated user\n        And the program has promo codes configured\n        When the promo code section is loaded\n        Then the promo code can be copied directly\n        And the promo code can be shared using <shareMedium>\n\n        Examples:\n            | shareMedium |\n            | DIRECT      |\n            | EMAIL       |\n            | FBMESSENGER |\n            | WHATSAPP    |\n\n    @minutia\n    Scenario: User is notified if the currently viewed promo code has been used already\n        Given an authenticated user\n        And the program has promo codes configured\n        When the promo code section is loaded\n        And the code has not been used already\n        Then no notification text is displayed\n        When the code is changed to one that has been used\n        Then the notification text is displayed\n\n    @minutia\n    Scenario Outline: Share mediums can be optionally displayed\n        Given an authenticated user\n        And the program has promo codes configured\n        And <propName> is true\n        Then the <shareMedium> is hidden\n        Examples:\n            | propName        | shareMedium |\n            | hideSharelink   | DIRECT      |\n            | hideEmail       | EMAIL       |\n            | hideFbMessenger | FBMESSENGER |\n            | hideWhatsApp    | WHATSAPP    |\n\n    @minutia\n    Scenario Outline: Number of codes is displayed in the pagination component\n        Given an authenticated user\n        And the program has promo codes configured\n        When the promo code section is loaded\n        And the user has <numCodes> available\n        And the user is on <currentPage>\n        Then the pagination text is <paginationText>\n        Examples:\n            | numCodes | currentPage | paginationText |\n            | 5        | 1           | 1 of 5         |\n            | 5        | 2           | 2 of 5         |\n            | 5        | 3           | 3 of 5         |\n            | 5        | 4           | 4 of 5         |\n            | 5        | 5           | 5 of 5         |\n            | 1        | 1           | 1 of 1         |\n            | 0        | 0           | 0 of 0         |\n\n";
+const scenario$E = "@author: sam\n@owner: sam\n\nFeature: Referral Codes Component\n\n    A paginated display of available and used promo codes for the user to share with others\n\n    @motivating\n    Scenario: Promo code can be shared using various share mediums\n        Given an authenticated user\n        And the program has promo codes configured\n        When the promo code section is loaded\n        Then the promo code can be copied directly\n        And the promo code can be shared using <shareMedium>\n\n        Examples:\n            | shareMedium |\n            | DIRECT      |\n            | EMAIL       |\n            | FBMESSENGER |\n            | WHATSAPP    |\n\n    @minutia\n    Scenario: User is notified if the currently viewed promo code has been used already\n        Given an authenticated user\n        And the program has promo codes configured\n        When the promo code section is loaded\n        And the code has not been used already\n        Then no notification text is displayed\n        When the code is changed to one that has been used\n        Then the notification text is displayed\n\n    @minutia\n    Scenario Outline: Share buttons slots use the link from referral codes instead of the default query\n        Given an authenticated user\n        And the program has promo codes configured\n        And a <shareMedium> button is a child of `<sqm-referral-codes>`\n        Then the <shareMedium> button is shown\n        And the link is <promoCode>\n        Examples:\n            | propName        | shareMedium | promoCode  |\n            | hideSharelink   | DIRECT      | PROMOCODE1 |\n            | hideEmail       | EMAIL       | PROMOCODE1 |\n            | hideFbMessenger | FBMESSENGER | PROMOCODE1 |\n            | hideWhatsApp    | WHATSAPP    | PROMOCODE1 |\n\n    @minutia\n    Scenario Outline: Number of codes is displayed in the pagination component\n        Given an authenticated user\n        And the program has promo codes configured\n        When the promo code section is loaded\n        And the user has <numCodes> available\n        And the user is on <currentPage>\n        Then the pagination text is <paginationText>\n        Examples:\n            | numCodes | currentPage | paginationText |\n            | 5        | 1           | 1 of 5         |\n            | 5        | 2           | 2 of 5         |\n            | 5        | 3           | 3 of 5         |\n            | 5        | 4           | 4 of 5         |\n            | 5        | 5           | 5 of 5         |\n            | 1        | 1           | 1 of 1         |\n            | 0        | 0           | 0 of 0         |\n\n";
 
 const ReferralCodes_stories = {
   title: "Components/Referral Codes",