@saasquatch/mint-components 2.0.0-8 → 2.0.0

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

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a43a63b4.js');
-const global = require('./global-8bba5b3a.js');
+const global = require('./global-39cb0afc.js');
 const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
 const index_module = require('./index.module-4f54e412.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
 const cjs = require('./cjs-1066ec21.js');
-const utils = require('./utils-0d3ac0fb.js');
+const utils = require('./utils-6847bc06.js');
 const JSS = require('./JSS-8503a151.js');
 require('./mixins-4761d472.js');
 const GenericTableView = require('./GenericTableView-a9845e80.js');
@@ -16,11 +16,10 @@ const reRender = require('./re-render-d516138a.js');
 const useChildElements = require('./useChildElements-966c9041.js');
 const luxon = require('./luxon-949beaf2.js');
 const useReferralTable = require('./useReferralTable-90d4d6e9.js');
-const IndirectTaxDetailsView = require('./IndirectTaxDetailsView-e5f70b8b.js');
-const utils$1 = require('./utils-83d125fa.js');
-const data = require('./data-88adb95b.js');
+const IndirectTaxDetailsView = require('./IndirectTaxDetailsView-3e88d710.js');
+const utils$1 = require('./utils-ac82f977.js');
 const keys = require('./keys-cff24974.js');
-const usePayoutStatus = require('./usePayoutStatus-fe32dd1a.js');
+const data = require('./data-16106637.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;
@@ -1032,7 +1031,7 @@ function useBankingInfoForm(props) {
         return;
       }
       // Fire form change event
-      window.dispatchEvent(new Event(usePayoutStatus.TAX_FORM_UPDATED_EVENT_KEY));
+      window.dispatchEvent(new Event(data.TAX_FORM_UPDATED_EVENT_KEY));
       await refetch();
       setStep("/dashboard");
     }
@@ -1770,7 +1769,7 @@ function useDocusignForm(props) {
       if (!result.completeImpactPublisherTaxDocument.success)
         throw new Error();
       // Fire form change event
-      window.dispatchEvent(new Event(usePayoutStatus.TAX_FORM_UPDATED_EVENT_KEY));
+      window.dispatchEvent(new Event(data.TAX_FORM_UPDATED_EVENT_KEY));
       setShowExitButton(true);
     }
     catch (e) {
@@ -2676,7 +2675,7 @@ function useIndirectTaxForm(props) {
         .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 = utils$1.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(usePayoutStatus.TAX_FORM_UPDATED_EVENT_KEY));
+      window.dispatchEvent(new Event(data.TAX_FORM_UPDATED_EVENT_KEY));
       if ((resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.requiredTaxDocumentType) &&
         !hasValidCurrentDocument) {
         // Go to docusign form
@@ -3713,9 +3712,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)": {
@@ -3723,9 +3719,6 @@ const style$5 = {
       borderTop: "none",
       maxWidth: "600px",
     },
-    "& sl-icon::part(base)": {
-      color: "var(--sl-color-warning-500)",
-    },
   },
   WarningHoldAlertContainer: {
     marginLeft: "-20px",
@@ -3733,9 +3726,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: {
@@ -3744,9 +3738,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: {
@@ -3769,7 +3764,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: {
@@ -3778,12 +3773,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)",
@@ -3804,7 +3800,6 @@ const style$5 = {
     "& p": {
       margin: "0",
       paddingTop: "2px",
-      color: "var(--sl-color-gray-500)",
     },
   },
   StatusAlert: {
@@ -3839,7 +3834,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",
@@ -3860,13 +3855,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",
   },
@@ -3897,9 +3892,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 = JSS.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;
@@ -3916,7 +3955,7 @@ const TaxAndCashDashboardView = (props) => {
               termsAndConditions: (index.h("a", { target: "_blank", href: `https://terms.advocate.impact.com/PayoutTermsAndConditions.html` }, text.termsAndConditions)),
             }),
             button: (index.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,
           };
@@ -4023,16 +4062,16 @@ const TaxAndCashDashboardView = (props) => {
   }
   const statusMap = {
     NOT_VERIFIED: (index.h("div", { class: sheet$4.classes.TaxFormDetailsContainer },
-      index.h("sl-badge", { type: "warning", pill: true }, text.statusTextNotVerified),
-      index.h("p", null, global.intl.formatMessage({
+      index.h("sl-badge", { class: sheet$4.classes.WarningBadge, type: "warning", pill: true }, text.statusTextNotVerified),
+      index.h("p", { class: sheet$4.classes.SubduedText }, global.intl.formatMessage({
         id: `badgeTextAwaitingReview`,
         defaultMessage: text.badgeTextAwaitingReview,
       }, {
         dateSubmitted: states.dateSubmitted,
       })))),
     ACTIVE: (index.h("div", { class: sheet$4.classes.TaxFormDetailsContainer },
-      index.h("sl-badge", { type: "success", pill: true }, text.statusTextActive),
-      index.h("p", null, global.intl.formatMessage({
+      index.h("sl-badge", { class: sheet$4.classes.SuccessBadge, type: "success", pill: true }, text.statusTextActive),
+      index.h("p", { class: sheet$4.classes.SubduedText }, global.intl.formatMessage({
         id: `badgeTextSubmittedOn`,
         defaultMessage: states.documentType === "W9"
           ? text.badgeTextSubmittedOn
@@ -4041,8 +4080,8 @@ const TaxAndCashDashboardView = (props) => {
         dateSubmitted: states.dateSubmitted,
       })))),
     INACTIVE: (index.h("div", { class: sheet$4.classes.TaxFormDetailsContainer },
-      index.h("sl-badge", { type: "danger", pill: true }, text.statusTextNotActive),
-      index.h("p", null, text.invalidForm))),
+      index.h("sl-badge", { class: sheet$4.classes.ErrorBadge, type: "danger", pill: true }, text.statusTextNotActive),
+      index.h("p", { class: sheet$4.classes.SubduedText }, text.invalidForm))),
     undefined: (index.h("div", { class: sheet$4.classes.TaxFormDetailsContainer },
       index.h("sl-badge", { type: "danger", pill: true }, text.statusTextRequired),
       index.h("p", null, global.intl.formatMessage({
@@ -4104,9 +4143,11 @@ const TaxAndCashDashboardView = (props) => {
   const alertInfo = getAlert(states.payoutStatus);
   return (index.h("div", null,
     index.h("div", null,
-      index.h("style", { type: "text/css" }, styleString$4),
+      index.h("style", { type: "text/css" },
+        styleString$4,
+        vanillaStyle$3),
       states.loadingError && (index.h("div", null,
-        index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true },
+        index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$4.classes.ErrorAlertContainer },
           index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
           index.h("strong", null, text.error.loadingErrorAlertHeader),
           index.h("br", null),
@@ -4126,8 +4167,7 @@ const TaxAndCashDashboardView = (props) => {
         }, {
           supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         }))),
-      alertInfo && (index.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 },
-        index.h("sl-icon", { slot: "icon", name: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.icon }),
+      alertInfo && (index.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 },
         index.h("strong", null, alertInfo.header),
         index.h("p", { style: { margin: "0" } }, alertInfo.description),
         alertInfo.buttonText && (index.h("sl-button", { style: { marginTop: "var(--sl-spacing-x-small)" }, type: "default", loading: states.veriffLoading, onClick: () => callbacks.onVerifyClick() }, alertInfo.buttonText)),
@@ -4142,7 +4182,7 @@ const TaxAndCashDashboardView = (props) => {
         index.h("div", { class: sheet$4.classes.BankingInformationContainer },
           slots.payoutDetailsCardSlot,
           !states.loading && (index.h("p", { class: sheet$4.classes.DescriptionText }, text.payoutFromImpact)),
-          states.canEditPayoutInfo && (index.h("sl-button", { disabled: states.disabled || states.loading, type: "default", class: sheet$4.classes.EditBankDetailsButton, onClick: callbacks.onEditPayoutInfo }, text.editPaymentInformationButton)))),
+          states.canEditPayoutInfo && (index.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") && (index.h("div", { class: sheet$4.classes.TaxDocumentsContainer },
         index.h("div", null, states.loading ? (index.h("div", { class: sheet$4.classes.TaxSectionSkeletonContainer },
           index.h("sl-skeleton", { class: sheet$4.classes.SkeletonOne }),
@@ -4252,7 +4292,7 @@ const useTaxAndCashDashboard = (props) => {
   const setStep = index_module.En(data.TAX_CONTEXT_NAMESPACE);
   const setContext = index_module.En(data.TAX_FORM_CONTEXT_NAMESPACE);
   const [showDialog, setShowDialog] = domContextHooks_module.useState(false);
-  const { render, loading: veriffLoading, errors: veriffErrors, } = usePayoutStatus.useVeriffApp();
+  const { render, loading: veriffLoading, errors: veriffErrors, } = data.useVeriffApp();
   const { data: taxSettingRes } = index_module.wn(GET_TAX_SETTING, {});
   const locale = index_module.L();
   domContextHooks_module.useEffect(() => {
@@ -4286,12 +4326,12 @@ const useTaxAndCashDashboard = (props) => {
     setStep("/3");
   };
   const provinceName = (_d = IndirectTaxDetailsView.INDIRECT_TAX_PROVINCES.find((p) => { var _a; return p.regionCode === ((_a = publisher === null || publisher === void 0 ? void 0 : publisher.taxInformation) === null || _a === void 0 ? void 0 : _a.indirectTaxRegion); })) === null || _d === void 0 ? void 0 : _d.displayName;
-  const payoutStatus = data$1 ? usePayoutStatus.getStatus(data$1) : null;
+  const payoutStatus = data$1 ? data.getStatus(data$1) : null;
   domContextHooks_module.useEffect(() => {
     const cb = () => refetch();
-    window.addEventListener(usePayoutStatus.VERIFF_COMPLETE_EVENT_KEY, cb);
+    window.addEventListener(data.VERIFF_COMPLETE_EVENT_KEY, cb);
     return () => {
-      window.removeEventListener(usePayoutStatus.VERIFF_COMPLETE_EVENT_KEY, cb);
+      window.removeEventListener(data.VERIFF_COMPLETE_EVENT_KEY, cb);
     };
   }, []);
   const enforceUsTaxComplianceOption = (_e = taxSettingRes === null || taxSettingRes === void 0 ? void 0 : taxSettingRes.tenantSettings) === null || _e === void 0 ? void 0 : _e.enforceUsTaxCompliance;
@@ -4693,7 +4733,6 @@ const TaxAndCashDashboard = class {
   }
 };
 function useDemoTaxAndCashDashboard(props) {
-  console.log("dashboard", { props });
   // @ts-ignore
   return cjs.cjs({
     states: {
@@ -5786,7 +5825,7 @@ const style$6 = {
 };
 const sheet$5 = JSS.createStyleSheet(style$6);
 const styleString$5 = sheet$5.toString();
-const vanillaStyle$3 = `
+const vanillaStyle$4 = `
     :host{
       display: block;   
     }
@@ -5994,7 +6033,7 @@ const UserInfoFormView = (props) => {
   return (index.h("sl-form", { class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
     index.h("style", { type: "text/css" },
       styleString$5,
-      vanillaStyle$3),
+      vanillaStyle$4),
     states.loadingError && (index.h("div", null,
       index.h("sqm-form-message", { type: "error" },
         index.h("p", { part: "alert-title" }, text.error.loadingErrorAlertHeader),
@@ -6517,9 +6556,7 @@ const TaxForm = class {
   }
   render() {
     const props = index_module.isDemo() ? useDemoUserInfoForm(this) : useUserInfoForm(this);
-    return (index.h(UserInfoFormView, { data: props.data,
-      // @ts-ignore
-      states: props.states, callbacks: {
+    return (index.h(UserInfoFormView, { data: props.data, states: props.states, callbacks: {
         ...props.callbacks,
         onSubmit: props.onSubmit,
       }, text: props.text, refs: props.refs }));
@@ -6527,7 +6564,6 @@ const TaxForm = class {
 };
 function useDemoUserInfoForm(props) {
   const setStep = index_module.En(data.TAX_CONTEXT_NAMESPACE);
-  // @ts-ignore
   return cjs.cjs({
     setStep,
     onSubmit: async () => {

package/dist/cjs/{sqm-base-registration-form-view-8847804c.js → sqm-base-registration-form-view-69a4b615.js}

@@ -40,6 +40,7 @@ sqm-portal-register {
 const sheet = JSS.createStyleSheet(style);
 const styleString = sheet.toString();
 function BaseRegistrationFormView(props) {
+  var _a, _b;
   const { states, content, callbacks } = props;
   return (index.h("div", { class: sheet.classes.Wrapper },
     index.h("style", { type: "text/css" },
@@ -47,9 +48,8 @@ function BaseRegistrationFormView(props) {
       styleString),
     index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, content.pageLabel),
     index.h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.handleEmailSubmit, novalidate: true },
-      states.error && (index.h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
-        index.h("div", { part: "erroralert-text" }, props.states.error))),
-      index.h("sl-input", { exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", required: true, validationError: ({ value }) => {
+      content.formData,
+      index.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;
           }
@@ -57,7 +57,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,
       index.h("div", { class: sheet.classes.ButtonsContainer },
         index.h("sl-button", { submit: true, exportparts: "base: primarybutton-base", type: "primary", style: { margin: "0" } }, content.submitLabel || "Register"),
         index.h("sl-menu-divider", { style: { margin: "0" } }),