@saasquatch/mint-components 1.14.6-2 → 1.14.6-21

package/dist/esm/sqm-lead-input-field-view-9b23f22c.js

@@ -0,0 +1,49 @@
+import { h } from './index-91e7729f.js';
+import { i as intl } from './global-be1f9992.js';
+import { j as jss, a as create } from './JSS-67b5cff8.js';
+import { E as ErrorStyles } from './mixins-83f90fa1.js';
+
+const style = {
+  ErrorStyle: ErrorStyles,
+  FieldContainer: {
+    "margin-bottom": "var(--sl-spacing-large)",
+  },
+};
+const vanillaStyle = `
+:host {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+`;
+jss.setup(create());
+const sheet = jss.createStyleSheet(style);
+const styleString = sheet.toString();
+function LeadInputFieldView(props) {
+  var _a, _b, _c, _d, _e, _f;
+  const { states, content } = props;
+  const getRequiredFieldErrorMessage = ({ fieldLabel, }) => intl.formatMessage({
+    id: `requiredFieldErrorMessage-${fieldLabel}`,
+    defaultMessage: content.requiredFieldErrorMessage,
+  }, {
+    fieldLabel,
+  });
+  return (h("div", { part: "sqm-base" },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.fieldName}`, type: content.fieldType, label: content.fieldLabel }, (!content.fieldOptional ? { required: true } : []), { disabled: ((_a = states.leadFormState) === null || _a === void 0 ? void 0 : _a.loading) || ((_b = states.leadFormState) === null || _b === void 0 ? void 0 : _b.disabled), validationError: ({ value }) => {
+        if (!value) {
+          return getRequiredFieldErrorMessage({
+            fieldLabel: content.fieldLabel,
+          });
+        }
+      } }, (((_d = (_c = states.leadFormState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d[content.fieldName]) ? {
+      class: sheet.classes.ErrorStyle,
+      helpText: ((_f = (_e = states.leadFormState) === null || _e === void 0 ? void 0 : _e.validationErrors) === null || _f === void 0 ? void 0 : _f[content.fieldName]) ||
+        content.requiredFieldErrorMessage,
+    }
+      : [])))));
+}
+
+export { LeadInputFieldView as L };

package/dist/esm/sqm-lead-input-field.entry.js

@@ -0,0 +1,80 @@
+import { r as registerInstance, h as h$1 } from './index-91e7729f.js';
+import { i as d, n as h } from './stencil-hooks.module-4bc38af4.js';
+import './global-be1f9992.js';
+import { i as isDemo } from './index.module-89a79f66.js';
+import { c as cjs } from './cjs-bdfb4486.js';
+import { g as getProps, a as getMissingProps } from './utils-334c1e34.js';
+import './JSS-67b5cff8.js';
+import './mixins-83f90fa1.js';
+import { L as LEAD_FORM_STATE_CONTEXT, R as RequiredPropsError } from './useLeadFormState-9016d812.js';
+import { L as LeadInputFieldView } from './sqm-lead-input-field-view-9b23f22c.js';
+
+function useLeadInputField() {
+  const leadFormState = d(LEAD_FORM_STATE_CONTEXT);
+  return {
+    states: {
+      leadFormState,
+    },
+  };
+}
+
+const LeadInputField = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * @uiName Input type
+     * @uiType string
+     * @uiEnum ["text", "date", "tel"]
+     * @uiEnumNames ["Text", "Date", "Phone Number"]
+     */
+    this.fieldType = "text";
+    /**
+     * The message to be displayed when a required field is not filled.
+     *
+     * @uiName Required field message
+     * @uiWidget textArea
+     */
+    this.requiredFieldErrorMessage = "Please enter a {fieldLabel}";
+    /**
+     * @uiName Optional
+     * @default
+     */
+    this.fieldOptional = false;
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const content = {
+      ...getProps(this),
+    };
+    const missingProps = getMissingProps([
+      {
+        attribute: "field-name",
+        value: this.fieldName,
+      },
+    ]);
+    if (!isDemo() && missingProps) {
+      return (h$1(RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this form", subheading: "A technical problem prevented this input field from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" }));
+    }
+    const { states } = isDemo()
+      ? useLeadInputFieldDemo(this)
+      : useLeadInputField();
+    return (h$1(LeadInputFieldView, { states: states, content: content }));
+  }
+};
+function useLeadInputFieldDemo(props) {
+  return cjs({
+    states: {
+      leadForState: {},
+    },
+    content: {
+      fieldName: props.fieldName,
+      fieldLabel: props.fieldLabel,
+      fieldType: props.fieldType,
+      requiredFieldErrorMessage: props.requiredFieldErrorMessage,
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
+export { LeadInputField as sqm_lead_input_field };

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

@@ -16,6 +16,7 @@ import { A as AssetCardView } from './sqm-asset-card-view-fe5db3c0.js';
 import { C as CloseButtonView } from './sqm-close-button-view-f9819751.js';
 import './index-ffa26b43.js';
 import { E as EmailRegistrationView } from './email-registration-view-a7818cf2.js';
+import { L as LeadDropdownFieldView } from './sqm-lead-dropdown-field-view-62e74a36.js';
 import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-753c8d4a.js';
 import { L as LogoutCurrentUserView } from './sqm-logout-current-user-view-8ef8180f.js';
 import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-9d802b78.js';
@@ -31,9 +32,10 @@ import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-5
 import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-b12cb894.js';
 import './ErrorView-48e2b969.js';
 import { Q as QrCodeView } from './sqm-qr-code-view-f1d0763b.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 PortalRegisterView, C as ChangeMarktingView, T as TaskCardView, f as ProgressBarView, g as PoweredByImg$1, h as PortalFooterView, H as HeroView, R as ReferralIframeView, N as NameFieldsView, i 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 LeadFormView, Q as autoColorScaleCss, U as ShadowViewAddon } from './ShadowViewAddon-aa7177fe.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 PortalRegisterView, C as ChangeMarktingView, T as TaskCardView, f as ProgressBarView, g as PoweredByImg$1, h as PortalFooterView, H as HeroView, R as ReferralIframeView, N as NameFieldsView, i 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 LeadFormView, Q as autoColorScaleCss, U as ShadowViewAddon } from './ShadowViewAddon-b360202a.js';
 import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-1683ae32.js';
 import { O as OtherRegionSlotView, I as InvoiceTableView, T as TaxForm } from './sqm-invoice-table-view-7f376a75.js';
+import { L as LeadInputFieldView } from './sqm-lead-input-field-view-9b23f22c.js';
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -15832,6 +15834,7 @@ const LeadForm_stories = {
 };
 const defaultProps$t = {
   states: {
+    success: false,
     leadFormState: {},
     error: "",
     loading: false,
@@ -15840,80 +15843,67 @@ const defaultProps$t = {
   callbacks: {
     submit: () => console.log("Submit!"),
     inputFunction: () => { },
+    resetForm: () => { },
   },
   refs: {
     formRef: {},
   },
   content: {
+    submitLabel: "Submit",
     pageLabel: "Submit your information",
+    resubmitFormLabel: "Refer Another Friend",
     requiredFieldErrorMessage: "Cannot be empty",
     invalidEmailErrorMessage: "Must be a valid email address",
+    submitSuccessHeader: "Referral submitted",
+    submitSuccessDescription: "Our team will contact your friend to see if they’re a good fit. In the meantime, you can track this referral on Activity page.",
+    submitErrorHeader: "An error occurred while submitting",
+    submitErrorDescription: "Please try again later. If the problem continues, contact Support",
   },
 };
-const errorProps$c = {
+const successProps$5 = {
+  ...defaultProps$t,
   states: {
-    error: "Something went wrong. Please try again.",
-    leadFormState: {},
-    loading: false,
-    referralCode: "ABC123",
-  },
-  callbacks: {
-    submit: () => console.log("Submit!"),
-    inputFunction: () => { },
-  },
-  refs: {
-    formRef: {},
+    ...defaultProps$t.states,
+    success: true,
+    error: null,
   },
   content: {
-    pageLabel: "Submit your information",
-    requiredFieldErrorMessage: "Cannot be empty",
-    invalidEmailErrorMessage: "Must be a valid email address",
+    ...defaultProps$t.content,
+    pageLabel: "Refer your friend",
+  },
+};
+const errorProps$c = {
+  ...defaultProps$t,
+  states: {
+    ...defaultProps$t.states,
+    error: "Something went wrong. Please try again.",
+    leadFormState: {
+      validationErrors: {
+        firstName: "Please enter a first name",
+        lastName: "Please enter a last name",
+        email: "Please enter a valid email",
+      },
+    },
   },
 };
 const loadingProps$9 = {
+  ...defaultProps$t,
   states: {
-    leadFormState: {},
-    error: "",
+    ...defaultProps$t.states,
     loading: true,
-    referralCode: "ABC123",
-  },
-  callbacks: {
-    submit: () => console.log("Submit!"),
-    inputFunction: () => { },
-  },
-  refs: {
-    formRef: {},
-  },
-  content: {
-    pageLabel: "Submit your information",
-    requiredFieldErrorMessage: "Cannot be empty",
-    invalidEmailErrorMessage: "Must be a valid email address",
   },
 };
 const slottedProps$2 = {
-  states: {
-    leadFormState: {},
-    error: "",
-    loading: false,
-    referralCode: "ABC123",
-  },
-  callbacks: {
-    submit: () => console.log("Submit!"),
-    inputFunction: () => { },
-  },
-  refs: {
-    formRef: {},
-  },
+  ...defaultProps$t,
   content: {
-    pageLabel: "Submit your information",
-    requiredFieldErrorMessage: "Cannot be empty",
-    invalidEmailErrorMessage: "Must be a valid email address",
+    ...defaultProps$t.content,
     formData: (h("div", null,
       h("sl-input", { style: { marginBottom: "var(--sl-spacing-x-large)" }, exportparts: "label: input-label, base: input-base", label: "Slotted Input", required: true }),
       h("sl-input", { exportparts: "label: input-label, base: input-base", label: "Slotted Input 2", required: true }))),
   },
 };
 const Default$r = () => h(LeadFormView, Object.assign({}, defaultProps$t));
+const LeadSubmitSuccess = () => h(LeadFormView, Object.assign({}, successProps$5));
 const LeadSubmitWithError = () => h(LeadFormView, Object.assign({}, errorProps$c));
 const LeadSubmitLoading = () => h(LeadFormView, Object.assign({}, loadingProps$9));
 const FieldsHidden$2 = () => {
@@ -15921,6 +15911,7 @@ const FieldsHidden$2 = () => {
       states: {
         leadFormState: {},
         error: "",
+        success: false,
         loading: true,
         referralCode: "ABC123",
       },
@@ -15932,12 +15923,137 @@ const LeadForm = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': LeadForm_stories,
   Default: Default$r,
+  LeadSubmitSuccess: LeadSubmitSuccess,
   LeadSubmitWithError: LeadSubmitWithError,
   LeadSubmitLoading: LeadSubmitLoading,
   FieldsHidden: FieldsHidden$2,
   SlottedInputs: SlottedInputs$2
 });
 
+const LeadInputField_stories = {
+  title: "Components/Lead Form Input Field",
+};
+const defaultProps$u = {
+  states: {
+    leadFormState: {
+      validationErrors: {},
+      loading: false,
+      disabled: false,
+      initialData: {},
+    },
+  },
+  content: {
+    fieldName: "firstName",
+    fieldLabel: "First Name",
+    fieldType: "text",
+    requiredFieldErrorMessage: "Please {fieldAction} a {fieldLabel}",
+    fieldOptional: false,
+  },
+};
+const Default$s = () => h(LeadInputFieldView, Object.assign({}, defaultProps$u));
+const WithError = () => (h(LeadInputFieldView, Object.assign({}, defaultProps$u, { states: {
+    ...defaultProps$u.states,
+    leadFormState: {
+      ...defaultProps$u.states.leadFormState,
+      validationErrors: {
+        firstName: "Please enter a first name",
+      },
+    },
+  } })));
+const Disabled$2 = () => (h(LeadInputFieldView, Object.assign({}, defaultProps$u, { states: {
+    ...defaultProps$u.states,
+    leadFormState: {
+      ...defaultProps$u.states.leadFormState,
+      disabled: true,
+    },
+  } })));
+const WithInitialValue = () => (h(LeadInputFieldView, Object.assign({}, defaultProps$u, { states: {
+    ...defaultProps$u.states,
+    leadFormState: {
+      ...defaultProps$u.states.leadFormState,
+      initialData: {
+        firstName: "Jane",
+      },
+    },
+  } })));
+
+const LeadInputField = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': LeadInputField_stories,
+  Default: Default$s,
+  WithError: WithError,
+  Disabled: Disabled$2,
+  WithInitialValue: WithInitialValue
+});
+
+const LeadFormDropdownField_stories = {
+  title: "Components/Lead Form Dropdown Field",
+};
+const defaultProps$v = {
+  states: {
+    leadFormState: {
+      validationErrors: {},
+      loading: false,
+      disabled: false,
+      initialData: {},
+    },
+  },
+  content: {
+    dropdownName: "country",
+    dropdownLabel: "Country",
+    requiredFieldErrorMessage: "Please select a country",
+    dropdownOptional: false,
+    selectOptions: [
+      h("sl-menu-item", { value: "red" }, "Canada"),
+      h("sl-menu-item", { value: "blue" }, "United States"),
+      h("sl-menu-item", { value: "green" }, "Mexico"),
+    ],
+  },
+};
+const Default$t = () => h(LeadDropdownFieldView, Object.assign({}, defaultProps$v));
+const WithError$1 = () => (h(LeadDropdownFieldView, Object.assign({}, defaultProps$v, { states: {
+    ...defaultProps$v.states,
+    leadFormState: {
+      ...defaultProps$v.states.leadFormState,
+      validationErrors: {
+        country: "Please select a country",
+      },
+    },
+  } })));
+const Disabled$3 = () => (h(LeadDropdownFieldView, Object.assign({}, defaultProps$v, { states: {
+    ...defaultProps$v.states,
+    leadFormState: {
+      ...defaultProps$v.states.leadFormState,
+      disabled: true,
+    },
+  } })));
+const Loading$d = () => (h(LeadDropdownFieldView, Object.assign({}, defaultProps$v, { states: {
+    ...defaultProps$v.states,
+    leadFormState: {
+      ...defaultProps$v.states.leadFormState,
+      loading: true,
+    },
+  } })));
+const WithInitialValue$1 = () => (h(LeadDropdownFieldView, Object.assign({}, defaultProps$v, { states: {
+    ...defaultProps$v.states,
+    leadFormState: {
+      ...defaultProps$v.states.leadFormState,
+      initialData: {
+        country: "Canada",
+      },
+    },
+  } })));
+
+const LeadFormDropdownField = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': LeadFormDropdownField_stories,
+  Default: Default$t,
+  WithError: WithError$1,
+  Disabled: Disabled$3,
+  Loading: Loading$d,
+  WithInitialValue: WithInitialValue$1
+});
+
 /**
  *
  * Themes
@@ -15950,7 +16066,7 @@ const LeadForm = /*#__PURE__*/Object.freeze({
  *
  */
 //
-const Default$s = `
+const Default$u = `
  // No CSS
 `;
 const Orangey = `
@@ -15984,7 +16100,7 @@ const Klip = `
 
 const Themes = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  Default: Default$s,
+  Default: Default$u,
   Orangey: Orangey,
   Netflix: Netflix,
   SaaSquatchCorporate: SaaSquatchCorporate,
@@ -18676,6 +18792,8 @@ const stories = [
   PayoutStatusAlert,
   QRCode,
   LeadForm,
+  LeadInputField,
+  LeadFormDropdownField,
 ];
 const StencilStorybook = class {
   constructor(hostRef) {

package/dist/esm/useLeadFormState-9016d812.js

@@ -0,0 +1,68 @@
+import { h } from './index-91e7729f.js';
+import { k as useState, y } from './stencil-hooks.module-4bc38af4.js';
+import { i as intl } from './global-be1f9992.js';
+import { _ } from './index.module-89a79f66.js';
+import { c as createStyleSheet } from './JSS-67b5cff8.js';
+
+const style = {
+  IconStyle: {
+    display: "block",
+    position: "absolute",
+    top: "23px",
+  },
+  DivStyle: {
+    marginLeft: "28px",
+  },
+  Details: {
+    marginLeft: "28px",
+  },
+  Heading: {
+    display: "inline-block",
+  },
+  Children: {
+    display: "none",
+  },
+};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+function RequiredPropsError({ missingProps, heading = "There was a problem loading this section", subheading = "There was a technical problem that prevented this section from loading. Please contact us with the link to this page.", description = "Error occured while loading <{tagName}>. Values for the following attributes are missing:", }, children) {
+  if (!missingProps)
+    return false;
+  const host = _();
+  const [detailsOpen, setDetailsOpen] = useState(false);
+  return (h("sl-alert", { type: "danger", open: true },
+    h("style", { type: "text/css" }, styleString),
+    h("div", { slot: "icon", class: sheet.classes.IconStyle },
+      h("sl-icon", { name: "exclamation-octagon" })),
+    h("div", { class: sheet.classes.DivStyle },
+      h("h2", { class: sheet.classes.Heading }, intl.formatMessage({
+        id: `error-heading`,
+        defaultMessage: heading,
+      })),
+      h("p", null, intl.formatMessage({
+        id: `error-subheading`,
+        defaultMessage: subheading,
+      }))),
+    h("details", { class: sheet.classes.Details },
+      h("summary", { onClick: () => setDetailsOpen(!detailsOpen) },
+        detailsOpen ? "Less" : "More",
+        " details"),
+      h("p", null, intl.formatMessage({
+        id: `error-description`,
+        defaultMessage: description,
+      }, { tagName: host.tagName.toLowerCase() })),
+      h("ul", null, missingProps.map((prop) => (h("li", null,
+        h("strong", null, prop.attribute)))))),
+    h("div", { class: sheet.classes.Children }, children)));
+}
+
+const LEAD_FORM_STATE_CONTEXT = "sq:lead-form-state";
+const LEAD_FORM_STATE_CONTEXT_INTERNAL = "sq:lead-form-state-internal";
+function useLeadFormState(formState) {
+  const host = _();
+  const [leadFormState, setLeadFormState] = y(host, LEAD_FORM_STATE_CONTEXT, formState);
+  y(host, LEAD_FORM_STATE_CONTEXT_INTERNAL, [leadFormState, setLeadFormState]);
+  return { leadFormState, setLeadFormState };
+}
+
+export { LEAD_FORM_STATE_CONTEXT as L, RequiredPropsError as R, useLeadFormState as u };