@saasquatch/mint-components 2.1.8-1 → 2.1.8

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

@@ -1,462 +0,0 @@
-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 });
-}

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

@@ -1,180 +0,0 @@
-import { useLocale, useMutation, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
-import { useState } from "@saasquatch/universal-hooks";
-import { gql } from "graphql-request";
-import { TAX_FORM_UPDATED_EVENT_KEY } from "../tax-and-cash/eventKeys";
-export const GET_USER_PARTNER_INFO = gql `
-  query getUserPartnerInfo {
-    user: viewer {
-      ... on User {
-        id
-        firstName
-        lastName
-        email
-        countryCode
-        customFields
-        impactConnection {
-          connected
-          publisher {
-            countryCode
-            currency
-          }
-        }
-      }
-    }
-  }
-`;
-export const GET_COUNTRIES = gql `
-  query getCountries {
-    impactPayoutCountries(limit: 1000) {
-      data {
-        countryCode
-        displayName
-      }
-    }
-  }
-`;
-export const GET_CURRENCIES = gql `
-  query currencies($locale: RSLocale) {
-    currencies(limit: 300) {
-      data {
-        displayName(locale: $locale)
-        currencyCode
-      }
-    }
-  }
-`;
-export const CONNECT_PARTNER = gql `
-  mutation createImpactConnection($vars: ImpactConnectionInput!) {
-    createImpactConnection(impactConnectionInput: $vars) {
-      success
-      validationErrors {
-        field
-        message
-      }
-      user {
-        id
-        accountId
-        impactConnection {
-          connected
-          publisher {
-            brandedSignup
-            requiredTaxDocumentType
-            currentTaxDocument {
-              type
-              status
-            }
-          }
-        }
-      }
-    }
-  }
-`;
-const GET_BRAND_NAME = gql `
-  query getTenantSettings {
-    tenantSettings {
-      companyName
-    }
-  }
-`;
-export function usePartnerInfoModal(props) {
-  var _a, _b, _c, _d;
-  const user = useUserIdentity();
-  const locale = useLocale();
-  const { data: userData, loading: userLoading, refetch, } = useQuery(GET_USER_PARTNER_INFO, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
-  const { data: currenciesData } = useQuery(GET_CURRENCIES, { variables: { locale } }, !(user === null || user === void 0 ? void 0 : user.jwt));
-  const { data: countriesData } = useQuery(GET_COUNTRIES, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
-  const { data: tenantSettingsData } = useQuery(GET_BRAND_NAME, {});
-  const [connectImpactPartner, { loading: connectLoading, errors: connectErrors },] = useMutation(CONNECT_PARTNER);
-  const [countryCode, setCountryCode] = useState("");
-  const [currency, setCurrency] = useState("");
-  const [error, setError] = useState("");
-  const [success, setSuccess] = useState(false);
-  console.log(user, "user identity in create partner modal"); // TEMP
-  console.log(userData, "user data from partner info query"); // TEMP
-  const impactConnection = (_a = userData === null || userData === void 0 ? void 0 : userData.user) === null || _a === void 0 ? void 0 : _a.impactConnection;
-  function onCountryChange(e) {
-    var _a, _b;
-    const value = (_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.__value;
-    if (!value)
-      return;
-    setCountryCode(value);
-    setCurrency("");
-    setError("");
-  }
-  function onCurrencyChange(e) {
-    var _a, _b;
-    const value = (_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.__value;
-    if (!value)
-      return;
-    setCurrency(value);
-    setError("");
-  }
-  async function onSubmit() {
-    var _a, _b;
-    if (!countryCode || !currency) {
-      setError(props.missingFieldsErrorText);
-      return;
-    }
-    setError("");
-    // AL TODO: How to create impact connection if we dont have address, postalCode, and city?
-    try {
-      const vars = {
-        user: {
-          id: user.id,
-          accountId: user.accountId,
-        },
-        firstName: userData.user.firstName,
-        lastName: userData.user.lastName,
-        countryCode,
-        currency,
-      };
-      const result = await connectImpactPartner({ vars });
-      if (!result || ((_a = result) === null || _a === void 0 ? void 0 : _a.message)) {
-        setError(props.networkErrorText);
-        return;
-      }
-      const connectionResult = result
-        .createImpactConnection;
-      console.log(result, connectionResult, "result and connectionResult from creating partner from modal");
-      if (!(connectionResult === null || connectionResult === void 0 ? void 0 : connectionResult.success)) {
-        const validationMsg = (_b = connectionResult === null || connectionResult === void 0 ? void 0 : connectionResult.validationErrors) === null || _b === void 0 ? void 0 : _b.map((e) => e.message).join(". ");
-        setError(validationMsg || props.networkErrorText);
-        console.error("Failed to create Impact connection:", connectionResult === null || connectionResult === void 0 ? void 0 : connectionResult.validationErrors);
-        return;
-      }
-      // Success
-      window.dispatchEvent(new Event(TAX_FORM_UPDATED_EVENT_KEY));
-      await refetch();
-      setSuccess(true);
-    }
-    catch (e) {
-      console.error("Partner creation error:", e);
-      setError(props.networkErrorText);
-    }
-  }
-  const shouldShow = !success && !userLoading && !(impactConnection === null || impactConnection === void 0 ? void 0 : impactConnection.connected);
-  return {
-    states: {
-      open: shouldShow,
-      loading: userLoading,
-      submitting: connectLoading,
-      isExistingPartner: !!(impactConnection === null || impactConnection === void 0 ? void 0 : impactConnection.connected),
-      countryCode,
-      currency,
-      error,
-      success,
-      brandName: ((_b = tenantSettingsData === null || tenantSettingsData === void 0 ? void 0 : tenantSettingsData.tenantSettings) === null || _b === void 0 ? void 0 : _b.companyName) || "",
-      filteredCountries: ((_c = countriesData === null || countriesData === void 0 ? void 0 : countriesData.impactPayoutCountries) === null || _c === void 0 ? void 0 : _c.data) || [],
-      filteredCurrencies: ((_d = currenciesData === null || currenciesData === void 0 ? void 0 : currenciesData.currencies) === null || _d === void 0 ? void 0 : _d.data) || [],
-    },
-    callbacks: {
-      onCountryChange,
-      onCurrencyChange,
-      onCountrySearch: () => { },
-      onCurrencySearch: () => { },
-      onSubmit,
-      onClose: () => setSuccess(true),
-    },
-    text: props.getTextProps(),
-  };
-}