@saasquatch/mint-components 1.12.0-9 → 1.12.1-1

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

@@ -19,9 +19,8 @@ const index$1 = require('./index-8c6255f5.js');
 const useRegistrationFormState = require('./useRegistrationFormState-f9ce55be.js');
 const utilities = require('./utilities-f7de6c04.js');
 const AsYouType = require('./AsYouType-6788393a.js');
-const ShadowViewAddon = require('./ShadowViewAddon-040cffad.js');
+const ShadowViewAddon = require('./ShadowViewAddon-88821c64.js');
 require('./sqm-portal-container-view-990a85a3.js');
-const usePayoutStatus = require('./usePayoutStatus-b9fb7399.js');
 
 const BigStat = class {
   constructor(hostRef) {
@@ -1604,6 +1603,50 @@ const LinkButton = class {
   }
 };
 
+const MarketingEmailsCheckbox = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * This name is used as the key for this form field on submission. The name must be unique within this specific form.
+     * @uiName Checkbox name attribute
+     * @required
+     */
+    this.checkboxName = "marketingEmails";
+    /**
+     * @uiName Checkbox label
+     * @uiWidget textArea
+     */
+    this.checkboxLabel = "I would like to receive marketing and promotional emails for this referral program";
+    /**
+     * @uiName Required
+     */
+    this.checkboxRequired = false;
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const content = {
+      ...utils.getProps(this),
+    };
+    const { states, callbacks } = index_module.isDemo()
+      ? useCheckboxFieldDemo$1(this)
+      : useCheckboxField(this);
+    return (index.h(ShadowViewAddon.CheckboxFieldView, { states: states, content: content, callbacks: callbacks }));
+  }
+};
+function useCheckboxFieldDemo$1(props) {
+  return cjs.cjs({
+    states: {
+      registrationFormState: {},
+      checked: false,
+    },
+    callbacks: {
+      setChecked: () => { },
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
 function useNameFields(props) {
   const registrationFormState = stencilHooks_module.d(useRegistrationFormState.REGISTRATION_FORM_STATE_CONTEXT);
   return {
@@ -1721,270 +1764,6 @@ function useNavigationMenuDemo(props) {
 }
 NavigationMenu.style = sqmNavigationMenuCss;
 
-const style$2 = {
-  Wrapper: {
-    maxWidth: "200px",
-  },
-  PayoutButtonDescription: {
-    color: "var(--sl-color-neutral-500)",
-    fontSize: "var(--sl-font-size-small)",
-    margin: "0",
-  },
-};
-const sheet$2 = JSS.createStyleSheet(style$2);
-const styleString$2 = sheet$2.toString();
-function PayoutButtonScrollView(props) {
-  const { text, states } = props;
-  if (!states.payoutSettingsComplete)
-    return index.h("div", null);
-  return (index.h("div", { part: "sqm-base", class: sheet$2.classes.Wrapper },
-    index.h("style", { type: "text/css" }, styleString$2),
-    index.h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.payoutButtonText, "scroll-animation": "smooth" }),
-    index.h("p", { class: sheet$2.classes.PayoutButtonDescription }, text.payoutButtonDescription)));
-}
-
-const PayoutButtonScroll = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * @uiName Payout button text
-     */
-    this.payoutButtonText = "Payouts & Tax Settings";
-    /**
-     * Description text under payout button
-     * @uiName Payout button description text
-     */
-    this.payoutButtonDescription = "Check your payout settings to see when you’ll get paid out next";
-    this.ignored = true;
-    stencilHooks_module.h$1(this);
-  }
-  disconnectedCallback() { }
-  getTextProps() {
-    return utils.getProps(this);
-  }
-  render() {
-    const props = useDemoPayoutButtonScroll(this);
-    return index.h(PayoutButtonScrollView, Object.assign({}, props));
-  }
-};
-function useDemoPayoutButtonScroll(props) {
-  return cjs.cjs({
-    states: {
-      payoutSettingsComplete: false,
-    },
-    text: props.getTextProps(),
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}
-
-const style$3 = {
-  SkeletonOne: {
-    width: "50%",
-    height: "16px",
-  },
-  AlertDescriptionText: {
-    margin: "0",
-    marginBottom: "var(--sl-spacing-small)",
-  },
-  ErrorAlertContainer: {
-    "&::part(base)": {
-      backgroundColor: "var(--sl-color-red-100)",
-      borderTop: "none",
-    },
-    "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
-    },
-  },
-  WarningAlertContainer: {
-    "&::part(base)": {
-      backgroundColor: "var(--sl-color-yellow-100)",
-      borderTop: "none",
-    },
-    "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
-    },
-  },
-  InfoAlertContainer: {
-    "&::part(base)": {
-      backgroundColor: "var(--sl-color-sky-100)",
-      borderTop: "none",
-    },
-    "& sl-icon::part(base)": {
-      color: "var(--sl-color-blue-500)",
-    },
-  },
-  Dialog: {
-    "&::part(panel)": {
-      height: "600px",
-    },
-    "&::part(close-button)": {
-      marginBottom: "var(--sl-spacing-xx-large)",
-    },
-    "&::part(title)": {
-      display: "none",
-    },
-    "&::part(header)": {},
-    "&::part(body)": { padding: "0" },
-    "&::part(footer)": {},
-  },
-};
-const sheet$3 = JSS.createStyleSheet(style$3);
-const styleString$3 = sheet$3.toString();
-function PayoutStatusAlertView(props) {
-  var _a, _b, _c, _d, _e;
-  const { text, states, data, callbacks } = props;
-  if (states.loading) {
-    return index.h("sl-skeleton", { class: sheet$3.classes.SkeletonOne });
-  }
-  if (states.status === "DONE") {
-    return index.h("div", null);
-  }
-  function getAlert(status) {
-    if (states.error)
-      return {
-        header: text.errorHeader,
-        description: text.errorDescription,
-        buttonText: null,
-        alertType: "critical",
-        icon: "exclamation-triangle",
-        class: sheet$3.classes.ErrorAlertContainer,
-      };
-    switch (status) {
-      case "INFORMATION_REQUIRED":
-        return {
-          header: text.informationRequiredHeader,
-          description: text.informationRequiredDescription,
-          buttonText: text.informationRequiredButtonText,
-          alertType: "info",
-          icon: "info-circle",
-          class: sheet$3.classes.InfoAlertContainer,
-        };
-      case "VERIFICATION_NEEDED":
-        return {
-          header: text.verificationRequiredHeader,
-          description: text.verificationRequiredDescription,
-          buttonText: text.verificationRequiredButtonText,
-          alertType: "warning",
-          icon: "exclamation-triangle",
-          class: sheet$3.classes.WarningAlertContainer,
-        };
-      case "HOLD":
-        return {
-          header: text.holdHeader,
-          description: text.holdDescription,
-          buttonText: null,
-          alertType: "warning",
-          icon: "exclamation-triangle",
-          class: sheet$3.classes.WarningAlertContainer,
-        };
-      default:
-        return;
-    }
-  }
-  //AL: TODO hookup ID
-  function getButton(status) {
-    switch (status) {
-      case "INFORMATION_REQUIRED":
-        return data.type === "SquatchJS2" ? (index.h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.informationRequiredButtonText, "scroll-animation": "smooth" })) : data.type === "SquatchPortal" ? (index.h("sl-button", { type: "default", onClick: callbacks.onTermsClick }, text.informationRequiredButtonText)) : (index.h("sl-button", { type: "default" }, text.informationRequiredButtonText));
-      case "VERIFICATION_NEEDED":
-        return (index.h("sl-button", { type: "default", loading: states.loading, 
-          //AL: TODO callback to open verification form
-          onClick: () => callbacks.onClick }, text.verificationRequiredButtonText));
-      default:
-        return;
-    }
-  }
-  return (index.h("div", { part: "sqm-base" },
-    index.h("style", { type: "text/css" }, styleString$3),
-    index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: (_a = getAlert(states.status)) === null || _a === void 0 ? void 0 : _a.alertType, class: (_b = getAlert(states.status)) === null || _b === void 0 ? void 0 : _b.class, open: true },
-      index.h("sl-icon", { slot: "icon", name: (_c = getAlert(states.status)) === null || _c === void 0 ? void 0 : _c.icon }),
-      index.h("strong", null, (_d = getAlert(states.status)) === null || _d === void 0 ? void 0 : _d.header),
-      index.h("p", { class: sheet$3.classes.AlertDescriptionText }, (_e = getAlert(states.status)) === null || _e === void 0 ? void 0 : _e.description),
-      getButton(states.status)),
-    index.h("sl-dialog", { noDismiss: true, class: sheet$3.classes.Dialog, open: states.showVerifyIdentity, "onSl-hide": callbacks.onCancel },
-      index.h("iframe", { 
-        // AL: TODO replace iframe URL with verification url when available
-        scrolling: "yes", frameBorder: "0", width: "100%", height: "100%", src: "https://impacttech.complytaxforms.com/ServiceRedirect.aspx?Language=eng&Param1=UxBORV4bOIrqNb4gbpNmtvW3wjdZJyx4gPElIGMJNR8=&UUID=B576EA3E-80FD-4D85-AA59-653D23A7CCE8" }))));
-}
-
-const PayoutStatusAlert = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * @uiName Info required alert header
-     */
-    this.informationRequiredHeader = "Payout and tax information required";
-    /**
-     * @uiName Info required alert description
-     */
-    this.informationRequiredDescription = "Submit your banking details and tax documents to receive your rewards.";
-    /**
-     * @uiName Info required alert button text
-     */
-    this.informationRequiredButtonText = "Payouts & Tax Settings";
-    /**
-     * @uiName Verification required alert header
-     */
-    this.verificationRequiredHeader = "Verify your identity";
-    /**
-     * @uiName Verification required alert description
-     */
-    this.verificationRequiredDescription = "Complete your verification to start receiving your cash rewards. It should only take a few minutes verify.";
-    /**
-     * @uiName Verification required alert button text
-     */
-    this.verificationRequiredButtonText = "Start Verification";
-    /**
-     * @uiName Payout on hold alert header
-     */
-    this.holdHeader = "Your payouts and account are on hold";
-    /**
-     * @uiName Payout on hold alert description
-     */
-    this.holdDescription = "Please check your inbox for an email from our referral provider, impact.com. It contains details on how to resolve this issue. If you need further assistance, feel free to reach out to {support email}.";
-    /**
-     * @uiName Cash & Payouts Terms and Conditions url
-     */
-    this.termsUrl = "https://terms.advocate.impact.com/PayoutTermsAndConditions.html";
-    /**
-     * @uiName Error header
-     */
-    this.errorHeader = "Could not determine payout status.";
-    /**
-     * @uiName Error description
-     */
-    this.errorDescription = "There was an error with determining your payout status.";
-    stencilHooks_module.h$1(this);
-  }
-  disconnectedCallback() { }
-  getTextProps() {
-    return utils.getProps(this);
-  }
-  render() {
-    const props = index_module.isDemo()
-      ? useDemoPayoutStatusAlert(this)
-      : usePayoutStatus.usePayoutStatus(this);
-    console.log({ props });
-    return index.h(PayoutStatusAlertView, Object.assign({}, props));
-  }
-};
-function useDemoPayoutStatusAlert(props) {
-  return cjs.cjs({
-    states: {
-      error: false,
-      status: "INFORMATION_REQUIRED",
-      loading: false,
-      showVerifyIdentity: false,
-    },
-    data: { type: "SquatchAdmin" },
-    text: props.getTextProps(),
-    callbacks: {
-      onTermsClick: () => { },
-      onClick: () => console.log("show"),
-      onCancel: () => console.log("hide"),
-    },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}
-
 function usePortalChangePassword(props) {
   var _a, _b, _c, _d, _e, _f, _g;
   const [request, { loading, errors, data }] = index_module.ze();
@@ -2872,7 +2651,7 @@ const ProgramMenu = class {
   }
 };
 
-const style$4 = {
+const style$2 = {
   Container: {
     borderRadius: "var(--sl-border-radius-large)",
     color: "var(--sl-color-neutral-900)",
@@ -2900,15 +2679,15 @@ const style$4 = {
     },
   },
 };
-const sheet$4 = JSS.createStyleSheet(style$4);
-const styleString$4 = sheet$4.toString();
+const sheet$2 = JSS.createStyleSheet(style$2);
+const styleString$2 = sheet$2.toString();
 const vanillaStyle$1 = `
     :host{
       display: block;   
     }
   `;
 function ReferralCardView(props) {
-  return (index.h("div", { part: "sqm-base", class: sheet$4.classes.Container, style: {
+  return (index.h("div", { part: "sqm-base", class: sheet$2.classes.Container, style: {
       border: `${props.hideBorder ? "none" : "1px solid var(--sl-color-neutral-300)"}`,
       "padding-top": `var(--sl-spacing-${props.paddingTop})`,
       "padding-right": `var(--sl-spacing-${props.paddingRight})`,
@@ -2919,15 +2698,15 @@ function ReferralCardView(props) {
       margin: `${props.limitWidth ? "auto" : "none"}`,
     } },
     index.h("style", { type: "text/css" },
-      styleString$4,
+      styleString$2,
       vanillaStyle$1),
-    props.hasHeader && (index.h("div", { class: sheet$4.classes.EndContainer }, props.slots.header)),
-    index.h("div", { part: "sqm-column-container", class: sheet$4.classes.ColumnContainer, style: {
+    props.hasHeader && (index.h("div", { class: sheet$2.classes.EndContainer }, props.slots.header)),
+    index.h("div", { part: "sqm-column-container", class: sheet$2.classes.ColumnContainer, style: {
         alignItems: props.verticalAlignment,
       } },
       props.slots.left,
       props.slots.right),
-    props.hasFooter && (index.h("div", { class: sheet$4.classes.EndContainer }, props.slots.footer))));
+    props.hasFooter && (index.h("div", { class: sheet$2.classes.EndContainer }, props.slots.footer))));
 }
 
 const ReferralCard = class {
@@ -4153,6 +3932,106 @@ const SqmRouter = class {
 };
 SqmRouter.style = sqmRouterCss;
 
+const REVEAL_EVENT = "sq:reveal";
+function useScroll(props) {
+  const { scrollTagName, scrollId } = props;
+  async function scroll() {
+    const element = document === null || document === void 0 ? void 0 : document.querySelector(scrollTagName || `#${scrollId}`);
+    element.dispatchEvent(new CustomEvent(REVEAL_EVENT, {
+      detail: scrollTagName || `#${scrollId}`,
+      bubbles: true,
+      composed: true,
+    }));
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    element.scrollIntoView({ behavior: props.scrollAnimation });
+  }
+  return {
+    callbacks: { scroll },
+  };
+}
+
+const Scroll = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * @uiName Button type
+     * @uiType string
+     * @uiEnum ["default", "primary", "success", "neutral", "warning", "danger", "text"]
+     * @uiEnumNames ["Default", "Primary", "Success", "Neutral", "Warning", "Danger", "Text"]
+  
+     */
+    this.buttonType = "default";
+    /**
+     * @uiName Scroll animation style
+     * @uiType string
+     * @uiEnum ["smooth", "auto"]
+     * @uiEnumNames ["Smooth", "Auto"]
+     */
+    this.scrollAnimation = "smooth";
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    var _a;
+    const { callbacks } = useScroll(this);
+    const outlineColor = (_a = this.buttonType) !== null && _a !== void 0 ? _a : "primary";
+    const style = {
+      Button: {
+        "& .outline": {
+          "&::part(base)": {
+            color: "var(--sl-color-" + outlineColor + "-500)",
+            borderColor: "var(--sl-color-" + outlineColor + "-500)",
+            backgroundColor: "transparent",
+            "&:hover": {
+              color: "var(--sl-color-primary-text)",
+              backgroundColor: "var(--sl-color-" + outlineColor + "-500)",
+            },
+          },
+        },
+        "& .neutral": {
+          "&::part(base)": {
+            color: "var(--sl-color-primary-text)",
+            background: "var(--sl-color-neutral-500)",
+            "&:hover": {
+              opacity: "0.8",
+            },
+          },
+        },
+        "& .mobile": {
+          "@media (max-width: 499px)": {
+            width: "100%",
+          },
+        },
+      },
+    };
+    const sheet = JSS.createStyleSheet(style);
+    const styleString = sheet.toString();
+    const vanillaStyle = `
+		:host{
+			display: contents;
+		}
+		${this.mobile &&
+      `
+		@media only screen and (max-width: 499px) {
+			:host {
+				display: block;
+				width: 100%;
+			}
+		}
+	  `}
+	`;
+    let classStack = "";
+    if (this.outline && this.buttonType != "default")
+      classStack += "outline ";
+    if (this.buttonType === "neutral")
+      classStack += "neutral ";
+    if (this.mobile)
+      classStack += "mobile ";
+    return (index.h("div", { class: sheet.classes.Button }, index.h("style", { type: "text/css" }, vanillaStyle, styleString), index.h("sl-button", { type: this.buttonType, onClick: callbacks.scroll, size: this.size, pill: this.pill, circle: this.circle, class: classStack }, (this.iconSlot || this.iconName) && (index.h("sl-icon", { slot: this.iconSlot || "prefix", name: this.iconName })), this.buttonText, index.h("slot", null))));
+  }
+};
+
 const sqmShareButtonCss = ":host{display:block}:host([hidden]){display:none}sl-button{display:block}";
 
 const ShareButton = class {
@@ -4650,7 +4529,7 @@ const Gift = () => (index.h("svg", { width: "24", height: "24", viewBox: "0 0 24
 const Circle = () => (index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   index.h("circle", { cx: "12", cy: "12", r: "9", fill: "currentColor", stroke: "currentColor", "stroke-width": "2" })));
 
-const style$5 = {
+const style$3 = {
   TimelineReward: {
     color: "var(--sl-color-neutral-900)",
     lineHeight: "var(--sl-line-height-dense)",
@@ -4693,8 +4572,8 @@ const style$5 = {
     },
   },
 };
-const sheet$5 = JSS.createStyleSheet(style$5);
-const styleString$5 = sheet$5.toString();
+const sheet$3 = JSS.createStyleSheet(style$3);
+const styleString$3 = sheet$3.toString();
 const vanillaStyle$2 = `
 	:host{
 		display: block; 
@@ -4707,9 +4586,9 @@ const vanillaStyle$2 = `
 function TimelineEntryView(props) {
   var _a;
   const timeline_icon = (_a = props.icon) !== null && _a !== void 0 ? _a : props.iconState;
-  return (index.h("div", { class: sheet$5.classes.TimelineReward, part: "sqm-base" },
+  return (index.h("div", { class: sheet$3.classes.TimelineReward, part: "sqm-base" },
     index.h("style", { type: "text/css" },
-      styleString$5,
+      styleString$3,
       vanillaStyle$2),
     index.h("div", { class: "container", part: "sqm-entry-container" },
       index.h("div", { class: "line" }, "/"),
@@ -4815,10 +4694,9 @@ exports.sqm_image = Image;
 exports.sqm_input_field = InputField;
 exports.sqm_leaderboard = Leaderboard;
 exports.sqm_link_button = LinkButton;
+exports.sqm_marketing_emails_checkbox = MarketingEmailsCheckbox;
 exports.sqm_name_fields = NameFields;
 exports.sqm_navigation_menu = NavigationMenu;
-exports.sqm_payout_button_scroll = PayoutButtonScroll;
-exports.sqm_payout_status_alert = PayoutStatusAlert;
 exports.sqm_portal_change_password = PortalChangePassword;
 exports.sqm_portal_footer = PortalFooter;
 exports.sqm_portal_frame = PortalFrame;
@@ -4831,6 +4709,7 @@ exports.sqm_referral_card = ReferralCard;
 exports.sqm_referral_iframe = SqmReferralIframe;
 exports.sqm_reward_exchange_list = SqmRewardExchangeList;
 exports.sqm_router = SqmRouter;
+exports.sqm_scroll = Scroll;
 exports.sqm_share_button = ShareButton;
 exports.sqm_share_code = ShareCode;
 exports.sqm_share_link = ShareLink;