@saasquatch/mint-components 2.1.10-57 → 2.1.11-0

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

@@ -0,0 +1,150 @@
+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.",
+  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: "",
+    currency: "",
+    error: "",
+    success: false,
+    brandName: "Test Brand",
+    filteredCountries: demoCountries,
+    filteredCurrencies: demoCurrencies,
+    allowBankingCollection: false,
+    checkboxError: "",
+    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 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));
+};

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

@@ -0,0 +1,129 @@
+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: {
+    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)",
+    margin: "0",
+    "& > p": {
+      margin: "0",
+    },
+  },
+  CheckboxWrapper: {
+    display: "flex",
+    justifyContent: "flex-start",
+    flexDirection: "column",
+  },
+  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 description = states.isExistingPartner ? (h("span", { class: sheet.classes.DescriptionContainer },
+    h("p", null, text.descriptionExistingPartner),
+    h("p", null, text.supportDescriptionExistingPartner))) : (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", label: text.countryLabel, value: states.countryCode, disabled: states.submitting || !!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);
+          } }), (_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.isExistingPartner, 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); } }), (_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", { checked: states.allowBankingCollection === true, "onSl-change": callbacks.onCheckboxChange, disabled: states.submitting, required: true, value: states.allowBankingCollection, id: "allowBankingCollection", name: "/allowBankingCollection" }, bankingCollectionText),
+        states.checkboxError && (h("p", { class: sheet.classes.ErrorMessage }, states.checkboxError)))),
+    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 ||
+        !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)))));
+}