@saasquatch/mint-components 2.2.0-7 → 2.2.0

package/dist/cjs/sqm-partner-info-modal-view-97770d03.js

@@ -1,149 +0,0 @@
-'use strict';
-
-const index = require('./index-8277cbb3.js');
-const global = require('./global-b7b1b8fe.js');
-const JSS = require('./JSS-8503a151.js');
-
-const style = {
-  Dialog: {
-    "&::part(panel)": {
-      maxWidth: "480px",
-    },
-    "&::part(body)": {
-      padding: "0 var(--sl-spacing-x-large)",
-      fontSize: "var(--sl-font-size-small)",
-      overflow: "visible",
-    },
-    "&::part(overlay)": {
-      background: "var(--sl-overlay-background-color)",
-    },
-  },
-  DialogTitle: {
-    fontSize: "var(--sl-font-size-x-large)",
-    fontWeight: "600",
-    padding: "var(--sl-spacing-large) 0 0 0",
-    margin: "0",
-  },
-  FormFields: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "var(--sl-spacing-medium)",
-    marginTop: "var(--sl-spacing-large)",
-  },
-  ErrorMessage: {
-    marginTop: "var(--sl-spacing-x-small)",
-  },
-  SearchInput: {
-    "&::part(base)": {
-      border: "none",
-      borderBottom: "1px solid var(--sl-color-neutral-300)",
-      borderRadius: "0",
-    },
-  },
-  SelectMenu: {
-    maxHeight: "300px",
-  },
-  DescriptionContainer: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "var(--sl-spacing-medium)",
-    margin: "0",
-    "& > p": {
-      margin: "0",
-    },
-  },
-  CheckboxWrapper: {
-    display: "flex",
-    justifyContent: "flex-start",
-    flexDirection: "column",
-  },
-  Checkbox: {
-    "&::part(label)": {
-      fontSize: "var(--sl-font-size-small)",
-    },
-  },
-  SubmitButton: {
-    width: "100%",
-    marginTop: "var(--sl-spacing-large)",
-  },
-};
-function PartnerInfoModalContentView(props) {
-  var _a, _b;
-  const { states, callbacks, text } = props;
-  const sheet = JSS.createStyleSheet(style);
-  const styleString = sheet.toString();
-  const supportMessage = global.intl.formatMessage({
-    id: "supportDescriptionExistingPartner",
-    defaultMessage: text.supportDescriptionExistingPartner,
-  }, {
-    supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
-  });
-  const description = states.isExistingPartner ? (index.h("span", { class: sheet.classes.DescriptionContainer },
-    index.h("p", null, text.descriptionExistingPartner),
-    index.h("p", null, supportMessage))) : (index.h("p", { class: sheet.classes.DescriptionContainer }, text.descriptionNewPartner));
-  const buttonLabel = states.isExistingPartner
-    ? text.confirmButtonLabel
-    : text.submitButtonLabel;
-  const bankingCollectionText = global.intl.formatMessage({
-    id: "bankingCollectionText",
-    defaultMessage: text.allowBankingCollection,
-  }, {
-    termsAndConditionsLink: (index.h("a", { href: text.termsAndConditionsLink, target: "_blank" }, text.termsAndConditionsLabel)),
-  });
-  return (index.h("div", null,
-    index.h("style", { type: "text/css" },
-      " ",
-      styleString),
-    index.h("div", { class: sheet.classes.FormFields },
-      description,
-      index.h("sl-select", { exportparts: "label: input-label, base: input-base, menu: select-menu", label: text.countryLabel, value: states.countryCode, disabled: states.submitting ||
-          (!!states.countryCode && states.isExistingPartner), required: true, hoist: true, "onSl-select": callbacks.onCountryChange },
-        index.h("sl-input", { class: sheet.classes.SearchInput, placeholder: text.searchCountryPlaceholder, onKeyDown: (e) => e.stopPropagation(), "onSl-input": (e) => {
-            var _a;
-            callbacks.setCountrySearch((_a = e.target) === null || _a === void 0 ? void 0 : _a.value);
-          } }),
-        index.h("div", { class: sheet.classes.SelectMenu }, (_a = states.filteredCountries) === null || _a === void 0 ? void 0 : _a.map((c) => (index.h("sl-menu-item", { value: c.countryCode }, c.displayName))))),
-      index.h("sl-select", { exportparts: "label: input-label, base: input-base", label: text.currencyLabel, value: states.currency, disabled: states.submitting || !!states.currency, required: true, hoist: true, "onSl-select": callbacks.onCurrencyChange },
-        index.h("sl-input", { class: sheet.classes.SearchInput, placeholder: text.searchCurrencyPlaceholder, onKeyDown: (e) => e.stopPropagation(), "onSl-input": (e) => { var _a; return callbacks.setCurrencySearch((_a = e.target) === null || _a === void 0 ? void 0 : _a.value); } }),
-        index.h("div", { class: sheet.classes.SelectMenu }, (_b = states.filteredCurrencies) === null || _b === void 0 ? void 0 : _b.map((c) => (index.h("sl-menu-item", { value: c.currencyCode },
-          c.currencyCode,
-          " - ",
-          c.displayName))))),
-      index.h("div", { class: sheet.classes.CheckboxWrapper },
-        index.h("sl-checkbox", { class: sheet.classes.Checkbox, checked: states.allowBankingCollection === true, "onSl-change": callbacks.onCheckboxChange, disabled: states.submitting, required: true, value: states.allowBankingCollection, id: "allowBankingCollection", name: "/allowBankingCollection" }, bankingCollectionText))),
-    states.error && (index.h("div", { class: sheet.classes.ErrorMessage },
-      index.h("sqm-form-message", { class: sheet.classes.ErrorMessage, type: "error" },
-        index.h("p", { part: "alert-description" }, states.error)))),
-    index.h("sl-button", { slot: "footer", type: "primary", loading: states.submitting, disabled: states.submitting ||
-        !states.countryCode ||
-        !states.currency ||
-        !states.allowBankingCollection, onClick: callbacks.onSubmit, class: sheet.classes.SubmitButton, exportparts: "base: primarybutton-base" }, buttonLabel)));
-}
-function PartnerInfoModalView(props) {
-  const { states, text, callbacks } = props;
-  const sheet = JSS.createStyleSheet(style);
-  const styleString = sheet.toString();
-  if (!states.open)
-    return index.h("div", null);
-  return (index.h("div", null,
-    index.h("style", { type: "text/css" },
-      " ",
-      styleString),
-    index.h("sl-dialog", { class: sheet.classes.Dialog, open: states.open, noHeader: true, label: states.isExistingPartner
-        ? text.modalHeaderExistingPartner
-        : text.modalHeader, "onSl-request-close": (e) => {
-        e.preventDefault();
-      }, "onSl-hide": (e) => {
-        var _a;
-        if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.tagName) === "SL-DIALOG") {
-          e.preventDefault();
-        }
-      } },
-      index.h("h2", { class: sheet.classes.DialogTitle }, states.isExistingPartner
-        ? text.modalHeaderExistingPartner
-        : text.modalHeader),
-      index.h(PartnerInfoModalContentView, Object.assign({}, props)))));
-}
-
-exports.PartnerInfoModalContentView = PartnerInfoModalContentView;
-exports.PartnerInfoModalView = PartnerInfoModalView;

package/dist/cjs/utils-15ce04e3.js

@@ -1,93 +0,0 @@
-'use strict';
-
-const index = require('./index-8277cbb3.js');
-const global = require('./global-b7b1b8fe.js');
-const JSS = require('./JSS-8503a151.js');
-
-const style = {
-  Container: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "35px",
-  },
-  HeaderContainer: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "10px",
-  },
-};
-const sheet = JSS.createStyleSheet(style);
-const styleString = sheet.toString();
-const LoadingView = () => {
-  return (index.h("div", { class: sheet.classes.Container },
-    index.h("style", { type: "text/css" }, styleString),
-    index.h("sqm-skeleton", { width: "45%", height: "40px !important" }),
-    index.h("div", { class: sheet.classes.HeaderContainer },
-      index.h("sqm-skeleton", { width: "15%" }),
-      index.h("sqm-skeleton", { width: "25%", height: "30px !important" })),
-    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
-    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
-    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
-    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
-    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
-    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
-    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
-    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
-    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
-    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
-    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
-    index.h("sqm-skeleton", { width: "15%" }),
-    index.h("sqm-skeleton", { width: "80px", height: "30px !important" })));
-};
-
-function validTaxDocument(requiredType) {
-  const validTypes = ["W9", "W8BENE", "W8BEN"];
-  if (validTypes.includes(requiredType))
-    return true;
-  return false;
-}
-const objectIsFull = (obj) => {
-  return !Object.keys(obj).find((k) => obj[k] == undefined);
-};
-const taxTypeToName = (taxType) => {
-  switch (taxType) {
-    case "W9":
-      return "W-9";
-    case "W8BEN":
-    case "W8BENE":
-      return "W-8";
-    default:
-      return "";
-  }
-};
-function validateBillingField(regex, value) {
-  const trimmed = value.trim();
-  const idx = trimmed.search(regex);
-  return idx > -1;
-}
-const formatErrorMessage = (fieldName, errorMessage) => {
-  return global.intl.formatMessage({
-    id: fieldName,
-    defaultMessage: errorMessage,
-  }, {
-    fieldName,
-  });
-};
-function getCountryObj({ countryCode, locale, }) {
-  // @ts-ignore DisplayNames not in Intl type
-  const displayName = new Intl.DisplayNames([locale], {
-    type: "region",
-  }).of(countryCode);
-  return {
-    countryCode,
-    displayName,
-  };
-}
-
-exports.LoadingView = LoadingView;
-exports.formatErrorMessage = formatErrorMessage;
-exports.getCountryObj = getCountryObj;
-exports.objectIsFull = objectIsFull;
-exports.taxTypeToName = taxTypeToName;
-exports.validTaxDocument = validTaxDocument;
-exports.validateBillingField = validateBillingField;

package/dist/collection/components/sqm-partner-info-modal/PartnerInfoModal.stories.js

@@ -1,171 +0,0 @@
-import { h } from "@stencil/core";
-import { PartnerInfoModalView, } from "./sqm-partner-info-modal-view";
-export default {
-  title: "Components/Partner Info Modal",
-};
-const demoCountries = [
-  { countryCode: "US", displayName: "United States" },
-  { countryCode: "CA", displayName: "Canada" },
-  { countryCode: "GB", displayName: "United Kingdom" },
-  { countryCode: "AU", displayName: "Australia" },
-  { countryCode: "DE", displayName: "Germany" },
-  { countryCode: "FR", displayName: "France" },
-  { countryCode: "JP", displayName: "Japan" },
-];
-const demoCurrencies = [
-  { currencyCode: "USD", displayName: "US Dollar" },
-  { currencyCode: "CAD", displayName: "Canadian Dollar" },
-  { currencyCode: "GBP", displayName: "British Pound" },
-  { currencyCode: "EUR", displayName: "Euro" },
-  { currencyCode: "AUD", displayName: "Australian Dollar" },
-];
-const noopCallbacks = {
-  onCountryChange: (e) => console.log("Country changed:", e),
-  onCurrencyChange: (e) => console.log("Currency changed:", e),
-  onCheckboxChange: (e) => console.log("Checkbox changed:", e),
-  setCountrySearch: (v) => console.log("Country search:", v),
-  setCurrencySearch: (v) => console.log("Currency search:", v),
-  onSubmit: () => console.log("Submit"),
-  onClose: () => console.log("Close"),
-};
-const defaultText = {
-  modalHeader: "Let's get you ready for rewards",
-  modalHeaderExistingPartner: "We found an existing account",
-  descriptionNewPartner: "Confirm your country and currency now to get your future rewards faster.",
-  descriptionExistingPartner: "We noticed you are already an Impact.com partner, please confirm your information.",
-  supportDescriptionExistingPartner: "If this is a mistake, please contact Support or sign up for this referral program with a different email.",
-  supportLink: "Support",
-  countryLabel: "Country",
-  currencyLabel: "Currency",
-  submitButtonLabel: "Submit",
-  confirmButtonLabel: "Confirm",
-  searchCountryPlaceholder: "Search for a country",
-  searchCurrencyPlaceholder: "Search for a currency",
-  bankingCollectionText: "",
-  allowBankingCollection: "I have read the {termsAndConditionsLink} and allow impact.com to collect my tax and banking information",
-  termsAndConditionsLabel: "terms and conditions",
-  termsAndConditionsLink: "https://terms.advocate.impact.com/PayoutTermsAndConditions.html",
-};
-const defaultProps = {
-  states: {
-    open: true,
-    loading: false,
-    submitting: false,
-    isExistingPartner: false,
-    countryCode: null,
-    currency: null,
-    error: "",
-    success: false,
-    filteredCountries: demoCountries,
-    filteredCurrencies: demoCurrencies,
-    allowBankingCollection: false,
-    disabled: false,
-  },
-  callbacks: noopCallbacks,
-  text: defaultText,
-};
-export const NewPartnerEmpty = () => {
-  return h(PartnerInfoModalView, Object.assign({}, defaultProps));
-};
-export const NewPartnerPrefilled = () => {
-  const props = {
-    ...defaultProps,
-    states: {
-      ...defaultProps.states,
-      countryCode: "US",
-      currency: "",
-    },
-  };
-  return h(PartnerInfoModalView, Object.assign({}, props));
-};
-export const NewPartnerFullySelected = () => {
-  const props = {
-    ...defaultProps,
-    states: {
-      ...defaultProps.states,
-      countryCode: "US",
-      currency: "USD",
-    },
-  };
-  return h(PartnerInfoModalView, Object.assign({}, props));
-};
-export const ExistingPartnerConfirm = () => {
-  const props = {
-    ...defaultProps,
-    states: {
-      ...defaultProps.states,
-      isExistingPartner: true,
-      countryCode: "CA",
-      currency: "CAD",
-    },
-  };
-  return h(PartnerInfoModalView, Object.assign({}, props));
-};
-export const ExistingPartnerEmpty = () => {
-  const props = {
-    ...defaultProps,
-    states: {
-      ...defaultProps.states,
-      isExistingPartner: true,
-      countryCode: "",
-      currency: "",
-    },
-  };
-  return h(PartnerInfoModalView, Object.assign({}, props));
-};
-export const Submitting = () => {
-  const props = {
-    ...defaultProps,
-    states: {
-      ...defaultProps.states,
-      countryCode: "GB",
-      currency: "GBP",
-      submitting: true,
-    },
-  };
-  return h(PartnerInfoModalView, Object.assign({}, props));
-};
-export const WithError = () => {
-  const props = {
-    ...defaultProps,
-    states: {
-      ...defaultProps.states,
-      countryCode: "US",
-      currency: "USD",
-      error: "An error occurred while creating your partner account. Please try again.",
-    },
-  };
-  return h(PartnerInfoModalView, Object.assign({}, props));
-};
-export const ValidationError = () => {
-  const props = {
-    ...defaultProps,
-    states: {
-      ...defaultProps.states,
-      countryCode: "",
-      currency: "",
-      error: "Please select both a country and currency.",
-    },
-  };
-  return h(PartnerInfoModalView, Object.assign({}, props));
-};
-export const Closed = () => {
-  const props = {
-    ...defaultProps,
-    states: {
-      ...defaultProps.states,
-      open: false,
-    },
-  };
-  return h(PartnerInfoModalView, Object.assign({}, props));
-};
-export const SQMComponentExistingPartner = () => {
-  return (h("sqm-partner-info-modal", { "support-link": "Support", "support-description-existing-partner": "If this is a mistake, please contact {supportLink} or sign up for this referral program with a different email.", "allow-banking-collection": "I have read the {termsAndConditionsLink} and allow impact.com to collect my tax and banking information", "terms-and-conditions-label": "terms and conditions", "terms-and-conditions-link": "https://terms.advocate.impact.com/PayoutTermsAndConditions.html", demoData: {
-      states: { open: true, isExistingPartner: true },
-    } }));
-};
-export const SQMComponentNewPartner = () => {
-  return (h("sqm-partner-info-modal", { demoData: {
-      states: { open: true, isExistingPartner: false },
-    } }));
-};

package/dist/collection/components/sqm-partner-info-modal/sqm-partner-info-modal-view.js

@@ -1,143 +0,0 @@
-import { h } from "@stencil/core";
-import { createStyleSheet } from "../../styling/JSS";
-import { intl } from "../../global/global";
-const style = {
-  Dialog: {
-    "&::part(panel)": {
-      maxWidth: "480px",
-    },
-    "&::part(body)": {
-      padding: "0 var(--sl-spacing-x-large)",
-      fontSize: "var(--sl-font-size-small)",
-      overflow: "visible",
-    },
-    "&::part(overlay)": {
-      background: "var(--sl-overlay-background-color)",
-    },
-  },
-  DialogTitle: {
-    fontSize: "var(--sl-font-size-x-large)",
-    fontWeight: "600",
-    padding: "var(--sl-spacing-large) 0 0 0",
-    margin: "0",
-  },
-  FormFields: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "var(--sl-spacing-medium)",
-    marginTop: "var(--sl-spacing-large)",
-  },
-  ErrorMessage: {
-    marginTop: "var(--sl-spacing-x-small)",
-  },
-  SearchInput: {
-    "&::part(base)": {
-      border: "none",
-      borderBottom: "1px solid var(--sl-color-neutral-300)",
-      borderRadius: "0",
-    },
-  },
-  SelectMenu: {
-    maxHeight: "300px",
-  },
-  DescriptionContainer: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "var(--sl-spacing-medium)",
-    margin: "0",
-    "& > p": {
-      margin: "0",
-    },
-  },
-  CheckboxWrapper: {
-    display: "flex",
-    justifyContent: "flex-start",
-    flexDirection: "column",
-  },
-  Checkbox: {
-    "&::part(label)": {
-      fontSize: "var(--sl-font-size-small)",
-    },
-  },
-  SubmitButton: {
-    width: "100%",
-    marginTop: "var(--sl-spacing-large)",
-  },
-};
-export function PartnerInfoModalContentView(props) {
-  var _a, _b;
-  const { states, callbacks, text } = props;
-  const sheet = createStyleSheet(style);
-  const styleString = sheet.toString();
-  const supportMessage = intl.formatMessage({
-    id: "supportDescriptionExistingPartner",
-    defaultMessage: text.supportDescriptionExistingPartner,
-  }, {
-    supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
-  });
-  const description = states.isExistingPartner ? (h("span", { class: sheet.classes.DescriptionContainer },
-    h("p", null, text.descriptionExistingPartner),
-    h("p", null, supportMessage))) : (h("p", { class: sheet.classes.DescriptionContainer }, text.descriptionNewPartner));
-  const buttonLabel = states.isExistingPartner
-    ? text.confirmButtonLabel
-    : text.submitButtonLabel;
-  const bankingCollectionText = intl.formatMessage({
-    id: "bankingCollectionText",
-    defaultMessage: text.allowBankingCollection,
-  }, {
-    termsAndConditionsLink: (h("a", { href: text.termsAndConditionsLink, target: "_blank" }, text.termsAndConditionsLabel)),
-  });
-  return (h("div", null,
-    h("style", { type: "text/css" },
-      " ",
-      styleString),
-    h("div", { class: sheet.classes.FormFields },
-      description,
-      h("sl-select", { exportparts: "label: input-label, base: input-base, menu: select-menu", label: text.countryLabel, value: states.countryCode, disabled: states.submitting ||
-          (!!states.countryCode && states.isExistingPartner), required: true, hoist: true, "onSl-select": callbacks.onCountryChange },
-        h("sl-input", { class: sheet.classes.SearchInput, placeholder: text.searchCountryPlaceholder, onKeyDown: (e) => e.stopPropagation(), "onSl-input": (e) => {
-            var _a;
-            callbacks.setCountrySearch((_a = e.target) === null || _a === void 0 ? void 0 : _a.value);
-          } }),
-        h("div", { class: sheet.classes.SelectMenu }, (_a = states.filteredCountries) === null || _a === void 0 ? void 0 : _a.map((c) => (h("sl-menu-item", { value: c.countryCode }, c.displayName))))),
-      h("sl-select", { exportparts: "label: input-label, base: input-base", label: text.currencyLabel, value: states.currency, disabled: states.submitting || !!states.currency, required: true, hoist: true, "onSl-select": callbacks.onCurrencyChange },
-        h("sl-input", { class: sheet.classes.SearchInput, placeholder: text.searchCurrencyPlaceholder, onKeyDown: (e) => e.stopPropagation(), "onSl-input": (e) => { var _a; return callbacks.setCurrencySearch((_a = e.target) === null || _a === void 0 ? void 0 : _a.value); } }),
-        h("div", { class: sheet.classes.SelectMenu }, (_b = states.filteredCurrencies) === null || _b === void 0 ? void 0 : _b.map((c) => (h("sl-menu-item", { value: c.currencyCode },
-          c.currencyCode,
-          " - ",
-          c.displayName))))),
-      h("div", { class: sheet.classes.CheckboxWrapper },
-        h("sl-checkbox", { class: sheet.classes.Checkbox, checked: states.allowBankingCollection === true, "onSl-change": callbacks.onCheckboxChange, disabled: states.submitting, required: true, value: states.allowBankingCollection, id: "allowBankingCollection", name: "/allowBankingCollection" }, bankingCollectionText))),
-    states.error && (h("div", { class: sheet.classes.ErrorMessage },
-      h("sqm-form-message", { class: sheet.classes.ErrorMessage, type: "error" },
-        h("p", { part: "alert-description" }, states.error)))),
-    h("sl-button", { slot: "footer", type: "primary", loading: states.submitting, disabled: states.submitting ||
-        !states.countryCode ||
-        !states.currency ||
-        !states.allowBankingCollection, onClick: callbacks.onSubmit, class: sheet.classes.SubmitButton, exportparts: "base: primarybutton-base" }, buttonLabel)));
-}
-export function PartnerInfoModalView(props) {
-  const { states, text, callbacks } = props;
-  const sheet = createStyleSheet(style);
-  const styleString = sheet.toString();
-  if (!states.open)
-    return h("div", null);
-  return (h("div", null,
-    h("style", { type: "text/css" },
-      " ",
-      styleString),
-    h("sl-dialog", { class: sheet.classes.Dialog, open: states.open, noHeader: true, label: states.isExistingPartner
-        ? text.modalHeaderExistingPartner
-        : text.modalHeader, "onSl-request-close": (e) => {
-        e.preventDefault();
-      }, "onSl-hide": (e) => {
-        var _a;
-        if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.tagName) === "SL-DIALOG") {
-          e.preventDefault();
-        }
-      } },
-      h("h2", { class: sheet.classes.DialogTitle }, states.isExistingPartner
-        ? text.modalHeaderExistingPartner
-        : text.modalHeader),
-      h(PartnerInfoModalContentView, Object.assign({}, props)))));
-}