@saasquatch/mint-components 2.1.9-8 → 2.1.9

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

@@ -1,107 +0,0 @@
-'use strict';
-
-const index = require('./index-8277cbb3.js');
-const JSS = require('./JSS-8503a151.js');
-
-const style = {
-  Dialog: {
-    "&::part(panel)": {
-      maxWidth: "480px",
-    },
-    "&::part(title)": {
-      fontSize: "var(--sl-font-size-x-large)",
-      fontWeight: "600",
-      padding: "var(--sl-spacing-x-large) var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
-    },
-    "&::part(body)": {
-      padding: "0 var(--sl-spacing-x-large)",
-      fontSize: "var(--sl-font-size-small)",
-      overflow: "visible",
-    },
-    "&::part(footer)": {
-      display: "flex",
-      flexDirection: "column",
-      gap: "var(--sl-spacing-small)",
-    },
-    "&::part(overlay)": {
-      background: "rgba(0, 0, 0, 0.5)",
-    },
-    "&::part(close-button)": {
-      display: "none",
-    },
-  },
-  FormFields: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "var(--sl-spacing-medium)",
-    marginTop: "var(--sl-spacing-medium)",
-    "& > *": {
-      flex: 1,
-    },
-  },
-  ErrorMessage: {
-    color: "var(--sqm-danger-color-text, #d32f2f)",
-    fontSize: "var(--sl-font-size-small)",
-    marginTop: "var(--sl-spacing-x-small)",
-  },
-  SearchInput: {
-    "&::part(base)": {
-      border: "none",
-      borderBottom: "1px solid var(--sl-color-neutral-300)",
-      borderRadius: "0",
-    },
-  },
-  DescriptionContainer: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "var(--sl-spacing-medium)",
-    marginTop: "var(--sl-spacing-small)",
-    "& > p": {
-      margin: "0",
-    },
-  },
-};
-function PartnerInfoModalView(props) {
-  var _a, _b;
-  const { states, callbacks, text } = props;
-  const sheet = JSS.createStyleSheet(style);
-  const styleString = sheet.toString();
-  console.log(states, "partner info modal states"); // TEMP
-  if (!states.open)
-    return index.h("div", null);
-  const description = states.isExistingPartner ? (index.h("div", { class: sheet.classes.DescriptionContainer },
-    index.h("p", null, text.descriptionExistingPartner),
-    index.h("p", null, text.supportDescriptionExistingPartner))) : (index.h("p", null,
-    " ",
-    text.descriptionNewPartner));
-  const buttonLabel = states.isExistingPartner
-    ? text.confirmButtonLabel
-    : text.submitButtonLabel;
-  return (index.h("sl-dialog", { class: sheet.classes.Dialog, open: states.open, noHeader: false, label: states.isExistingPartner
-      ? text.modalHeaderExistingPartner
-      : text.modalHeader, "onSl-request-close": (e) => {
-      e.preventDefault();
-    }, "onSl-hide": (e) => {
-      var _a;
-      // Prevent closing when clicking outside the dialog but not dropdowns
-      if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.tagName) === "SL-DIALOG") {
-        e.preventDefault();
-      }
-    } },
-    index.h("style", { type: "text/css" }, styleString),
-    description,
-    index.h("div", { class: sheet.classes.FormFields },
-      index.h("sl-select", { key: `country-${states.countryCode}`, exportparts: "label: input-label, base: input-base", label: text.countryLabel, value: states.countryCode, disabled: states.submitting || !!states.isExistingPartner, required: 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);
-          } }), (_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", { key: `currency-${states.currency}`, exportparts: "label: input-label, base: input-base", label: text.currencyLabel, value: states.currency, disabled: states.submitting || !!states.isExistingPartner, required: 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); } }), (_b = states.filteredCurrencies) === null || _b === void 0 ? void 0 :
-        _b.map((c) => (index.h("sl-menu-item", { value: c.currencyCode }, c.currencyCode))))),
-    states.error && index.h("p", { class: sheet.classes.ErrorMessage }, states.error),
-    index.h("sl-button", { slot: "footer", type: "primary", loading: states.submitting, disabled: states.submitting || !states.countryCode || !states.currency, onClick: callbacks.onSubmit, style: { width: "100%" }, exportparts: "base: primarybutton-base" }, buttonLabel)));
-}
-
-exports.PartnerInfoModalView = PartnerInfoModalView;

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

@@ -1,145 +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),
-  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.",
-  countryLabel: "Country",
-  currencyLabel: "Currency",
-  submitButtonLabel: "Submit",
-  confirmButtonLabel: "Confirm",
-  searchCountryPlaceholder: "Search for a country",
-  searchCurrencyPlaceholder: "Search for a currency",
-};
-const defaultProps = {
-  states: {
-    open: true,
-    loading: false,
-    submitting: false,
-    isExistingPartner: false,
-    countryCode: "",
-    currency: "",
-    error: "",
-    success: false,
-    brandName: "Test Brand",
-    filteredCountries: demoCountries,
-    filteredCurrencies: demoCurrencies,
-  },
-  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 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 FullStackDemo = () => {
-  return (h("sqm-partner-info-modal", { "brand-name": "Acme", "header-new-partner": "Welcome to {brandName} Program!", "description-new-partner": "We just need a bit more information about you before you start earning cash!", "submit-button-label": "Submit" }));
-};

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

@@ -1,102 +0,0 @@
-import { h } from "@stencil/core";
-import { createStyleSheet } from "../../styling/JSS";
-const style = {
-  Dialog: {
-    "&::part(panel)": {
-      maxWidth: "480px",
-    },
-    "&::part(title)": {
-      fontSize: "var(--sl-font-size-x-large)",
-      fontWeight: "600",
-      padding: "var(--sl-spacing-x-large) var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
-    },
-    "&::part(body)": {
-      padding: "0 var(--sl-spacing-x-large)",
-      fontSize: "var(--sl-font-size-small)",
-      overflow: "visible",
-    },
-    "&::part(footer)": {
-      display: "flex",
-      flexDirection: "column",
-      gap: "var(--sl-spacing-small)",
-    },
-    "&::part(overlay)": {
-      background: "rgba(0, 0, 0, 0.5)",
-    },
-    "&::part(close-button)": {
-      display: "none",
-    },
-  },
-  FormFields: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "var(--sl-spacing-medium)",
-    marginTop: "var(--sl-spacing-medium)",
-    "& > *": {
-      flex: 1,
-    },
-  },
-  ErrorMessage: {
-    color: "var(--sqm-danger-color-text, #d32f2f)",
-    fontSize: "var(--sl-font-size-small)",
-    marginTop: "var(--sl-spacing-x-small)",
-  },
-  SearchInput: {
-    "&::part(base)": {
-      border: "none",
-      borderBottom: "1px solid var(--sl-color-neutral-300)",
-      borderRadius: "0",
-    },
-  },
-  DescriptionContainer: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "var(--sl-spacing-medium)",
-    marginTop: "var(--sl-spacing-small)",
-    "& > p": {
-      margin: "0",
-    },
-  },
-};
-export function PartnerInfoModalView(props) {
-  var _a, _b;
-  const { states, callbacks, text } = props;
-  const sheet = createStyleSheet(style);
-  const styleString = sheet.toString();
-  console.log(states, "partner info modal states"); // TEMP
-  if (!states.open)
-    return h("div", null);
-  const description = states.isExistingPartner ? (h("div", { class: sheet.classes.DescriptionContainer },
-    h("p", null, text.descriptionExistingPartner),
-    h("p", null, text.supportDescriptionExistingPartner))) : (h("p", null,
-    " ",
-    text.descriptionNewPartner));
-  const buttonLabel = states.isExistingPartner
-    ? text.confirmButtonLabel
-    : text.submitButtonLabel;
-  return (h("sl-dialog", { class: sheet.classes.Dialog, open: states.open, noHeader: false, label: states.isExistingPartner
-      ? text.modalHeaderExistingPartner
-      : text.modalHeader, "onSl-request-close": (e) => {
-      e.preventDefault();
-    }, "onSl-hide": (e) => {
-      var _a;
-      // Prevent closing when clicking outside the dialog but not dropdowns
-      if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.tagName) === "SL-DIALOG") {
-        e.preventDefault();
-      }
-    } },
-    h("style", { type: "text/css" }, styleString),
-    description,
-    h("div", { class: sheet.classes.FormFields },
-      h("sl-select", { key: `country-${states.countryCode}`, exportparts: "label: input-label, base: input-base", label: text.countryLabel, value: states.countryCode, disabled: states.submitting || !!states.isExistingPartner, required: 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);
-          } }), (_a = states.filteredCountries) === null || _a === void 0 ? void 0 :
-        _a.map((c) => (h("sl-menu-item", { value: c.countryCode }, c.displayName)))),
-      h("sl-select", { key: `currency-${states.currency}`, exportparts: "label: input-label, base: input-base", label: text.currencyLabel, value: states.currency, disabled: states.submitting || !!states.isExistingPartner, required: 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); } }), (_b = states.filteredCurrencies) === null || _b === void 0 ? void 0 :
-        _b.map((c) => (h("sl-menu-item", { value: c.currencyCode }, c.currencyCode))))),
-    states.error && h("p", { class: sheet.classes.ErrorMessage }, states.error),
-    h("sl-button", { slot: "footer", type: "primary", loading: states.submitting, disabled: states.submitting || !states.countryCode || !states.currency, onClick: callbacks.onSubmit, style: { width: "100%" }, exportparts: "base: primarybutton-base" }, buttonLabel)));
-}