@saasquatch/mint-components 2.0.3 → 2.0.4-10

package/dist/collection/components/tax-and-cash/sqm-user-info-form/useUserInfoForm.js

@@ -1,11 +1,22 @@
-import { useParent, useParentQueryValue, useParentValue, } from "@saasquatch/component-boilerplate";
+import { useMutation, useParent, useParentQueryValue, useParentValue, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
 import { useEffect, useMemo, useRef, useState, } from "@saasquatch/universal-hooks";
 import jsonpointer from "jsonpointer";
 import { CURRENCIES_NAMESPACE, SORTED_COUNTRIES_NAMESPACE, TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "../data";
 import { ADDRESS_REGIONS } from "../subregions";
-import { objectIsFull } from "../utils";
+import { objectIsFull, validTaxDocument } from "../utils";
+import { TAX_FORM_UPDATED_EVENT_KEY } from "../eventKeys";
+import { CONNECT_PARTNER, } from "../sqm-indirect-tax-form/useIndirectTaxForm";
+import { gql } from "graphql-request";
+const GET_INDIRECT_TAX_COUNTRY_CODE = gql `
+  query getIndirectTaxCountryCode {
+    tenantSettings {
+      impactBrandCountryCode
+      impactBrandIndirectTaxCountryCode
+    }
+  }
+`;
 export function useUserInfoForm(props) {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f, _g;
   const currencyRef = useRef(undefined);
   const phoneCountryRef = useRef(undefined);
   const formRef = useRef(null);
@@ -13,7 +24,10 @@ export function useUserInfoForm(props) {
   const countries = useParentValue(SORTED_COUNTRIES_NAMESPACE);
   const [step, setStep] = useParent(TAX_CONTEXT_NAMESPACE);
   const [userFormContext, setUserFormContext] = useParent(USER_FORM_CONTEXT_NAMESPACE);
-  const { data, loading, errors: userError, } = useParentQueryValue(USER_QUERY_NAMESPACE);
+  const user = useUserIdentity();
+  const [connectImpactPartner, { loading: connectLoading, errors: connectErrors },] = useMutation(CONNECT_PARTNER);
+  const { data: tenantData } = useQuery(GET_INDIRECT_TAX_COUNTRY_CODE, {});
+  const { data, loading, refetch, errors: userError, } = useParentQueryValue(USER_QUERY_NAMESPACE);
   const _currencies = useParentValue(CURRENCIES_NAMESPACE);
   const currencies = useMemo(() => [...(_currencies || [])].sort((a, b) => a.displayName.localeCompare(b.displayName)), [_currencies]);
   const [countrySearch, setCountrySearch] = useState("");
@@ -115,6 +129,45 @@ export function useUserInfoForm(props) {
       setFilteredCurrencies(currencies.filter((c) => c.currencyCode.toLowerCase().includes(currencySearch.toLowerCase())) || []);
     }
   }, [currencySearch, currencies]);
+  async function connectPartner(formData) {
+    var _a, _b, _c, _d, _e;
+    const vars = {
+      user: {
+        id: user.id,
+        accountId: user.accountId,
+      },
+      firstName: formData.firstName,
+      lastName: formData.lastName,
+      countryCode: formData.countryCode,
+      currency: formData.currency,
+      address: formData.address,
+      city: formData.city,
+      state: formData.state,
+      postalCode: formData.postalCode,
+      phoneNumber: formData.phoneNumber,
+      phoneNumberCountryCode: formData.phoneNumberCountryCode,
+    };
+    const result = await connectImpactPartner({
+      vars,
+    });
+    if (!result || ((_a = result) === null || _a === void 0 ? void 0 : _a.message))
+      throw new Error();
+    if (!((_b = result.createImpactConnection) === null || _b === void 0 ? void 0 : _b.success)) {
+      // Output backend errors to console for now
+      console.error("Failed to create Impact connection: ", result.createImpactConnection.validationErrors);
+      throw new Error();
+    }
+    await refetch();
+    const resultPublisher = (_e = (_d = (_c = result
+      .createImpactConnection) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 : _d.impactConnection) === null || _e === void 0 ? void 0 : _e.publisher;
+    const hasValidCurrentDocument = validTaxDocument(resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.requiredTaxDocumentType) && (resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.currentTaxDocument);
+    // Fire form change event
+    window.dispatchEvent(new Event(TAX_FORM_UPDATED_EVENT_KEY));
+    return {
+      resultPublisher,
+      hasValidCurrentDocument,
+    };
+  }
   async function onSubmit(event) {
     let formControls = event.target.getFormControls();
     let formData = {};
@@ -157,9 +210,46 @@ export function useUserInfoForm(props) {
       postalCode: userData.postalCode,
       currency: userData.currency,
     });
-    const nextStep = context.overrideNextStep || "/2";
+    const skipNextStep = getSkipNextStep(userData);
+    if (skipNextStep) {
+      try {
+        const { resultPublisher, hasValidCurrentDocument } = await connectPartner(formData);
+        if ((resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.requiredTaxDocumentType) &&
+          !hasValidCurrentDocument) {
+          // Go to docusign form
+          setStep("/3");
+        }
+        else {
+          if (resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.brandedSignup) {
+            // Go to banking information form
+            setStep("/4");
+          }
+          else {
+            // Go right to the dashboard
+            setStep("/dashboard");
+          }
+        }
+        return;
+      }
+      catch (e) {
+        setErrors({ general: true });
+        return;
+      }
+    }
+    const nextStep = context.overrideNextStep || skipNextStep ? "/3" : "/2";
     setStep(nextStep);
   }
+  const indirectTaxCountry = (_a = tenantData === null || tenantData === void 0 ? void 0 : tenantData.tenantSettings) === null || _a === void 0 ? void 0 : _a.impactBrandIndirectTaxCountryCode;
+  const hasIndirectTax = !!indirectTaxCountry;
+  function getSkipNextStep(userData) {
+    if (!hasIndirectTax)
+      return true;
+    if (userData.countryCode === "US")
+      return true;
+    if (hasIndirectTax && userData.countryCode !== indirectTaxCountry)
+      return true;
+    return false;
+  }
   const hasStates = ["ES", "AU", "US", "CA"].includes(userFormContext.countryCode);
   const regionObj = hasStates
     ? ADDRESS_REGIONS[userFormContext === null || userFormContext === void 0 ? void 0 : userFormContext.countryCode]
@@ -187,16 +277,17 @@ export function useUserInfoForm(props) {
       allCountries: countries,
       regionLabelEnum: regionObj === null || regionObj === void 0 ? void 0 : regionObj.labelEnum,
       regions: (regionObj === null || regionObj === void 0 ? void 0 : regionObj.regions) || [],
+      partnerData: (_c = (_b = data === null || data === void 0 ? void 0 : data.user) === null || _b === void 0 ? void 0 : _b.impactConnection) === null || _c === void 0 ? void 0 : _c.publisher,
     },
     states: {
       step: step === null || step === void 0 ? void 0 : step.replace("/", ""),
       hideState: !hasStates,
       hideSteps: !!context.hideSteps,
-      disabled: loading,
+      disabled: loading || connectLoading,
       loadingError: !!(userError === null || userError === void 0 ? void 0 : userError.message),
-      loading: loading,
-      isPartner: !!((_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.impactConnection) === null || _b === void 0 ? void 0 : _b.publisher),
-      isUser: !!((_d = (_c = data === null || data === void 0 ? void 0 : data.user) === null || _c === void 0 ? void 0 : _c.impactConnection) === null || _d === void 0 ? void 0 : _d.user),
+      loading: loading || connectLoading,
+      isPartner: !!((_e = (_d = data === null || data === void 0 ? void 0 : data.user) === null || _d === void 0 ? void 0 : _d.impactConnection) === null || _e === void 0 ? void 0 : _e.publisher),
+      isUser: !!((_g = (_f = data === null || data === void 0 ? void 0 : data.user) === null || _f === void 0 ? void 0 : _f.impactConnection) === null || _g === void 0 ? void 0 : _g.user),
       formState: {
         ...userFormContext,
         errors: formErrors,

package/dist/collection/global/styles.js

@@ -71,7 +71,7 @@
   --teal-7: #004551;
 } */
 export const parseBrandingConfig = (config) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64, _65, _66, _67;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64, _65, _66, _67, _68, _69, _70, _71;
   return ({
     styles: `
 /* vietnamese */
@@ -577,71 +577,72 @@ html {
   --widget-background-color: var(--sl-color-white);
   --sqm-portal-main-width: 900px;
   --sqm-max-width: 100%;
-  --sqm-skeleton-background: hsl(240, 4%, 91%);
-  --sqm-text: ${((_d = (_c = config === null || config === void 0 ? void 0 : config.color) === null || _c === void 0 ? void 0 : _c.textColorShades) === null || _d === void 0 ? void 0 : _d.mainText) || "hsl(240, 4%, 16%)"};
-  --sqm-text-subdued: ${((_f = (_e = config === null || config === void 0 ? void 0 : config.color) === null || _e === void 0 ? void 0 : _e.textColorShades) === null || _f === void 0 ? void 0 : _f.subduedText) || "hsl(240, 3%, 46%)"};
-
-  --sqm-primary-color: ${((_g = config === null || config === void 0 ? void 0 : config.main) === null || _g === void 0 ? void 0 : _g.brandColor) || "hsl(0, 0%, 7%)"};
-  --sqm-primary-button-background:${((_j = (_h = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _h === void 0 ? void 0 : _h.buttonColor) === null || _j === void 0 ? void 0 : _j.background) || "hsl(0, 0%, 7%)"};
-  --sqm-primary-button-background-hover: ${((_l = (_k = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _k === void 0 ? void 0 : _k.buttonHoverColor) === null || _l === void 0 ? void 0 : _l.background) || "hsl(0, 0%, 25%)"};
-  --sqm-primary-button-color-hover: ${((_o = (_m = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _m === void 0 ? void 0 : _m.buttonHoverColor) === null || _o === void 0 ? void 0 : _o.label) || "hsla(0, 0%, 100%, 1)"};
-  --sqm-primary-button-border-color-hover: ${((_q = (_p = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _p === void 0 ? void 0 : _p.buttonHoverColor) === null || _q === void 0 ? void 0 : _q.border) || "hsl(0, 0%, 25%)"};
-  --sqm-primary-button-color: ${((_s = (_r = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _r === void 0 ? void 0 : _r.buttonColor) === null || _s === void 0 ? void 0 : _s.label) || "hsla(0, 0%, 100%, 1)"};
-  --sqm-primary-button-color-border: ${((_u = (_t = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _t === void 0 ? void 0 : _t.buttonColor) === null || _u === void 0 ? void 0 : _u.border) || "hsl(0, 0%, 7%)"};
-  --sqm-primary-button-radius: ${((_v = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _v === void 0 ? void 0 : _v.borderRadius) ? ((_w = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _w === void 0 ? void 0 : _w.borderRadius) + "px"
+  --sqm-skeleton-background: ${((_d = (_c = config === null || config === void 0 ? void 0 : config.color) === null || _c === void 0 ? void 0 : _c.loadingSkeleton) === null || _d === void 0 ? void 0 : _d.background) || "hsl(240 5.9% 90%)"};
+  --sqm-skeleton-animation-background: ${((_f = (_e = config === null || config === void 0 ? void 0 : config.color) === null || _e === void 0 ? void 0 : _e.loadingSkeleton) === null || _f === void 0 ? void 0 : _f.animationBackground) || "hsl(240 4.8% 95.9%)"};
+  --sqm-text: ${((_h = (_g = config === null || config === void 0 ? void 0 : config.color) === null || _g === void 0 ? void 0 : _g.textColorShades) === null || _h === void 0 ? void 0 : _h.mainText) || "hsl(240, 4%, 16%)"};
+  --sqm-text-subdued: ${((_k = (_j = config === null || config === void 0 ? void 0 : config.color) === null || _j === void 0 ? void 0 : _j.textColorShades) === null || _k === void 0 ? void 0 : _k.subduedText) || "hsl(240, 3%, 46%)"};
+
+  --sqm-primary-color: ${((_l = config === null || config === void 0 ? void 0 : config.main) === null || _l === void 0 ? void 0 : _l.brandColor) || "hsl(0, 0%, 7%)"};
+  --sqm-primary-button-background:${((_o = (_m = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _m === void 0 ? void 0 : _m.buttonColor) === null || _o === void 0 ? void 0 : _o.background) || "hsl(0, 0%, 7%)"};
+  --sqm-primary-button-background-hover: ${((_q = (_p = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _p === void 0 ? void 0 : _p.buttonHoverColor) === null || _q === void 0 ? void 0 : _q.background) || "hsl(0, 0%, 25%)"};
+  --sqm-primary-button-color-hover: ${((_s = (_r = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _r === void 0 ? void 0 : _r.buttonHoverColor) === null || _s === void 0 ? void 0 : _s.label) || "hsla(0, 0%, 100%, 1)"};
+  --sqm-primary-button-border-color-hover: ${((_u = (_t = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _t === void 0 ? void 0 : _t.buttonHoverColor) === null || _u === void 0 ? void 0 : _u.border) || "hsl(0, 0%, 25%)"};
+  --sqm-primary-button-color: ${((_w = (_v = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _v === void 0 ? void 0 : _v.buttonColor) === null || _w === void 0 ? void 0 : _w.label) || "hsla(0, 0%, 100%, 1)"};
+  --sqm-primary-button-color-border: ${((_y = (_x = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _x === void 0 ? void 0 : _x.buttonColor) === null || _y === void 0 ? void 0 : _y.border) || "hsl(0, 0%, 7%)"};
+  --sqm-primary-button-radius: ${((_z = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _z === void 0 ? void 0 : _z.borderRadius) ? ((_0 = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _0 === void 0 ? void 0 : _0.borderRadius) + "px"
       : "4px"};
-  --sqm-secondary-button-background: ${((_y = (_x = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _x === void 0 ? void 0 : _x.buttonColor) === null || _y === void 0 ? void 0 : _y.background) || "hsl(0, 0%, 100%)"};
-  --sqm-secondary-button-background-hover: ${((_0 = (_z = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _z === void 0 ? void 0 : _z.buttonHoverColor) === null || _0 === void 0 ? void 0 : _0.background) || "hsl(0, 0%, 7%)"};
-  --sqm-secondary-button-color-hover: ${((_2 = (_1 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _1 === void 0 ? void 0 : _1.buttonHoverColor) === null || _2 === void 0 ? void 0 : _2.label) || "hsl(0, 0%, 100%)"};
-  --sqm-secondary-button-border-color-hover: ${((_4 = (_3 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _3 === void 0 ? void 0 : _3.buttonHoverColor) === null || _4 === void 0 ? void 0 : _4.border) || "hsl(0, 0%, 7%)"};
-  --sqm-secondary-button-color: ${((_6 = (_5 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _5 === void 0 ? void 0 : _5.buttonColor) === null || _6 === void 0 ? void 0 : _6.label) || "hsl(0, 0%, 7%)"};
-  --sqm-secondary-button-color-border: ${((_8 = (_7 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _7 === void 0 ? void 0 : _7.buttonColor) === null || _8 === void 0 ? void 0 : _8.border) || "hsl(0, 0%, 100%)"};
-  --sqm-secondary-button-radius: ${((_9 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _9 === void 0 ? void 0 : _9.borderRadius) ? ((_10 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _10 === void 0 ? void 0 : _10.borderRadius) + "px"
+  --sqm-secondary-button-background: ${((_2 = (_1 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _1 === void 0 ? void 0 : _1.buttonColor) === null || _2 === void 0 ? void 0 : _2.background) || "hsl(0, 0%, 100%)"};
+  --sqm-secondary-button-background-hover: ${((_4 = (_3 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _3 === void 0 ? void 0 : _3.buttonHoverColor) === null || _4 === void 0 ? void 0 : _4.background) || "hsl(0, 0%, 7%)"};
+  --sqm-secondary-button-color-hover: ${((_6 = (_5 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _5 === void 0 ? void 0 : _5.buttonHoverColor) === null || _6 === void 0 ? void 0 : _6.label) || "hsl(0, 0%, 100%)"};
+  --sqm-secondary-button-border-color-hover: ${((_8 = (_7 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _7 === void 0 ? void 0 : _7.buttonHoverColor) === null || _8 === void 0 ? void 0 : _8.border) || "hsl(0, 0%, 7%)"};
+  --sqm-secondary-button-color: ${((_10 = (_9 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _9 === void 0 ? void 0 : _9.buttonColor) === null || _10 === void 0 ? void 0 : _10.label) || "hsl(0, 0%, 7%)"};
+  --sqm-secondary-button-color-border: ${((_12 = (_11 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _11 === void 0 ? void 0 : _11.buttonColor) === null || _12 === void 0 ? void 0 : _12.border) || "hsl(0, 0%, 100%)"};
+  --sqm-secondary-button-radius: ${((_13 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _13 === void 0 ? void 0 : _13.borderRadius) ? ((_14 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _14 === void 0 ? void 0 : _14.borderRadius) + "px"
       : "4px"};
 
-  --sqm-border-radius-normal: ${((_11 = config === null || config === void 0 ? void 0 : config.border) === null || _11 === void 0 ? void 0 : _11.borderRadius) ? ((_12 = config === null || config === void 0 ? void 0 : config.border) === null || _12 === void 0 ? void 0 : _12.borderRadius) + "px" : "4px"}; 
-  --sqm-border-color: ${((_13 = config === null || config === void 0 ? void 0 : config.border) === null || _13 === void 0 ? void 0 : _13.borderColor) || "hsl(240, 4%, 91%)"};
+  --sqm-border-radius-normal: ${((_15 = config === null || config === void 0 ? void 0 : config.border) === null || _15 === void 0 ? void 0 : _15.borderRadius) ? ((_16 = config === null || config === void 0 ? void 0 : config.border) === null || _16 === void 0 ? void 0 : _16.borderRadius) + "px" : "4px"}; 
+  --sqm-border-color: ${((_17 = config === null || config === void 0 ? void 0 : config.border) === null || _17 === void 0 ? void 0 : _17.borderColor) || "hsl(240, 4%, 91%)"};
 
-  --sqm-border-thickness: ${((_14 = config === null || config === void 0 ? void 0 : config.border) === null || _14 === void 0 ? void 0 : _14.borderThickness) ? ((_15 = config === null || config === void 0 ? void 0 : config.border) === null || _15 === void 0 ? void 0 : _15.borderThickness) + "px"
+  --sqm-border-thickness: ${((_18 = config === null || config === void 0 ? void 0 : config.border) === null || _18 === void 0 ? void 0 : _18.borderThickness) ? ((_19 = config === null || config === void 0 ? void 0 : config.border) === null || _19 === void 0 ? void 0 : _19.borderThickness) + "px"
       : "1px"};
 
-  --sqm-accent-color-icon: ${((_17 = (_16 = config === null || config === void 0 ? void 0 : config.color) === null || _16 === void 0 ? void 0 : _16.accentColorShades) === null || _17 === void 0 ? void 0 : _17.icon) || "hsl(0, 0%, 7%)"};
-  --sqm-accent-color-text: ${((_19 = (_18 = config === null || config === void 0 ? void 0 : config.color) === null || _18 === void 0 ? void 0 : _18.accentColorShades) === null || _19 === void 0 ? void 0 : _19.text) || "hsl(0, 0%, 7%)"};    
-  --sqm-accent-color-border: ${((_21 = (_20 = config === null || config === void 0 ? void 0 : config.color) === null || _20 === void 0 ? void 0 : _20.accentColorShades) === null || _21 === void 0 ? void 0 : _21.border) || "hsl(240, 6%, 90%)"};
-  --sqm-accent-color-background: ${((_23 = (_22 = config === null || config === void 0 ? void 0 : config.color) === null || _22 === void 0 ? void 0 : _22.accentColorShades) === null || _23 === void 0 ? void 0 : _23.background) || "hsl(0, 0%, 93%)"};
+  --sqm-accent-color-icon: ${((_21 = (_20 = config === null || config === void 0 ? void 0 : config.color) === null || _20 === void 0 ? void 0 : _20.accentColorShades) === null || _21 === void 0 ? void 0 : _21.icon) || "hsl(0, 0%, 7%)"};
+  --sqm-accent-color-text: ${((_23 = (_22 = config === null || config === void 0 ? void 0 : config.color) === null || _22 === void 0 ? void 0 : _22.accentColorShades) === null || _23 === void 0 ? void 0 : _23.text) || "hsl(0, 0%, 7%)"};    
+  --sqm-accent-color-border: ${((_25 = (_24 = config === null || config === void 0 ? void 0 : config.color) === null || _24 === void 0 ? void 0 : _24.accentColorShades) === null || _25 === void 0 ? void 0 : _25.border) || "hsl(240, 6%, 90%)"};
+  --sqm-accent-color-background: ${((_27 = (_26 = config === null || config === void 0 ? void 0 : config.color) === null || _26 === void 0 ? void 0 : _26.accentColorShades) === null || _27 === void 0 ? void 0 : _27.background) || "hsl(0, 0%, 93%)"};
 
-  --sqm-success-color-icon: ${((_25 = (_24 = config === null || config === void 0 ? void 0 : config.color) === null || _24 === void 0 ? void 0 : _24.success) === null || _25 === void 0 ? void 0 : _25.iconAndBadge) || "hsl(142, 71%, 45%)"};
-  --sqm-success-color-text: ${((_27 = (_26 = config === null || config === void 0 ? void 0 : config.color) === null || _26 === void 0 ? void 0 : _26.success) === null || _27 === void 0 ? void 0 : _27.text) || "hsl(164, 74%, 15%)"};
-  --sqm-success-color-border: ${((_29 = (_28 = config === null || config === void 0 ? void 0 : config.color) === null || _28 === void 0 ? void 0 : _28.success) === null || _29 === void 0 ? void 0 : _29.border) || "hsl(141, 79%, 85%)"};
-  --sqm-success-color-background: ${((_31 = (_30 = config === null || config === void 0 ? void 0 : config.color) === null || _30 === void 0 ? void 0 : _30.success) === null || _31 === void 0 ? void 0 : _31.background) || "hsl(141, 84%, 93%)"};
+  --sqm-success-color-icon: ${((_29 = (_28 = config === null || config === void 0 ? void 0 : config.color) === null || _28 === void 0 ? void 0 : _28.success) === null || _29 === void 0 ? void 0 : _29.iconAndBadge) || "hsl(142, 71%, 45%)"};
+  --sqm-success-color-text: ${((_31 = (_30 = config === null || config === void 0 ? void 0 : config.color) === null || _30 === void 0 ? void 0 : _30.success) === null || _31 === void 0 ? void 0 : _31.text) || "hsl(164, 74%, 15%)"};
+  --sqm-success-color-border: ${((_33 = (_32 = config === null || config === void 0 ? void 0 : config.color) === null || _32 === void 0 ? void 0 : _32.success) === null || _33 === void 0 ? void 0 : _33.border) || "hsl(141, 79%, 85%)"};
+  --sqm-success-color-background: ${((_35 = (_34 = config === null || config === void 0 ? void 0 : config.color) === null || _34 === void 0 ? void 0 : _34.success) === null || _35 === void 0 ? void 0 : _35.background) || "hsl(141, 84%, 93%)"};
   
-  --sqm-warning-color-icon: ${((_33 = (_32 = config === null || config === void 0 ? void 0 : config.color) === null || _32 === void 0 ? void 0 : _32.warning) === null || _33 === void 0 ? void 0 : _33.iconAndBadge) || "hsl(38, 92%, 50%)"};
-  --sqm-warning-color-text: ${((_35 = (_34 = config === null || config === void 0 ? void 0 : config.color) === null || _34 === void 0 ? void 0 : _34.warning) === null || _35 === void 0 ? void 0 : _35.text) || "hsl(38, 70%, 24%)"};
-  --sqm-warning-color-border: ${((_37 = (_36 = config === null || config === void 0 ? void 0 : config.color) === null || _36 === void 0 ? void 0 : _36.warning) === null || _37 === void 0 ? void 0 : _37.border) || "hsl(48, 97%, 85%)"};
-  --sqm-warning-color-background: ${((_39 = (_38 = config === null || config === void 0 ? void 0 : config.color) === null || _38 === void 0 ? void 0 : _38.warning) === null || _39 === void 0 ? void 0 : _39.background) || "hsl(48, 97%, 85%)"};
-
-  --sqm-danger-color-icon: ${((_41 = (_40 = config === null || config === void 0 ? void 0 : config.color) === null || _40 === void 0 ? void 0 : _40.critical) === null || _41 === void 0 ? void 0 : _41.iconAndBadge) || "hsl(0, 84%, 60%)"};
-  --sqm-danger-color-text: ${((_43 = (_42 = config === null || config === void 0 ? void 0 : config.color) === null || _42 === void 0 ? void 0 : _42.critical) === null || _43 === void 0 ? void 0 : _43.text) || "hsl(0, 57%, 26%)"};
-  --sqm-danger-color-border: ${((_45 = (_44 = config === null || config === void 0 ? void 0 : config.color) === null || _44 === void 0 ? void 0 : _44.critical) === null || _45 === void 0 ? void 0 : _45.border) || "hsl(0, 97%, 85%)"};
-  --sqm-danger-color-background: ${((_47 = (_46 = config === null || config === void 0 ? void 0 : config.color) === null || _46 === void 0 ? void 0 : _46.critical) === null || _47 === void 0 ? void 0 : _47.background) || "hsl(0, 93%, 94%)"};
-
-  --sqm-informative-color-icon: ${((_49 = (_48 = config === null || config === void 0 ? void 0 : config.color) === null || _48 === void 0 ? void 0 : _48.informative) === null || _49 === void 0 ? void 0 : _49.iconAndBadge) || "hsl(221, 83%, 53%)"};
-  --sqm-informative-color-text: ${((_51 = (_50 = config === null || config === void 0 ? void 0 : config.color) === null || _50 === void 0 ? void 0 : _50.informative) === null || _51 === void 0 ? void 0 : _51.text) || "hsl(221, 75%, 20%)"};
-  --sqm-informative-color-border: ${((_53 = (_52 = config === null || config === void 0 ? void 0 : config.color) === null || _52 === void 0 ? void 0 : _52.informative) === null || _53 === void 0 ? void 0 : _53.border) || "hsl(213, 97%, 85%)"};
-  --sqm-informative-color-background: ${((_55 = (_54 = config === null || config === void 0 ? void 0 : config.color) === null || _54 === void 0 ? void 0 : _54.informative) === null || _55 === void 0 ? void 0 : _55.background) || "hsl(214, 95%, 93%)"};
-
-  --sqm-input-background: ${((_57 = (_56 = config === null || config === void 0 ? void 0 : config.formFields) === null || _56 === void 0 ? void 0 : _56.formFieldColor) === null || _57 === void 0 ? void 0 : _57.background) || "hsla(0, 0%, 100%, 1)"};
-  --sqm-input-border-color: ${((_59 = (_58 = config === null || config === void 0 ? void 0 : config.formFields) === null || _58 === void 0 ? void 0 : _58.formFieldColor) === null || _59 === void 0 ? void 0 : _59.border) || "hsl(240, 6%, 90%)"};
-  --sqm-input-border-radius: ${((_60 = config === null || config === void 0 ? void 0 : config.formFields) === null || _60 === void 0 ? void 0 : _60.borderRadius) ? ((_61 = config === null || config === void 0 ? void 0 : config.formFields) === null || _61 === void 0 ? void 0 : _61.borderRadius) + "px"
+  --sqm-warning-color-icon: ${((_37 = (_36 = config === null || config === void 0 ? void 0 : config.color) === null || _36 === void 0 ? void 0 : _36.warning) === null || _37 === void 0 ? void 0 : _37.iconAndBadge) || "hsl(38, 92%, 50%)"};
+  --sqm-warning-color-text: ${((_39 = (_38 = config === null || config === void 0 ? void 0 : config.color) === null || _38 === void 0 ? void 0 : _38.warning) === null || _39 === void 0 ? void 0 : _39.text) || "hsl(38, 70%, 24%)"};
+  --sqm-warning-color-border: ${((_41 = (_40 = config === null || config === void 0 ? void 0 : config.color) === null || _40 === void 0 ? void 0 : _40.warning) === null || _41 === void 0 ? void 0 : _41.border) || "hsl(48, 97%, 85%)"};
+  --sqm-warning-color-background: ${((_43 = (_42 = config === null || config === void 0 ? void 0 : config.color) === null || _42 === void 0 ? void 0 : _42.warning) === null || _43 === void 0 ? void 0 : _43.background) || "hsl(48, 97%, 85%)"};
+
+  --sqm-danger-color-icon: ${((_45 = (_44 = config === null || config === void 0 ? void 0 : config.color) === null || _44 === void 0 ? void 0 : _44.critical) === null || _45 === void 0 ? void 0 : _45.iconAndBadge) || "hsl(0, 84%, 60%)"};
+  --sqm-danger-color-text: ${((_47 = (_46 = config === null || config === void 0 ? void 0 : config.color) === null || _46 === void 0 ? void 0 : _46.critical) === null || _47 === void 0 ? void 0 : _47.text) || "hsl(0, 57%, 26%)"};
+  --sqm-danger-color-border: ${((_49 = (_48 = config === null || config === void 0 ? void 0 : config.color) === null || _48 === void 0 ? void 0 : _48.critical) === null || _49 === void 0 ? void 0 : _49.border) || "hsl(0, 97%, 85%)"};
+  --sqm-danger-color-background: ${((_51 = (_50 = config === null || config === void 0 ? void 0 : config.color) === null || _50 === void 0 ? void 0 : _50.critical) === null || _51 === void 0 ? void 0 : _51.background) || "hsl(0, 93%, 94%)"};
+
+  --sqm-informative-color-icon: ${((_53 = (_52 = config === null || config === void 0 ? void 0 : config.color) === null || _52 === void 0 ? void 0 : _52.informative) === null || _53 === void 0 ? void 0 : _53.iconAndBadge) || "hsl(221, 83%, 53%)"};
+  --sqm-informative-color-text: ${((_55 = (_54 = config === null || config === void 0 ? void 0 : config.color) === null || _54 === void 0 ? void 0 : _54.informative) === null || _55 === void 0 ? void 0 : _55.text) || "hsl(221, 75%, 20%)"};
+  --sqm-informative-color-border: ${((_57 = (_56 = config === null || config === void 0 ? void 0 : config.color) === null || _56 === void 0 ? void 0 : _56.informative) === null || _57 === void 0 ? void 0 : _57.border) || "hsl(213, 97%, 85%)"};
+  --sqm-informative-color-background: ${((_59 = (_58 = config === null || config === void 0 ? void 0 : config.color) === null || _58 === void 0 ? void 0 : _58.informative) === null || _59 === void 0 ? void 0 : _59.background) || "hsl(214, 95%, 93%)"};
+
+  --sqm-input-background: ${((_61 = (_60 = config === null || config === void 0 ? void 0 : config.formFields) === null || _60 === void 0 ? void 0 : _60.formFieldColor) === null || _61 === void 0 ? void 0 : _61.background) || "hsla(0, 0%, 100%, 1)"};
+  --sqm-input-border-color: ${((_63 = (_62 = config === null || config === void 0 ? void 0 : config.formFields) === null || _62 === void 0 ? void 0 : _62.formFieldColor) === null || _63 === void 0 ? void 0 : _63.border) || "hsl(240, 6%, 90%)"};
+  --sqm-input-border-radius: ${((_64 = config === null || config === void 0 ? void 0 : config.formFields) === null || _64 === void 0 ? void 0 : _64.borderRadius) ? ((_65 = config === null || config === void 0 ? void 0 : config.formFields) === null || _65 === void 0 ? void 0 : _65.borderRadius) + "px"
       : "4px"};
-  --sqm-input-color: ${((_63 = (_62 = config === null || config === void 0 ? void 0 : config.formFields) === null || _62 === void 0 ? void 0 : _62.formFieldColor) === null || _63 === void 0 ? void 0 : _63.inputText) || "hsl(0, 0%, 7%)"};
+  --sqm-input-color: ${((_67 = (_66 = config === null || config === void 0 ? void 0 : config.formFields) === null || _66 === void 0 ? void 0 : _66.formFieldColor) === null || _67 === void 0 ? void 0 : _67.inputText) || "hsl(0, 0%, 7%)"};
   --sqm-input-label-color: var(--sqm-text);
-  --sqm-input-border-color-focus: ${((_64 = config === null || config === void 0 ? void 0 : config.formFields) === null || _64 === void 0 ? void 0 : _64.selectedStateColor) || "hsl(0, 0%, 7%)"};
-  --sqm-input-border-color-hover: ${((_65 = config === null || config === void 0 ? void 0 : config.formFields) === null || _65 === void 0 ? void 0 : _65.hoverStateColor) || "hsl(0, 0%, 91%)"};
+  --sqm-input-border-color-focus: ${((_68 = config === null || config === void 0 ? void 0 : config.formFields) === null || _68 === void 0 ? void 0 : _68.selectedStateColor) || "hsl(0, 0%, 7%)"};
+  --sqm-input-border-color-hover: ${((_69 = config === null || config === void 0 ? void 0 : config.formFields) === null || _69 === void 0 ? void 0 : _69.hoverStateColor) || "hsl(0, 0%, 91%)"};
 
   --sqm-input-label-font-size: inherit;
   --sqm-input-disabled-color: var(--sqm-text-subdued);
-  --sqm-input-disabled-background: ${((_66 = config === null || config === void 0 ? void 0 : config.formFields) === null || _66 === void 0 ? void 0 : _66.disabledBackgroundColor) || "#F4F4F5"};
+  --sqm-input-disabled-background: ${((_70 = config === null || config === void 0 ? void 0 : config.formFields) === null || _70 === void 0 ? void 0 : _70.disabledBackgroundColor) || "#F4F4F5"};
 
   sl-select::part(display-input),
   sl-select::part(base),
@@ -960,6 +961,6 @@ sl-icon::part(base):hover {
 }
 
 `,
-    font: (_67 = config === null || config === void 0 ? void 0 : config.main) === null || _67 === void 0 ? void 0 : _67.brandFont,
+    font: (_71 = config === null || config === void 0 ? void 0 : config.main) === null || _71 === void 0 ? void 0 : _71.brandFont,
   });
 };

package/dist/collection/global/styles.ts

@@ -586,7 +586,12 @@ html {
   --widget-background-color: var(--sl-color-white);
   --sqm-portal-main-width: 900px;
   --sqm-max-width: 100%;
-  --sqm-skeleton-background: hsl(240, 4%, 91%);
+  --sqm-skeleton-background: ${
+    config?.color?.loadingSkeleton?.background || "hsl(240 5.9% 90%)"
+  };
+  --sqm-skeleton-animation-background: ${
+    config?.color?.loadingSkeleton?.animationBackground || "hsl(240 4.8% 95.9%)"
+  };
   --sqm-text: ${
     config?.color?.textColorShades?.mainText || "hsl(240, 4%, 16%)"
   };

package/dist/collection/tables/TableSlots.js

@@ -9,15 +9,15 @@ export function LoadingSlot() {
 export function LoadingRow() {
   return (h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null))));
+      h("sqm-skeleton", null))));
 }
 export function LoadingSkeleton() {
   return (h("div", { style: { width: "100%" } },
-    h("sl-skeleton", { style: { marginBottom: "28px" } }),
-    h("sl-skeleton", { style: { marginBottom: "28px" } }),
-    h("sl-skeleton", { style: { marginBottom: "28px" } }),
-    h("sl-skeleton", { style: { marginBottom: "28px" } }),
-    h("sl-skeleton", null)));
+    h("sqm-skeleton", { style: { marginBottom: "28px" } }),
+    h("sqm-skeleton", { style: { marginBottom: "28px" } }),
+    h("sqm-skeleton", { style: { marginBottom: "28px" } }),
+    h("sqm-skeleton", { style: { marginBottom: "28px" } }),
+    h("sqm-skeleton", null)));
 }
 export function EmptySlot({ label }) {
   return (h("slot", { name: "empty" },

package/dist/esm/{IndirectTaxDetailsView-8dec05e4.js → IndirectTaxDetailsView-a7dd6e4c.js}

@@ -1,7 +1,7 @@
 import { h } from './index-b3a06de8.js';
-import { i as intl } from './global-58a69018.js';
+import { i as intl } from './global-536c422d.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { f as formatErrorMessage } from './utils-2695a43e.js';
+import { f as formatErrorMessage } from './utils-fafc712f.js';
 
 const style = {
   Description: {

package/dist/esm/{ShadowViewAddon-7a242b65.js → ShadowViewAddon-fe2896cb.js}

@@ -1,5 +1,5 @@
 import { h, c as Host, d as getAssetPath, F as Fragment, g as getElement } from './index-b3a06de8.js';
-import { i as intl } from './global-58a69018.js';
+import { i as intl } from './global-536c422d.js';
 import { b as browser, u as useMemo, k as useState } from './dom-context-hooks.module-63370afd.js';
 import { H, L, J, d as dist, w as wn, j as jn, B, F as Fn, $ as $e, g as getEnvironmentSDK } from './index.module-c9811a48.js';
 import { c as cjs } from './cjs-bdfb4486.js';
@@ -2095,11 +2095,11 @@ function TaskCardView(props) {
           ? "main complete"
           : "main" },
       h("div", { class: "container", part: "sqm-card-container", "data-subdue": taskComplete || taskUnavailable },
-        h("div", { class: sheet.classes.Header, style: { opacity: taskComplete || taskUnavailable ? "0.45" : "1" } }, states.loading ? (h("sl-skeleton", { style: { width: "22%", margin: "0" } })) : (h("div", null,
+        h("div", { class: sheet.classes.Header, style: { opacity: taskComplete || taskUnavailable ? "0.45" : "1" } }, states.loading ? (h("sqm-skeleton", { style: { width: "22%", margin: "0" } })) : (h("div", null,
           showComplete && (h("span", { class: taskUnavailable ? "icon neutral" : "icon" }, taskComplete ? checkmark_filled$1 : checkmark_circle$1)),
           h("span", { part: "sqm-value", class: "value" }, content.rewardAmount),
           h("span", { part: "sqm-unit", class: "text" }, content.rewardUnit)))),
-        states.loading ? (h("sl-skeleton", { style: { width: "42%", margin: "var(--sl-spacing-medium) 0" } })) : (h("div", { class: "title", part: "sqm-title", style: {
+        states.loading ? (h("sqm-skeleton", { style: { width: "42%", margin: "var(--sl-spacing-medium) 0" } })) : (h("div", { class: "title", part: "sqm-title", style: {
             marginBottom: !content.description
               ? content.steps
                 ? "var(--sl-spacing-x-large)"
@@ -2109,9 +2109,9 @@ function TaskCardView(props) {
               : "",
             opacity: taskComplete || taskUnavailable ? "0.45" : "1",
           } }, content.cardTitle)),
-        states.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.description && (h(Details, Object.assign({}, props, { opacity: taskComplete || taskUnavailable ? "0.45" : "1" })))),
-        content.showProgressBar && states.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.showProgressBar && (h(ProgressBarView, Object.assign({}, props.content, props.states, { opacity: taskComplete || taskUnavailable ? "0.75" : "1", complete: taskComplete, expired: taskUnavailable })))),
-        h("div", { class: sheet.classes.Footer, "data-subdue": taskComplete || taskUnavailable }, states.loading ? (h("sl-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (h("div", { style: { display: "contents" } },
+        states.loading ? (h("sqm-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.description && (h(Details, Object.assign({}, props, { opacity: taskComplete || taskUnavailable ? "0.45" : "1" })))),
+        content.showProgressBar && states.loading ? (h("sqm-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.showProgressBar && (h(ProgressBarView, Object.assign({}, props.content, props.states, { opacity: taskComplete || taskUnavailable ? "0.75" : "1", complete: taskComplete, expired: taskUnavailable })))),
+        h("div", { class: sheet.classes.Footer, "data-subdue": taskComplete || taskUnavailable }, states.loading ? (h("sqm-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (h("div", { style: { display: "contents" } },
           h("span", { class: "text" },
             content.repeatable && (h("div", null,
               h("span", { class: repetitions > 0
@@ -2384,7 +2384,7 @@ const EditProfileView = (props) => {
         } }, text.editprofileheader),
       h("form", { class: "FormWrapper", onSubmit: callbacks.onSubmit },
         h("div", { class: "FormSection" },
-          states.formState.error && (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
+          states.formState.error && (h("sqm-form-message", { loading: states.loading, type: "error", exportparts: "erroralert-icon" },
             h("div", { part: "erroralert-text" }, states.formState.error))),
           h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", value: states.formState.firstName, onInput: callbacks.onChange, label: text.firstnametext, disabled: states.loading }, (errors.firstName && errors.firstName.status !== "valid"
             ? { class: "ErrorStyles", helpText: text.fieldEmptyText }
@@ -2497,10 +2497,10 @@ function LeaderboardView(props) {
       h("style", { type: "text/css" },
         styleString,
         vanillaStyle),
-      h("table", null, [...Array(10)].map(() => {
+      h("table", null, [...Array(5)].map(() => {
         return (h("tr", null,
           h("td", null,
-            h("sl-skeleton", null))));
+            h("sqm-skeleton", null))));
       }))));
   }
   if (!states.hasLeaders)
@@ -2849,14 +2849,14 @@ function ChangeMarktingView(props) {
 }
 
 const vanillaStyle$5 = `
-  :host{
+  :host {
     margin: 0 auto;
     width: 100%;
   }
-  a{
+  a {
     cursor:pointer;
     color: var(--sqm-text-subdued);
-    text-decoration: none ;
+    text-decoration: none;
   }
 `;
 function PortalFooterView(props) {
@@ -3692,19 +3692,19 @@ function RewardExchangeView(props) {
         h("sl-card", { class: sheet$8.classes.Card },
           h("div", { class: sheet$8.classes.CardLayout },
             h("div", null,
-              h("sl-skeleton", { style: {
-                  width: "100px",
-                  height: "100px",
+              h("sqm-skeleton", { style: {
                   margin: "9px",
-                  "--border-radius": "var(--sqm-border-radius-normal)",
-                } })),
+                }, width: "100px", height: "100px" })),
             h("div", { style: {
                 margin: "var(--sl-spacing-small) var(--sl-spacing-small) 0 0",
                 width: "100%",
+                display: "flex",
+                flexDirection: "column",
+                gap: "var(--sl-spacing-small)",
               } },
-              h("sl-skeleton", { style: { marginBottom: "var(--sl-spacing-small)" } }),
-              h("sl-skeleton", { style: { marginBottom: "var(--sl-spacing-small)" } }),
-              h("sl-skeleton", { style: { width: "45%" } }))))));
+              h("sqm-skeleton", null),
+              h("sqm-skeleton", null),
+              h("sqm-skeleton", { width: "45%" }))))));
     })));
   }
   function errorMessage() {
@@ -4376,7 +4376,7 @@ function LeadFormView(props) {
         vanillaStyle$7,
         styleString$9),
       h(TextSpanView, { type: "h3" }, content.pageLabel),
-      h("sqm-form-message", { exportparts: "success-icon" },
+      h("sqm-form-message", { loading: states.loading, exportparts: "success-icon" },
         h("b", null, content.submitSuccessHeader),
         h("br", null),
         h("div", { part: "successalert-text" }, content.submitSuccessDescription)),
@@ -4387,16 +4387,14 @@ function LeadFormView(props) {
         styleString$9),
       h(TextSpanView, { type: "h3" }, content.pageLabel),
       h("sl-form", { class: sheet$9.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
-        states.error && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", class: sheet$9.classes.ErrorAlertContainer, open: true },
-          h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-          h("b", null, content.submitErrorHeader),
-          h("br", null),
-          intl.formatMessage({
+        states.error && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "error" },
+          h("p", { part: "alert-title" }, content.submitErrorHeader),
+          h("p", { part: "alert-text" }, intl.formatMessage({
             id: "submitErrorDescription",
             defaultMessage: content.submitErrorDescription,
           }, {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, content.supportLinkText)),
-          }))),
+          })))),
         h("div", { class: sheet$9.classes.NameFieldWrapper },
           h("sqm-lead-input-field", { class: sheet$9.classes.NameInput, "field-label": content.firstNameLabel || "First Name", "field-name": "firstName" }),
           h("sqm-lead-input-field", { class: sheet$9.classes.NameInput, "field-label": content.lastNameLabel || "Last Name", "field-name": "lastName" })),

package/dist/esm/{data-acdb790f.js → data-68816061.js}

@@ -1000,7 +1000,7 @@ const GET_TAX_SETTING = dist.gql `
   }
 `;
 function getStatus(data) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
   const account = (_b = (_a = data.user.impactConnection) === null || _a === void 0 ? void 0 : _a.publisher) === null || _b === void 0 ? void 0 : _b.payoutsAccount;
   const hasTransferredReward = (_e = (_d = (_c = data === null || data === void 0 ? void 0 : data.user) === null || _c === void 0 ? void 0 : _c.rewards) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.find((reward) => reward.statuses.includes("REDEEMED") &&
     reward.partnerFundsTransfer.status === "TRANSFERRED");
@@ -1017,8 +1017,23 @@ function getStatus(data) {
     return "VERIFICATION:REVIEW";
   if ((_p = account.holdReasons) === null || _p === void 0 ? void 0 : _p.includes("IDV_CHECK_FAILED_INTERNAL"))
     return "VERIFICATION:FAILED";
+  // only show banner for NEW_PAYEE_REVIEW if a PFT was created
   if (((_q = account.holdReasons) === null || _q === void 0 ? void 0 : _q.includes("NEW_PAYEE_REVIEW")) && hasTransferredReward)
-    return "ACCOUNT_REVIEW";
+    return "NEW_PAYEE_REVIEW";
+  if ((_r = account.holdReasons) === null || _r === void 0 ? void 0 : _r.includes("NEW_PAYEE_REVIEW"))
+    return "DONE";
+  if ((_s = account.holdReasons) === null || _s === void 0 ? void 0 : _s.includes("PAYMENT_HOLD_ON_CHANGE"))
+    return "PAYMENT_HOLD_ON_CHANGE";
+  if ((_t = account.holdReasons) === null || _t === void 0 ? void 0 : _t.includes("BENEFICIARY_NAME_INVALID"))
+    return "BENEFICIARY_NAME_INVALID";
+  if ((_u = account.holdReasons) === null || _u === void 0 ? void 0 : _u.includes("BENEFICIARY_NAME_MISMATCH"))
+    return "BENEFICIARY_NAME_MISMATCH";
+  if ((_v = account.holdReasons) === null || _v === void 0 ? void 0 : _v.includes("BANK_TAX_NAME_MISMATCH"))
+    return "BANK_TAX_NAME_MISMATCH";
+  if ((_w = account.holdReasons) === null || _w === void 0 ? void 0 : _w.includes("WITHDRAWAL_SETTINGS_INVALID"))
+    return "WITHDRAWAL_SETTINGS_INVALID";
+  if ((_x = account.holdReasons) === null || _x === void 0 ? void 0 : _x.includes("PAYMENT_RETURNED"))
+    return "PAYMENT_RETURNED";
   if (account.hold)
     return "HOLD";
   return "DONE";
@@ -1057,6 +1072,16 @@ function usePayoutStatus(props) {
       url += "#3";
     window.history.pushState(null, "", url);
   };
+  const onPaymentInfoClick = () => {
+    let url = props.cashPayoutsPageUrl;
+    url += "#4";
+    window.history.pushState(null, "", url);
+  };
+  const onNewFormClick = () => {
+    let url = props.cashPayoutsPageUrl;
+    url += "#3";
+    window.history.pushState(null, "", url);
+  };
   return {
     states: {
       loading,
@@ -1070,6 +1095,8 @@ function usePayoutStatus(props) {
     callbacks: {
       onTermsClick,
       onClick: render,
+      onPaymentInfoClick,
+      onNewFormClick,
     },
   };
 }