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

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

@@ -0,0 +1,78 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-a29c60ef.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+require('./global-e31dc4f5.js');
+const index_module = require('./index.module-ee84433d.js');
+const cjs = require('./cjs-1066ec21.js');
+const utils = require('./utils-6847bc06.js');
+require('./JSS-8503a151.js');
+require('./mixins-f7e0377a.js');
+const useLeadFormState = require('./useLeadFormState-c83d2034.js');
+const sqmLeadInputFieldView = require('./sqm-lead-input-field-view-6344cd93.js');
+
+function useLeadInputField() {
+  const leadFormState = stencilHooks_module.d(useLeadFormState.LEAD_FORM_STATE_CONTEXT);
+  return {
+    states: {
+      leadFormState,
+    },
+  };
+}
+
+const LeadInputField = class {
+  constructor(hostRef) {
+    index.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 {fieldName}";
+    /**
+     * @uiName Optional
+     * @default
+     */
+    this.fieldOptional = false;
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const content = {
+      ...utils.getProps(this),
+    };
+    const missingProps = utils.getMissingProps([
+      {
+        attribute: "field-name",
+        value: this.fieldName,
+      },
+    ]);
+    if (!index_module.isDemo() && missingProps) {
+      return (index.h(useLeadFormState.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 } = index_module.isDemo()
+      ? useLeadInputFieldDemo(this)
+      : useLeadInputField();
+    return (index.h(sqmLeadInputFieldView.LeadInputFieldView, { states: states, content: content }));
+  }
+};
+function useLeadInputFieldDemo(props) {
+  return cjs.cjs({
+    states: {
+      leadForState: {},
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
+exports.sqm_lead_input_field = LeadInputField;

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

@@ -20,6 +20,7 @@ const sqmAssetCardView = require('./sqm-asset-card-view-21ddf04f.js');
 const sqmCloseButtonView = require('./sqm-close-button-view-ea3fa23b.js');
 require('./index-8c6255f5.js');
 const emailRegistrationView = require('./email-registration-view-55b378dc.js');
+const sqmLeadDropdownFieldView = require('./sqm-lead-dropdown-field-view-03a3e03f.js');
 const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-d39a55d8.js');
 const sqmLogoutCurrentUserView = require('./sqm-logout-current-user-view-11d57c12.js');
 const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-17111896.js');
@@ -35,9 +36,10 @@ const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-fe6
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-7b678f34.js');
 require('./ErrorView-b2fcf954.js');
 const sqmQrCodeView = require('./sqm-qr-code-view-15dfc0b6.js');
-const ShadowViewAddon = require('./ShadowViewAddon-c0a5fdf8.js');
+const ShadowViewAddon = require('./ShadowViewAddon-40f0bc74.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-4f15143a.js');
 const sqmInvoiceTableView = require('./sqm-invoice-table-view-0f7fa309.js');
+const sqmLeadInputFieldView = require('./sqm-lead-input-field-view-6344cd93.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -15836,6 +15838,7 @@ const LeadForm_stories = {
 };
 const defaultProps$t = {
   states: {
+    success: false,
     leadFormState: {},
     error: "",
     loading: false,
@@ -15849,75 +15852,61 @@ const defaultProps$t = {
     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: (index.h("div", null,
       index.h("sl-input", { style: { marginBottom: "var(--sl-spacing-x-large)" }, exportparts: "label: input-label, base: input-base", label: "Slotted Input", required: true }),
       index.h("sl-input", { exportparts: "label: input-label, base: input-base", label: "Slotted Input 2", required: true }))),
   },
 };
 const Default$r = () => index.h(ShadowViewAddon.LeadFormView, Object.assign({}, defaultProps$t));
+const LeadSubmitSuccess = () => index.h(ShadowViewAddon.LeadFormView, Object.assign({}, successProps$5));
 const LeadSubmitWithError = () => index.h(ShadowViewAddon.LeadFormView, Object.assign({}, errorProps$c));
 const LeadSubmitLoading = () => index.h(ShadowViewAddon.LeadFormView, Object.assign({}, loadingProps$9));
 const FieldsHidden$2 = () => {
@@ -15925,6 +15914,7 @@ const FieldsHidden$2 = () => {
       states: {
         leadFormState: {},
         error: "",
+        success: false,
         loading: true,
         referralCode: "ABC123",
       },
@@ -15936,12 +15926,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 = () => index.h(sqmLeadInputFieldView.LeadInputFieldView, Object.assign({}, defaultProps$u));
+const WithError = () => (index.h(sqmLeadInputFieldView.LeadInputFieldView, Object.assign({}, defaultProps$u, { states: {
+    ...defaultProps$u.states,
+    leadFormState: {
+      ...defaultProps$u.states.leadFormState,
+      validationErrors: {
+        firstName: "Please enter a first name",
+      },
+    },
+  } })));
+const Disabled$2 = () => (index.h(sqmLeadInputFieldView.LeadInputFieldView, Object.assign({}, defaultProps$u, { states: {
+    ...defaultProps$u.states,
+    leadFormState: {
+      ...defaultProps$u.states.leadFormState,
+      disabled: true,
+    },
+  } })));
+const WithInitialValue = () => (index.h(sqmLeadInputFieldView.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: [
+      index.h("sl-menu-item", { value: "red" }, "Canada"),
+      index.h("sl-menu-item", { value: "blue" }, "United States"),
+      index.h("sl-menu-item", { value: "green" }, "Mexico"),
+    ],
+  },
+};
+const Default$t = () => index.h(sqmLeadDropdownFieldView.LeadDropdownFieldView, Object.assign({}, defaultProps$v));
+const WithError$1 = () => (index.h(sqmLeadDropdownFieldView.LeadDropdownFieldView, Object.assign({}, defaultProps$v, { states: {
+    ...defaultProps$v.states,
+    leadFormState: {
+      ...defaultProps$v.states.leadFormState,
+      validationErrors: {
+        country: "Please select a country",
+      },
+    },
+  } })));
+const Disabled$3 = () => (index.h(sqmLeadDropdownFieldView.LeadDropdownFieldView, Object.assign({}, defaultProps$v, { states: {
+    ...defaultProps$v.states,
+    leadFormState: {
+      ...defaultProps$v.states.leadFormState,
+      disabled: true,
+    },
+  } })));
+const Loading$d = () => (index.h(sqmLeadDropdownFieldView.LeadDropdownFieldView, Object.assign({}, defaultProps$v, { states: {
+    ...defaultProps$v.states,
+    leadFormState: {
+      ...defaultProps$v.states.leadFormState,
+      loading: true,
+    },
+  } })));
+const WithInitialValue$1 = () => (index.h(sqmLeadDropdownFieldView.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
@@ -15954,7 +16069,7 @@ const LeadForm = /*#__PURE__*/Object.freeze({
  *
  */
 //
-const Default$s = `
+const Default$u = `
  // No CSS
 `;
 const Orangey = `
@@ -15988,7 +16103,7 @@ const Klip = `
 
 const Themes = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  Default: Default$s,
+  Default: Default$u,
   Orangey: Orangey,
   Netflix: Netflix,
   SaaSquatchCorporate: SaaSquatchCorporate,
@@ -18680,6 +18795,8 @@ const stories = [
   PayoutStatusAlert,
   QRCode,
   LeadForm,
+  LeadInputField,
+  LeadFormDropdownField,
 ];
 const StencilStorybook = class {
   constructor(hostRef) {

package/dist/cjs/useLeadFormState-c83d2034.js

@@ -0,0 +1,72 @@
+'use strict';
+
+const index = require('./index-a29c60ef.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const global = require('./global-e31dc4f5.js');
+const index_module = require('./index.module-ee84433d.js');
+const JSS = require('./JSS-8503a151.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 = JSS.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 = index_module._();
+  const [detailsOpen, setDetailsOpen] = stencilHooks_module.useState(false);
+  return (index.h("sl-alert", { type: "danger", open: true },
+    index.h("style", { type: "text/css" }, styleString),
+    index.h("div", { slot: "icon", class: sheet.classes.IconStyle },
+      index.h("sl-icon", { name: "exclamation-octagon" })),
+    index.h("div", { class: sheet.classes.DivStyle },
+      index.h("h2", { class: sheet.classes.Heading }, global.intl.formatMessage({
+        id: `error-heading`,
+        defaultMessage: heading,
+      })),
+      index.h("p", null, global.intl.formatMessage({
+        id: `error-subheading`,
+        defaultMessage: subheading,
+      }))),
+    index.h("details", { class: sheet.classes.Details },
+      index.h("summary", { onClick: () => setDetailsOpen(!detailsOpen) },
+        detailsOpen ? "Less" : "More",
+        " details"),
+      index.h("p", null, global.intl.formatMessage({
+        id: `error-description`,
+        defaultMessage: description,
+      }, { tagName: host.tagName.toLowerCase() })),
+      index.h("ul", null, missingProps.map((prop) => (index.h("li", null,
+        index.h("strong", null, prop.attribute)))))),
+    index.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 = index_module._();
+  const [leadFormState, setLeadFormState] = stencilHooks_module.y(host, LEAD_FORM_STATE_CONTEXT, formState);
+  stencilHooks_module.y(host, LEAD_FORM_STATE_CONTEXT_INTERNAL, [leadFormState, setLeadFormState]);
+  return { leadFormState, setLeadFormState };
+}
+
+exports.LEAD_FORM_STATE_CONTEXT = LEAD_FORM_STATE_CONTEXT;
+exports.RequiredPropsError = RequiredPropsError;
+exports.useLeadFormState = useLeadFormState;

package/dist/collection/collection-manifest.json

@@ -42,7 +42,9 @@
     "./components/sqm-invoice-table/columns/sqm-invoice-table-data-column.js",
     "./components/sqm-invoice-table/columns/sqm-invoice-table-date-column.js",
     "./components/sqm-invoice-table/columns/sqm-invoice-table-download-column.js",
+    "./components/sqm-lead-form/sqm-lead-dropdown-field.js",
     "./components/sqm-lead-form/sqm-lead-form.js",
+    "./components/sqm-lead-form/sqm-lead-input-field.js",
     "./components/sqm-leaderboard/sqm-leaderboard.js",
     "./components/sqm-leaderboard-rank/sqm-leaderboard-rank.js",
     "./components/sqm-link-button/sqm-link-button.js",

package/dist/collection/components/sqm-lead-form/LeadForm.stories.js

@@ -5,6 +5,7 @@ export default {
 };
 const defaultProps = {
   states: {
+    success: false,
     leadFormState: {},
     error: "",
     loading: false,
@@ -18,75 +19,61 @@ const defaultProps = {
     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 = {
+const successProps = {
+  ...defaultProps,
   states: {
-    error: "Something went wrong. Please try again.",
-    leadFormState: {},
-    loading: false,
-    referralCode: "ABC123",
-  },
-  callbacks: {
-    submit: () => console.log("Submit!"),
-    inputFunction: () => { },
-  },
-  refs: {
-    formRef: {},
+    ...defaultProps.states,
+    success: true,
+    error: null,
   },
   content: {
-    pageLabel: "Submit your information",
-    requiredFieldErrorMessage: "Cannot be empty",
-    invalidEmailErrorMessage: "Must be a valid email address",
+    ...defaultProps.content,
+    pageLabel: "Refer your friend",
+  },
+};
+const errorProps = {
+  ...defaultProps,
+  states: {
+    ...defaultProps.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 = {
+  ...defaultProps,
   states: {
-    leadFormState: {},
-    error: "",
+    ...defaultProps.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 = {
-  states: {
-    leadFormState: {},
-    error: "",
-    loading: false,
-    referralCode: "ABC123",
-  },
-  callbacks: {
-    submit: () => console.log("Submit!"),
-    inputFunction: () => { },
-  },
-  refs: {
-    formRef: {},
-  },
+  ...defaultProps,
   content: {
-    pageLabel: "Submit your information",
-    requiredFieldErrorMessage: "Cannot be empty",
-    invalidEmailErrorMessage: "Must be a valid email address",
+    ...defaultProps.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 }))),
   },
 };
 export const Default = () => h(LeadFormView, Object.assign({}, defaultProps));
+export const LeadSubmitSuccess = () => h(LeadFormView, Object.assign({}, successProps));
 export const LeadSubmitWithError = () => h(LeadFormView, Object.assign({}, errorProps));
 export const LeadSubmitLoading = () => h(LeadFormView, Object.assign({}, loadingProps));
 export const FieldsHidden = () => {
@@ -94,6 +81,7 @@ export const FieldsHidden = () => {
       states: {
         leadFormState: {},
         error: "",
+        success: false,
         loading: true,
         referralCode: "ABC123",
       },

package/dist/collection/components/sqm-lead-form/LeadFormDropdownField.stories.js

@@ -0,0 +1,59 @@
+import { h } from "@stencil/core";
+import { LeadDropdownFieldView, } from "./sqm-lead-dropdown-field-view";
+export default {
+  title: "Components/Lead Form Dropdown Field",
+};
+const defaultProps = {
+  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"),
+    ],
+  },
+};
+export const Default = () => h(LeadDropdownFieldView, Object.assign({}, defaultProps));
+export const WithError = () => (h(LeadDropdownFieldView, Object.assign({}, defaultProps, { states: {
+    ...defaultProps.states,
+    leadFormState: {
+      ...defaultProps.states.leadFormState,
+      validationErrors: {
+        country: "Please select a country",
+      },
+    },
+  } })));
+export const Disabled = () => (h(LeadDropdownFieldView, Object.assign({}, defaultProps, { states: {
+    ...defaultProps.states,
+    leadFormState: {
+      ...defaultProps.states.leadFormState,
+      disabled: true,
+    },
+  } })));
+export const Loading = () => (h(LeadDropdownFieldView, Object.assign({}, defaultProps, { states: {
+    ...defaultProps.states,
+    leadFormState: {
+      ...defaultProps.states.leadFormState,
+      loading: true,
+    },
+  } })));
+export const WithInitialValue = () => (h(LeadDropdownFieldView, Object.assign({}, defaultProps, { states: {
+    ...defaultProps.states,
+    leadFormState: {
+      ...defaultProps.states.leadFormState,
+      initialData: {
+        country: "Canada",
+      },
+    },
+  } })));