@saasquatch/mint-components 2.0.0-9 → 2.0.1

package/dist/esm/sqm-banking-info-form_10.entry.js

@@ -4,7 +4,7 @@ import { m as useRef, k as useState, f as useEffect, n as h$1, u as useMemo, b a
 import { d as dist, _, L, J, t as Pn, F as Fn, x as $n, $ as $e, i as isDemo, p as En, u as useCallback, R as Rn, w as wn } from './index.module-c9811a48.js';
 import { j as jsonpointer } from './jsonpointer-388a7082.js';
 import { c as cjs } from './cjs-bdfb4486.js';
-import { g as getProps } from './utils-84b4b092.js';
+import { g as getProps } from './utils-334c1e34.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import './mixins-f750863a.js';
 import { G as GenericTableView } from './GenericTableView-e43d310f.js';
@@ -14,9 +14,8 @@ import { l as luxon } from './luxon-bbf75a9d.js';
 import { g as generateUserError } from './useReferralTable-909ccb28.js';
 import { a as INDIRECT_TAX_SPAIN_REGIONS, b as INDIRECT_TAX_PROVINCES, O as OtherRegionSlotView, I as InvoiceTableView, v as vatLabels, A as ADDRESS_REGIONS } from './IndirectTaxDetailsView-0a57b622.js';
 import { t as taxTypeToName, v as validTaxDocument, g as getCountryObj, L as LoadingView, f as formatErrorMessage, a as validateBillingField, o as objectIsFull } from './utils-6122971b.js';
-import { i as FORM_STEPS, a as TAX_FORM_CONTEXT_NAMESPACE, S as SORTED_COUNTRIES_NAMESPACE, c as USER_QUERY_NAMESPACE, T as TAX_CONTEXT_NAMESPACE, F as FINANCE_NETWORK_SETTINGS_NAMESPACE, U as USER_FORM_CONTEXT_NAMESPACE, d as COUNTRIES_QUERY_NAMESPACE, C as CURRENCIES_NAMESPACE } from './data-807686c2.js';
 import { b as VERIFICATION_EVENT_KEY } from './keys-406491dc.js';
-import { T as TAX_FORM_UPDATED_EVENT_KEY, a as useVeriffApp, g as getStatus, V as VERIFF_COMPLETE_EVENT_KEY } from './usePayoutStatus-42cc6a2c.js';
+import { i as FORM_STEPS, a as TAX_FORM_CONTEXT_NAMESPACE, S as SORTED_COUNTRIES_NAMESPACE, c as USER_QUERY_NAMESPACE, T as TAX_CONTEXT_NAMESPACE, F as FINANCE_NETWORK_SETTINGS_NAMESPACE, j as TAX_FORM_UPDATED_EVENT_KEY, U as USER_FORM_CONTEXT_NAMESPACE, d as COUNTRIES_QUERY_NAMESPACE, k as useVeriffApp, l as getStatus, V as VERIFF_COMPLETE_EVENT_KEY, C as CURRENCIES_NAMESPACE } from './data-acdb790f.js';
 
 function getFormMap({ props, getValidationErrorMessage, bankCountry, }) {
   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;
@@ -3709,9 +3708,6 @@ const style$5 = {
       backgroundColor: "var(--sl-color-red-100)",
       borderTop: "none",
     },
-    "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
-    },
   },
   WarningAlertContainer: {
     "&::part(base)": {
@@ -3719,9 +3715,6 @@ const style$5 = {
       borderTop: "none",
       maxWidth: "600px",
     },
-    "& sl-icon::part(base)": {
-      color: "var(--sl-color-warning-500)",
-    },
   },
   WarningHoldAlertContainer: {
     marginLeft: "-20px",
@@ -3729,9 +3722,10 @@ const style$5 = {
       maxWidth: "850px",
       border: "none",
       backgroundColor: "transparent",
+      color: "var(--sqm-text)",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-warning-500)",
+      color: "var(--sqm-warning-color-icon)",
     },
   },
   ErrorHoldAlertContainer: {
@@ -3740,9 +3734,10 @@ const style$5 = {
       maxWidth: "850px",
       border: "none",
       backgroundColor: "transparent",
+      color: "var(--sqm-text)",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
+      color: "var(--sqm-danger-color-icon)",
     },
   },
   ExpiringSoonAlertContainer: {
@@ -3765,7 +3760,7 @@ const style$5 = {
     display: "flex",
     gap: "var(--sl-spacing-x-small)",
     "&::part(base)": {
-      color: "var(--sl-color-green-500)",
+      color: "var(--sqm-text)",
     },
   },
   IndirectTaxPreviewDetails: {
@@ -3774,12 +3769,13 @@ const style$5 = {
     flexDirection: "column",
     lineHeight: "var(--sl-spacing-medium)",
     fontSize: "var(--sl-font-size-small)",
+    color: "var(--sqm-text-subdued)",
   },
   InvoiceTableContainer: {
     marginTop: "var(--sl-spacing-medium)",
   },
   NotRegisteredIndirectTaxText: {
-    color: "var(--sl-color-gray-500)",
+    color: "var(--sqm-text-subdued)",
   },
   TaxDocumentsContainer: {
     marginTop: "var(--sl-spacing-xx-large)",
@@ -3800,7 +3796,6 @@ const style$5 = {
     "& p": {
       margin: "0",
       paddingTop: "2px",
-      color: "var(--sl-color-gray-500)",
     },
   },
   StatusAlert: {
@@ -3835,7 +3830,7 @@ const style$5 = {
   },
   TaxDocSubtext: {
     margin: "0",
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
     lineHeight: "var(--sl-spacing-medium)",
     fontSize: "var(--sl-font-size-small)",
     marginLeft: "1px",
@@ -3856,13 +3851,13 @@ const style$5 = {
     gap: "6px",
   },
   DescriptionText: {
-    color: "var(--sl-color-gray-500)",
+    color: "var(--sqm-text-subdued)",
     fontSize: "var(--sl-font-size-x-small)",
     marginBottom: "none",
     maxWidth: "492px",
   },
   PageDescriptionText: {
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
     fontSize: "var(--sl-font-size-medium)",
     marginTop: "0",
   },
@@ -3893,9 +3888,53 @@ const style$5 = {
     },
   },
   DialogButton: { margin: "auto", width: "100%" },
+  SuccessBadge: {
+    "&::part(base)": {
+      textAlign: "center",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-success-color-icon)",
+    },
+  },
+  WarningBadge: {
+    "&::part(base)": {
+      textAlign: "center",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-warning-color-icon)",
+    },
+  },
+  ErrorBadge: {
+    "&::part(base)": {
+      textAlign: "center",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-danger-color-icon)",
+    },
+  },
+  SubduedText: {
+    color: "var(--sqm-text-subdued)",
+  },
 };
 const sheet$4 = createStyleSheet(style$5);
 const styleString$4 = sheet$4.toString();
+const vanillaStyle$3 = `
+    :host{
+      display: block;   
+    }
+
+    sl-button[type="secondary"]::part(base) {
+    font-family: var(--sqm-primary-font);
+      background-color: var(--sqm-secondary-button-background);
+      color: var(--sqm-secondary-button-color);
+      border-color: var(--sqm-secondary-button-color-border);
+      border-radius: var(--sqm-secondary-button-radius);
+    }
+
+    sl-button[type="secondary"]::part(base):hover {
+      background-color: var(--sqm-secondary-button-background-hover);
+      color: var(--sqm-secondary-button-color-hover);
+      border-color: var(--sqm-secondary-button-border-color-hover);
+    }
+    
+  `;
 const TaxAndCashDashboardView = (props) => {
   var _a;
   const { states, text, callbacks, slots } = props;
@@ -3912,7 +3951,7 @@ const TaxAndCashDashboardView = (props) => {
               termsAndConditions: (h("a", { target: "_blank", href: `https://terms.advocate.impact.com/PayoutTermsAndConditions.html` }, text.termsAndConditions)),
             }),
             button: (h("sl-button", { style: { marginTop: "var(--sl-spacing-x-small)" }, type: "default", onClick: callbacks.onNewFormClick }, text.w9RequiredButtonText)),
-            alertType: "info",
+            alertType: "warning",
             icon: "info-circle",
             class: sheet$4.classes.WarningHoldAlertContainer,
           };
@@ -4019,16 +4058,16 @@ const TaxAndCashDashboardView = (props) => {
   }
   const statusMap = {
     NOT_VERIFIED: (h("div", { class: sheet$4.classes.TaxFormDetailsContainer },
-      h("sl-badge", { type: "warning", pill: true }, text.statusTextNotVerified),
-      h("p", null, intl.formatMessage({
+      h("sl-badge", { class: sheet$4.classes.WarningBadge, type: "warning", pill: true }, text.statusTextNotVerified),
+      h("p", { class: sheet$4.classes.SubduedText }, intl.formatMessage({
         id: `badgeTextAwaitingReview`,
         defaultMessage: text.badgeTextAwaitingReview,
       }, {
         dateSubmitted: states.dateSubmitted,
       })))),
     ACTIVE: (h("div", { class: sheet$4.classes.TaxFormDetailsContainer },
-      h("sl-badge", { type: "success", pill: true }, text.statusTextActive),
-      h("p", null, intl.formatMessage({
+      h("sl-badge", { class: sheet$4.classes.SuccessBadge, type: "success", pill: true }, text.statusTextActive),
+      h("p", { class: sheet$4.classes.SubduedText }, intl.formatMessage({
         id: `badgeTextSubmittedOn`,
         defaultMessage: states.documentType === "W9"
           ? text.badgeTextSubmittedOn
@@ -4037,8 +4076,8 @@ const TaxAndCashDashboardView = (props) => {
         dateSubmitted: states.dateSubmitted,
       })))),
     INACTIVE: (h("div", { class: sheet$4.classes.TaxFormDetailsContainer },
-      h("sl-badge", { type: "danger", pill: true }, text.statusTextNotActive),
-      h("p", null, text.invalidForm))),
+      h("sl-badge", { class: sheet$4.classes.ErrorBadge, type: "danger", pill: true }, text.statusTextNotActive),
+      h("p", { class: sheet$4.classes.SubduedText }, text.invalidForm))),
     undefined: (h("div", { class: sheet$4.classes.TaxFormDetailsContainer },
       h("sl-badge", { type: "danger", pill: true }, text.statusTextRequired),
       h("p", null, intl.formatMessage({
@@ -4100,9 +4139,11 @@ const TaxAndCashDashboardView = (props) => {
   const alertInfo = getAlert(states.payoutStatus);
   return (h("div", null,
     h("div", null,
-      h("style", { type: "text/css" }, styleString$4),
+      h("style", { type: "text/css" },
+        styleString$4,
+        vanillaStyle$3),
       states.loadingError && (h("div", null,
-        h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true },
+        h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$4.classes.ErrorAlertContainer },
           h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
           h("strong", null, text.error.loadingErrorAlertHeader),
           h("br", null),
@@ -4122,8 +4163,7 @@ const TaxAndCashDashboardView = (props) => {
         }, {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         }))),
-      alertInfo && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", name: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.alertType, open: true, class: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.class },
-        h("sl-icon", { slot: "icon", name: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.icon }),
+      alertInfo && (h("sqm-form-message", { exportparts: "base: alert-base, icon:alert-icon", type: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.alertType, class: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.class, icon: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.icon, transparent: true },
         h("strong", null, alertInfo.header),
         h("p", { style: { margin: "0" } }, alertInfo.description),
         alertInfo.buttonText && (h("sl-button", { style: { marginTop: "var(--sl-spacing-x-small)" }, type: "default", loading: states.veriffLoading, onClick: () => callbacks.onVerifyClick() }, alertInfo.buttonText)),
@@ -4138,7 +4178,7 @@ const TaxAndCashDashboardView = (props) => {
         h("div", { class: sheet$4.classes.BankingInformationContainer },
           slots.payoutDetailsCardSlot,
           !states.loading && (h("p", { class: sheet$4.classes.DescriptionText }, text.payoutFromImpact)),
-          states.canEditPayoutInfo && (h("sl-button", { disabled: states.disabled || states.loading, type: "default", class: sheet$4.classes.EditBankDetailsButton, onClick: callbacks.onEditPayoutInfo }, text.editPaymentInformationButton)))),
+          states.canEditPayoutInfo && (h("sl-button", { disabled: states.disabled || states.loading, exportparts: "base: secondarybutton-base", type: "secondary", class: sheet$4.classes.EditBankDetailsButton, onClick: callbacks.onEditPayoutInfo }, text.editPaymentInformationButton)))),
       (!states.noFormNeeded || states.status === "NOT_VERIFIED") && (h("div", { class: sheet$4.classes.TaxDocumentsContainer },
         h("div", null, states.loading ? (h("div", { class: sheet$4.classes.TaxSectionSkeletonContainer },
           h("sl-skeleton", { class: sheet$4.classes.SkeletonOne }),
@@ -5781,7 +5821,7 @@ const style$6 = {
 };
 const sheet$5 = createStyleSheet(style$6);
 const styleString$5 = sheet$5.toString();
-const vanillaStyle$3 = `
+const vanillaStyle$4 = `
     :host{
       display: block;   
     }
@@ -5989,7 +6029,7 @@ const UserInfoFormView = (props) => {
   return (h("sl-form", { class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
     h("style", { type: "text/css" },
       styleString$5,
-      vanillaStyle$3),
+      vanillaStyle$4),
     states.loadingError && (h("div", null,
       h("sqm-form-message", { type: "error" },
         h("p", { part: "alert-title" }, text.error.loadingErrorAlertHeader),
@@ -6512,9 +6552,7 @@ const TaxForm = class {
   }
   render() {
     const props = isDemo() ? useDemoUserInfoForm(this) : useUserInfoForm(this);
-    return (h(UserInfoFormView, { data: props.data,
-      // @ts-ignore
-      states: props.states, callbacks: {
+    return (h(UserInfoFormView, { data: props.data, states: props.states, callbacks: {
         ...props.callbacks,
         onSubmit: props.onSubmit,
       }, text: props.text, refs: props.refs }));
@@ -6522,7 +6560,6 @@ const TaxForm = class {
 };
 function useDemoUserInfoForm(props) {
   const setStep = En(TAX_CONTEXT_NAMESPACE);
-  // @ts-ignore
   return cjs({
     setStep,
     onSubmit: async () => {

package/dist/esm/{sqm-base-registration-form-view-193f1721.js → sqm-base-registration-form-view-9e97d8b4.js}

@@ -38,6 +38,7 @@ sqm-portal-register {
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 function BaseRegistrationFormView(props) {
+  var _a, _b;
   const { states, content, callbacks } = props;
   return (h("div", { class: sheet.classes.Wrapper },
     h("style", { type: "text/css" },
@@ -45,9 +46,8 @@ function BaseRegistrationFormView(props) {
       styleString),
     h(TextSpanView, { type: "h3" }, content.pageLabel),
     h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.handleEmailSubmit, novalidate: true },
-      states.error && (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
-        h("div", { part: "erroralert-text" }, props.states.error))),
-      h("sl-input", { exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", required: true, validationError: ({ value }) => {
+      content.formData,
+      h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", required: true, validationError: ({ value }) => {
           if (!value) {
             return content.requiredFieldErrorMessage;
           }
@@ -55,7 +55,13 @@ function BaseRegistrationFormView(props) {
           if (!value.includes("@")) {
             return content.invalidEmailErrorMessage;
           }
-        } }),
+        } }, (((_a = states === null || states === void 0 ? void 0 : states.validationErrors) === null || _a === void 0 ? void 0 : _a.email) ? {
+        class: sheet.classes.ErrorStyle,
+        helpText: ((_b = states === null || states === void 0 ? void 0 : states.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ||
+          content.requiredFieldErrorMessage,
+      }
+        : []))),
+      content.terms,
       h("div", { class: sheet.classes.ButtonsContainer },
         h("sl-button", { submit: true, exportparts: "base: primarybutton-base", type: "primary", style: { margin: "0" } }, content.submitLabel || "Register"),
         h("sl-menu-divider", { style: { margin: "0" } }),