@saasquatch/mint-components 2.1.8-0 → 2.1.8-1

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

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

package/dist/collection/components/sqm-stencilbook/sqm-stencilbook.js

@@ -107,6 +107,7 @@ import * as LeadFormDropdownField from "../sqm-lead-form/LeadFormDropdownField.s
 import * as LeadCheckboxField from "../sqm-lead-form/LeadCheckboxField.stories";
 import * as Skeleton from "../sqm-skeleton/Skeleton.stories";
 import * as UserInfoFormView from "../tax-and-cash/sqm-user-info-form/UserInfoFormView.stories";
+import * as PartnerInfoModal from "../sqm-partner-info-modal/PartnerInfoModal.stories";
 import { ShadowViewAddon } from "../../ShadowViewAddon";
 import { CucumberAddon } from "./CucumberAddon";
 import { HookStoryAddon } from "./HookStoryAddon";
@@ -218,6 +219,7 @@ const stories = [
   TaxAndCashRewardsTable,
   TaxAndCashReferralTableRewardsCell,
   TaxAndCashReferralTable,
+  PartnerInfoModal,
 ];
 /**
  * For internal documentation

package/dist/collection/components/tax-and-cash/sqm-banking-info-form/useBankingInfoForm.js

@@ -27,15 +27,6 @@ const WIRE_PAYMENT_METHOD = 5;
 const PAYPAL_PAYMENT_METHOD = 7;
 /**
  * Maps GraphQL validation error field names to form field names.
- *
- * The Impact API returns UpperCamelCase field names (e.g. `BankAccountNumber`).
- * The GraphQL layer in `UserServiceImpl.java` converts these to lowerCamelCase
- * via `CaseFormat.UPPER_CAMEL.to(CaseFormat.LOWER_CAMEL, errorDto.field)`.
- *
- * Most converted field names already match the form field names exactly
- * (e.g. `bankAccountNumber`, `swiftCode`, `routingCode`). Only entries
- * where the GraphQL field name differs from the form field name need
- * to be listed here.
  */
 const API_FIELD_TO_FORM_FIELD = {
   // bankProvinceState → form uses bankState
@@ -44,11 +35,6 @@ const API_FIELD_TO_FORM_FIELD = {
 /**
  * Maps Impact API error code paths (from validationErrors[].errorPath) to short,
  * readable frontend error codes used in the ICU select props.
- *
- * The Impact API returns a stable dot-delimited error path (e.g.
- * "withdrawal.settings.error.routingcode") alongside the human-readable message.
- * The GraphQL layer exposes this as `errorPath`. The keys below match those paths
- * to short frontend codes used in the ICU `{errorCode, select, ...}` props.
  */
 const API_ERROR_PATH_TO_FRONTEND = {
   // Beneficiary account name
@@ -151,7 +137,7 @@ const SAVE_WITHDRAWAL_SETTINGS = gql `
       validationErrors {
         field
         message
-        errorPath
+        code
       }
     }
   }
@@ -167,7 +153,7 @@ const UPDATE_WITHDRAWAL_SETTINGS = gql `
       validationErrors {
         field
         message
-        errorPath
+        code
       }
     }
   }

package/dist/esm/{ShadowViewAddon-53b9090b.js → ShadowViewAddon-9d97b5d5.js}

@@ -4463,6 +4463,94 @@ function LeadDropdownFieldView(props) {
     })))));
 }
 
+const style$b = {
+  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",
+    },
+  },
+};
+function PartnerInfoModalView(props) {
+  var _a, _b;
+  const { states, callbacks, text } = props;
+  const sheet = createStyleSheet(style$b);
+  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)));
+}
+
 const map = new Map();
 function withShadowView(component) {
   // TODO: Could only do this if rendered in a Stencilbook environment to prevent unintended side-effects
@@ -4497,4 +4585,4 @@ const ShadowViewAddon = ({ story }, children) => {
     h(TagName, { "stencilbook-shadow-view": randomInt })));
 };
 
-export { empty as A, BigStatView as B, CardFeedView as C, DropdownFieldView as D, EditProfileView as E, rewardExchange as F, useShareButton as G, HeroView as H, InputFieldView as I, useShareLink as J, ProgressBarView as K, LeaderboardView as L, ProgressBar as M, NameFieldsView as N, LeadFormView as O, PortalChangePasswordView as P, LeadDropdownFieldView as Q, ReferralIframeView as R, StatContainerView as S, TaskCardView as T, ShadowViewAddon as U, useBigStat as V, withShadowView as W, demoRewardExchange as X, ShareButtonView as a, PoweredByImg as b, BaseRegistrationFormView as c, CheckboxFieldView as d, CouponCodeView as e, ChangeMarktingView as f, PortalFooterView as g, PortalFrameView as h, RewardExchangeView as i, rewardExchangeLongText as j, rewardExchangeSelected as k, chooseAmountFixed as l, chooseAmountFixedNoDescription as m, chooseAmountVariable as n, chooseAmountVariableNoDescription as o, chooseAmountVariableDisabled as p, chooseAmountVariableUnavailable as q, rewardExchangeCustomErrorMsg as r, confirmFixed as s, confirmVariable as t, useDemoBigStat as u, redemptionError as v, queryError as w, success as x, successVariable as y, loading as z };
+export { empty as A, BigStatView as B, CardFeedView as C, DropdownFieldView as D, EditProfileView as E, rewardExchange as F, useShareButton as G, HeroView as H, InputFieldView as I, useShareLink as J, ProgressBarView as K, LeaderboardView as L, ProgressBar as M, NameFieldsView as N, LeadFormView as O, PortalChangePasswordView as P, LeadDropdownFieldView as Q, ReferralIframeView as R, StatContainerView as S, TaskCardView as T, PartnerInfoModalView as U, ShadowViewAddon as V, useBigStat as W, withShadowView as X, demoRewardExchange as Y, ShareButtonView as a, PoweredByImg as b, BaseRegistrationFormView as c, CheckboxFieldView as d, CouponCodeView as e, ChangeMarktingView as f, PortalFooterView as g, PortalFrameView as h, RewardExchangeView as i, rewardExchangeLongText as j, rewardExchangeSelected as k, chooseAmountFixed as l, chooseAmountFixedNoDescription as m, chooseAmountVariable as n, chooseAmountVariableNoDescription as o, chooseAmountVariableDisabled as p, chooseAmountVariableUnavailable as q, rewardExchangeCustomErrorMsg as r, confirmFixed as s, confirmVariable as t, useDemoBigStat as u, redemptionError as v, queryError as w, success as x, successVariable as y, loading as z };