@saasquatch/mint-components 2.1.7 → 2.1.8-1

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

@@ -0,0 +1,90 @@
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+import { intl } from "../../global/global";
+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: "var(--sl-spacing-small) var(--sl-spacing-x-large)",
+      fontSize: "var(--sl-font-size-small)",
+      overflow: "visible",
+    },
+    "&::part(footer)": {
+      display: "flex",
+      flexDirection: "column",
+      gap: "var(--sl-spacing-small)",
+      padding: "var(--sl-spacing-small) var(--sl-spacing-x-large) var(--sl-spacing-x-large)",
+    },
+    "&::part(overlay)": {
+      background: "rgba(0, 0, 0, 0.5)",
+    },
+    "&::part(close-button)": {
+      display: "none",
+    },
+  },
+  FormFields: {
+    display: "flex",
+    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",
+    },
+  },
+};
+export function PartnerInfoModalView(props) {
+  var _a, _b;
+  const { states, callbacks, text } = props;
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  const description = states.isExistingPartner
+    ? text.descriptionExistingPartner
+    : text.descriptionNewPartner;
+  const buttonLabel = states.isExistingPartner
+    ? text.confirmButtonLabel
+    : text.submitButtonLabel;
+  return (h("sl-dialog", { class: sheet.classes.Dialog, open: states.open, noHeader: false, label: intl.formatMessage({
+      id: "modalBrandHeader",
+      defaultMessage: text.modalBrandHeader,
+    }, { brandName: states.brandName }), "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),
+    h("p", null, description),
+    h("div", { class: sheet.classes.FormFields },
+      h("sl-select", { exportparts: "label: input-label, base: input-base", label: text.countryLabel, value: states.countryCode, disabled: states.submitting, 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; return callbacks.onCountrySearch(((_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, 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.onCurrencySearch(((_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))))),
+    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)));
+}

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

@@ -0,0 +1,462 @@
+import { isDemo } from "@saasquatch/component-boilerplate";
+import { useState, withHooks } from "@saasquatch/stencil-hooks";
+import { Component, Prop, h } from "@stencil/core";
+import deepmerge from "deepmerge";
+import { getProps } from "../../utils/utils";
+import { PartnerInfoModalView, } from "./sqm-partner-info-modal-view";
+import { usePartnerInfoModal } from "./usePartnerInfoModal";
+/**
+ * @uiName Partner Info Modal
+ * @exampleGroup Tax and Cash
+ * @validParents ["sqm-portal-container", "sqm-portal-frame", "div", "sqb-program-section", "sqb-conditional-section"]
+ * @example Partner Info Modal - <sqm-partner-info-modal></sqm-partner-info-modal>
+ */
+export class PartnerInfoModal {
+  constructor() {
+    /**
+     * Brand name shown in the modal header
+     *
+     * @uiName Brand name
+     */
+    this.brandName = "";
+    /**
+     * Header text when user has no existing partner
+     *
+     * @uiName New partner header
+     * @uiWidget textArea
+     */
+    this.modalBrandHeader = "Welcome to {brandName} Program!";
+    /**
+     * Description for new partner setup
+     *
+     * @uiName New partner description
+     * @uiWidget textArea
+     */
+    this.descriptionNewPartner = "We just need a bit more information about you before you start earning cash!";
+    /**
+     * Description for existing partner confirmation
+     *
+     * @uiName Existing partner description
+     * @uiWidget textArea
+     */
+    this.descriptionExistingPartner = "We noticed you are already an Impact.com partner, please confirm your information.";
+    /**
+     * @uiName Country label
+     */
+    this.countryLabel = "Country";
+    /**
+     * @uiName Currency label
+     */
+    this.currencyLabel = "Currency";
+    /**
+     * @uiName Submit button label
+     */
+    this.submitButtonLabel = "Submit";
+    /**
+     * @uiName Confirm button label
+     */
+    this.confirmButtonLabel = "Confirm";
+    /**
+     * @uiName Search country placeholder
+     */
+    this.searchCountryPlaceholder = "Search for a country";
+    /**
+     * @uiName Search currency placeholder
+     */
+    this.searchCurrencyPlaceholder = "Search for a currency";
+    /**
+     * @uiName Network error text
+     * @uiWidget textArea
+     */
+    this.networkErrorText = "An error occurred. Please try again.";
+    /**
+     * @uiName Missing fields error text
+     * @uiWidget textArea
+     */
+    this.missingFieldsErrorText = "Please select both a country and currency.";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  getTextProps() {
+    return getProps(this);
+  }
+  render() {
+    // AL: TODO add usePartnerInfoModal
+    const props = isDemo()
+      ? useDemoPartnerInfoModal(this)
+      : usePartnerInfoModal(this);
+    return h(PartnerInfoModalView, Object.assign({}, props));
+  }
+  static get is() { return "sqm-partner-info-modal"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "brandName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Brand name",
+            "name": "uiName"
+          }],
+        "text": "Brand name shown in the modal header"
+      },
+      "attribute": "brand-name",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "modalBrandHeader": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "New partner header",
+            "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
+          }],
+        "text": "Header text when user has no existing partner"
+      },
+      "attribute": "modal-brand-header",
+      "reflect": false,
+      "defaultValue": "\"Welcome to {brandName} Program!\""
+    },
+    "descriptionNewPartner": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "New partner description",
+            "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
+          }],
+        "text": "Description for new partner setup"
+      },
+      "attribute": "description-new-partner",
+      "reflect": false,
+      "defaultValue": "\"We just need a bit more information about you before you start earning cash!\""
+    },
+    "descriptionExistingPartner": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Existing partner description",
+            "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
+          }],
+        "text": "Description for existing partner confirmation"
+      },
+      "attribute": "description-existing-partner",
+      "reflect": false,
+      "defaultValue": "\"We noticed you are already an Impact.com partner, please confirm your information.\""
+    },
+    "countryLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Country label",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "country-label",
+      "reflect": false,
+      "defaultValue": "\"Country\""
+    },
+    "currencyLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Currency label",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "currency-label",
+      "reflect": false,
+      "defaultValue": "\"Currency\""
+    },
+    "submitButtonLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Submit button label",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "submit-button-label",
+      "reflect": false,
+      "defaultValue": "\"Submit\""
+    },
+    "confirmButtonLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Confirm button label",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "confirm-button-label",
+      "reflect": false,
+      "defaultValue": "\"Confirm\""
+    },
+    "searchCountryPlaceholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Search country placeholder",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "search-country-placeholder",
+      "reflect": false,
+      "defaultValue": "\"Search for a country\""
+    },
+    "searchCurrencyPlaceholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Search currency placeholder",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "search-currency-placeholder",
+      "reflect": false,
+      "defaultValue": "\"Search for a currency\""
+    },
+    "networkErrorText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Network error text",
+            "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "network-error-text",
+      "reflect": false,
+      "defaultValue": "\"An error occurred. Please try again.\""
+    },
+    "missingFieldsErrorText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Missing fields error text",
+            "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "missing-fields-error-text",
+      "reflect": false,
+      "defaultValue": "\"Please select both a country and currency.\""
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<PartnerInfoModalViewProps>",
+        "resolved": "{ states?: { open: boolean; loading: boolean; submitting: boolean; isExistingPartner: boolean; countryCode: string; currency: string; error: string; success: boolean; brandName: string; filteredCountries: { countryCode: string; displayName: string; }[]; filteredCurrencies: { currencyCode: string; displayName: string; }[]; }; }",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../global/demo"
+          },
+          "PartnerInfoModalViewProps": {
+            "location": "import",
+            "path": "./sqm-partner-info-modal-view"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
+    }
+  }; }
+}
+function useDemoPartnerInfoModal(props) {
+  const [countryCode, setCountryCode] = useState("US");
+  const [currency, setCurrency] = useState("");
+  const [error, setError] = useState("");
+  const demoCountries = [
+    { countryCode: "US", displayName: "United States" },
+    { countryCode: "CA", displayName: "Canada" },
+    { countryCode: "GB", displayName: "United Kingdom" },
+    { countryCode: "AU", displayName: "Australia" },
+    { countryCode: "DE", displayName: "Germany" },
+  ];
+  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" },
+  ];
+  return deepmerge({
+    states: {
+      brandName: "Test Brand",
+      open: true,
+      loading: false,
+      submitting: false,
+      isExistingPartner: false,
+      countryCode,
+      currency,
+      error,
+      success: false,
+      filteredCountries: demoCountries,
+      filteredCurrencies: demoCurrencies,
+    },
+    callbacks: {
+      onCountryChange: (e) => {
+        var _a, _b;
+        const value = (_b = (_a = e === null || e === void 0 ? void 0 : e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.__value;
+        if (value) {
+          setCountryCode(value);
+          setCurrency("");
+        }
+      },
+      onCurrencyChange: (e) => {
+        var _a, _b;
+        const value = (_b = (_a = e === null || e === void 0 ? void 0 : e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.__value;
+        if (value)
+          setCurrency(value);
+      },
+      onCountrySearch: () => { },
+      onCurrencySearch: () => { },
+      onSubmit: () => {
+        if (!countryCode || !currency) {
+          setError(props.missingFieldsErrorText);
+          return;
+        }
+        setError("");
+      },
+      onClose: () => { },
+    },
+    text: {
+      modalBrandHeader: props.modalBrandHeader,
+      descriptionNewPartner: props.descriptionNewPartner,
+      descriptionExistingPartner: props.descriptionExistingPartner,
+      countryLabel: props.countryLabel,
+      currencyLabel: props.currencyLabel,
+      submitButtonLabel: props.submitButtonLabel,
+      confirmButtonLabel: props.confirmButtonLabel,
+      searchCountryPlaceholder: props.searchCountryPlaceholder,
+      searchCurrencyPlaceholder: props.searchCurrencyPlaceholder,
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}