@saasquatch/mint-components 1.15.0-98 → 1.16.0-0

package/dist/collection/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard-view.js

@@ -1,24 +1,52 @@
 import { h } from "@stencil/core";
 import { intl } from "../../../global/global";
 import { createStyleSheet } from "../../../styling/JSS";
-import { capitalizeFirstLetter } from "../../../utils/utils";
 const style = {
-  DangerBadge: {
+  ErrorAlertContainer: {
     "&::part(base)": {
-      backgroundColor: "var(--sqm-danger-color-icon)",
-      color: "var(--sl-color-white)",
+      backgroundColor: "var(--sl-color-red-100)",
+      borderTop: "none",
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-danger-500)",
+    },
+  },
+  WarningAlertContainer: {
+    "&::part(base)": {
+      backgroundColor: "var(--sl-color-yellow-100)",
+      borderTop: "none",
+      maxWidth: "600px",
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-warning-500)",
+    },
+  },
+  WarningHoldAlertContainer: {
+    marginLeft: "-20px",
+    "&::part(base)": {
+      maxWidth: "850px",
+      border: "none",
+      backgroundColor: "transparent",
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-warning-500)",
     },
   },
-  SuccessBadge: {
+  ErrorHoldAlertContainer: {
+    marginLeft: "-20px",
     "&::part(base)": {
-      backgroundColor: "var(--sqm-success-color-icon)",
-      color: "var(--sl-color-white)",
+      maxWidth: "850px",
+      border: "none",
+      backgroundColor: "transparent",
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-danger-500)",
     },
   },
-  WarningBadge: {
+  ExpiringSoonAlertContainer: {
     "&::part(base)": {
-      backgroundColor: "var(--sqm-warning-color-icon)",
-      color: "var(--sl-color-white)",
+      backgroundColor: "var(--sl-color-yellow-100)",
+      borderTop: "none",
     },
   },
   BankingInformationContainer: {
@@ -26,7 +54,7 @@ const style = {
   },
   IndirectTaxPreviewContainer: {
     marginTop: "var(--sl-spacing-x-large)",
-    borderTop: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
+    borderTop: "1px solid var(--sl-color-neutral-200)",
   },
   IndirectTaxPreviewHeaderContainer: {
     marginTop: "var(--sl-spacing-large)",
@@ -35,7 +63,7 @@ const style = {
     display: "flex",
     gap: "var(--sl-spacing-x-small)",
     "&::part(base)": {
-      color: "var(--sqm-success-color-text)",
+      color: "var(--sl-color-green-500)",
     },
   },
   IndirectTaxPreviewDetails: {
@@ -49,11 +77,11 @@ const style = {
     marginTop: "var(--sl-spacing-medium)",
   },
   NotRegisteredIndirectTaxText: {
-    color: "var(--sqm-text-subdued)",
+    color: "var(--sl-color-gray-500)",
   },
   TaxDocumentsContainer: {
     marginTop: "var(--sl-spacing-xx-large)",
-    borderTop: "1px solid var(--sqm-border-color)",
+    borderTop: "1px solid var(--sl-color-neutral-200)",
   },
   TaxDocumentsSectionHeaderContainer: {
     marginTop: "var(--sl-spacing-x-large)",
@@ -70,7 +98,7 @@ const style = {
     "& p": {
       margin: "0",
       paddingTop: "2px",
-      color: "var(--sqm-text-subdued)",
+      color: "var(--sl-color-gray-500)",
     },
   },
   StatusAlert: {
@@ -105,7 +133,7 @@ const style = {
   },
   TaxDocSubtext: {
     margin: "0",
-    color: "var(--sqm-text-subdued)",
+    color: "var(--sl-color-neutral-500)",
     lineHeight: "var(--sl-spacing-medium)",
     fontSize: "var(--sl-font-size-small)",
     marginLeft: "1px",
@@ -126,66 +154,28 @@ const style = {
     gap: "6px",
   },
   DescriptionText: {
-    color: "var(--sqm-text-subdued)",
+    color: "var(--sl-color-gray-500)",
     fontSize: "var(--sl-font-size-x-small)",
     marginBottom: "none",
     maxWidth: "492px",
   },
   PageDescriptionText: {
-    color: "var(--sqm-text-subdued)",
+    color: "var(--sl-color-neutral-500)",
     fontSize: "var(--sl-font-size-medium)",
     marginTop: "0",
   },
-  WarningButton: {
-    "&::part(base)": {
-      marginTop: "20px",
-      borderColor: "var(--sqm-warning-color-border)",
-      color: "var(--sqm-warning-color-text)",
-      background: "var(--sqm-warning-color-background)",
-      "&:hover": {
-        background: "var(--sqm-warning-color-icon)",
-      },
-    },
-  },
-  ErrorButton: {
-    "&::part(base)": {
-      marginTop: "20px",
-      borderColor: "var(--sqm-danger-color-border)",
-      color: "var(--sqm-danger-color-text)",
-      background: "var(--sqm-danger-color-background)",
-      "&:hover": {
-        background: "var(--sqm-danger-color-icon)",
-      },
-    },
-  },
-  SuccessButton: {
-    "&::part(base)": {
-      marginTop: "20px",
-      borderColor: "var(--sqm-success-color-border)",
-      color: "var(--sqm-success-color-text)",
-      background: "var(--sqm-success-color-background)",
-      "&:hover": {
-        background: "var(--sqm-success-color-icon)",
-      },
-    },
-  },
   Dialog: {
     "&::part(panel)": {
       maxWidth: "420px",
     },
-    "&::part(header)": {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      paddingTop: "var(--sl-spacing-large)",
-    },
     "&::part(close-button)": {
       marginBottom: "var(--sl-spacing-xx-large)",
     },
     "&::part(title)": {
-      fontSize: "var(--sl-font-size-large)",
+      fontSize: "var(--sl-font-size-x-large)",
       fontWeight: "600",
-      padding: "0px var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
+      marginTop: "var(--sl-spacing-xxx-large)",
+      padding: "var(--sl-spacing-x-large) var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
     },
     "&::part(body)": {
       padding: "0 var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
@@ -202,16 +192,6 @@ const style = {
   },
   DialogButton: { margin: "auto", width: "100%" },
 };
-const vanillaStyle = `
-  * {
-    font-family: var(--sqm-primary-font);
-    }
-  a {
-    color: inherit;
-    text-decoration: underline;
-    cursor: pointer;
-  }
-`;
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export const TaxAndCashDashboardView = (props) => {
@@ -219,6 +199,15 @@ export const TaxAndCashDashboardView = (props) => {
   const { states, text, callbacks, slots } = props;
   function getAlert(status) {
     switch (status) {
+      case "OVER_W9_THRESHOLD":
+        return {
+          header: text.w9RequiredHeader,
+          description: text.w9RequiredDescription,
+          button: (h("sl-button", { style: { marginTop: "var(--sl-spacing-x-small)" }, type: "default", onClick: callbacks.onNewFormClick }, text.w9RequiredButtonText)),
+          alertType: "info",
+          icon: "info-circle",
+          class: sheet.classes.WarningHoldAlertContainer,
+        };
       case "VERIFICATION:REQUIRED":
         return {
           header: text.verificationRequiredHeader,
@@ -230,6 +219,8 @@ export const TaxAndCashDashboardView = (props) => {
           }),
           buttonText: text.verificationRequiredButtonText,
           alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet.classes.WarningHoldAlertContainer,
         };
       case "VERIFICATION:INTERNAL":
         return {
@@ -241,6 +232,8 @@ export const TaxAndCashDashboardView = (props) => {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet.classes.WarningHoldAlertContainer,
         };
       case "VERIFICATION:REVIEW":
         return {
@@ -252,6 +245,8 @@ export const TaxAndCashDashboardView = (props) => {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet.classes.WarningHoldAlertContainer,
         };
       case "VERIFICATION:FAILED":
         return {
@@ -262,7 +257,9 @@ export const TaxAndCashDashboardView = (props) => {
           }, {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
-          alertType: "error",
+          alertType: "critical",
+          icon: "exclamation-octagon",
+          class: sheet.classes.ErrorHoldAlertContainer,
         };
       case "HOLD":
         return {
@@ -275,6 +272,8 @@ export const TaxAndCashDashboardView = (props) => {
           }),
           buttonText: null,
           alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet.classes.WarningHoldAlertContainer,
         };
       default:
         return;
@@ -282,7 +281,7 @@ export const TaxAndCashDashboardView = (props) => {
   }
   const statusMap = {
     NOT_VERIFIED: (h("div", { class: sheet.classes.TaxFormDetailsContainer },
-      h("sl-badge", { class: sheet.classes.WarningBadge, type: "warning", pill: true }, text.statusTextNotVerified),
+      h("sl-badge", { type: "warning", pill: true }, text.statusTextNotVerified),
       h("p", null, intl.formatMessage({
         id: `badgeTextAwaitingReview`,
         defaultMessage: text.badgeTextAwaitingReview,
@@ -290,7 +289,7 @@ export const TaxAndCashDashboardView = (props) => {
         dateSubmitted: states.dateSubmitted,
       })))),
     ACTIVE: (h("div", { class: sheet.classes.TaxFormDetailsContainer },
-      h("sl-badge", { class: sheet.classes.SuccessBadge, type: "success", pill: true }, text.statusTextActive),
+      h("sl-badge", { type: "success", pill: true }, text.statusTextActive),
       h("p", null, intl.formatMessage({
         id: `badgeTextSubmittedOn`,
         defaultMessage: states.documentType === "W9"
@@ -300,12 +299,21 @@ export const TaxAndCashDashboardView = (props) => {
         dateSubmitted: states.dateSubmitted,
       })))),
     INACTIVE: (h("div", { class: sheet.classes.TaxFormDetailsContainer },
-      h("sl-badge", { class: sheet.classes.DangerBadge, type: "danger", pill: true }, text.statusTextNotActive),
+      h("sl-badge", { type: "danger", pill: true }, text.statusTextNotActive),
       h("p", null, text.invalidForm))),
+    undefined: (h("div", { class: sheet.classes.TaxFormDetailsContainer },
+      h("sl-badge", { type: "danger", pill: true }, text.statusTextRequired),
+      h("p", null, intl.formatMessage({
+        id: `requiredTaxForm`,
+        defaultMessage: text.requiredTaxForm,
+      }, {
+        taxFormType: states.documentType,
+      })))),
   };
   const alertMap = {
-    INACTIVE: (h("sqm-form-message", { type: "error" },
-      h("p", { part: "alert-title" }, intl.formatMessage({
+    INACTIVE: (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet.classes.ErrorAlertContainer },
+      h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+      h("strong", null, intl.formatMessage({
         id: `taxAlertHeaderNotActive`,
         defaultMessage: states.documentType === "W9"
           ? text.taxAlertHeaderNotActiveW9
@@ -313,6 +321,7 @@ export const TaxAndCashDashboardView = (props) => {
       }, {
         documentType: states.documentTypeString,
       })),
+      h("br", null),
       intl.formatMessage({
         id: `taxAlertMessage`,
         defaultMessage: states.documentType === "W9"
@@ -350,35 +359,41 @@ export const TaxAndCashDashboardView = (props) => {
       });
     }
   };
-  const alert = getAlert(states.payoutStatus);
+  const alertInfo = getAlert(states.payoutStatus);
   return (h("div", null,
     h("div", null,
       h("style", { type: "text/css" }, styleString),
-      h("style", { type: "text/css" }, vanillaStyle),
-      states.loadingError && (h("sqm-form-message", { type: "error" },
-        h("p", { part: "alert-title" }, text.error.loadingErrorAlertHeader),
-        intl.formatMessage({
-          id: "loadingErrorAlertDescription",
-          defaultMessage: text.error.loadingErrorAlertDescription,
-        }, {
-          supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
-        }))),
-      ((_a = states.errors) === null || _a === void 0 ? void 0 : _a.general) && (h("sqm-form-message", { type: "error" },
-        h("p", { part: "alert-title" }, text.error.generalTitle),
+      states.loadingError && (h("div", null,
+        h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet.classes.ErrorAlertContainer },
+          h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+          h("strong", null, text.error.loadingErrorAlertHeader),
+          h("br", null),
+          intl.formatMessage({
+            id: "loadingErrorAlertDescription",
+            defaultMessage: text.error.loadingErrorAlertDescription,
+          }, {
+            supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          })))),
+      ((_a = states.errors) === null || _a === void 0 ? void 0 : _a.general) && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet.classes.ErrorAlertContainer },
+        h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+        h("strong", null, text.error.generalTitle),
+        h("br", null),
         intl.formatMessage({
           id: "generalDescription",
           defaultMessage: text.error.generalDescription,
         }, {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         }))),
-      alert && (h("sqm-form-message", { type: alert.alertType },
-        h("p", { part: "alert-title" }, alert.header),
-        h("p", { part: "alert-description" }, alert.description),
-        alert.buttonText && (h("sl-button", { class: sheet.classes[`${capitalizeFirstLetter(alert.alertType)}Button`], loading: states.veriffLoading, onClick: () => callbacks.onVerifyClick() }, alert.buttonText)))),
+      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 }),
+        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)),
+        alertInfo.button ? (alertInfo.button) : (h("div", { style: { display: "none" } })))),
       h("sl-dialog", { label: text.replaceTaxFormModalHeader, class: sheet.classes.Dialog, open: states.showNewFormDialog, "onSl-hide": callbacks.onNewFormCancel },
         h("p", null, text.replaceTaxFormModalBodyText),
-        h("sl-button", { slot: "footer", type: "primary", exportparts: "base: primarybutton-base", class: sheet.classes.DialogButton, onClick: callbacks.onNewFormClick }, text.newFormButton),
-        h("sl-button", { slot: "footer", type: "secondary", exportparts: "base: secondarybutton-base", class: sheet.classes.DialogButton, onClick: callbacks.onNewFormCancel }, text.cancelButton)),
+        h("sl-button", { slot: "footer", type: "primary", class: sheet.classes.DialogButton, onClick: callbacks.onNewFormClick }, text.newFormButton),
+        h("sl-button", { slot: "footer", type: "default", class: sheet.classes.DialogButton, onClick: callbacks.onNewFormCancel }, text.cancelButton)),
       states.status === "INACTIVE" && alertMap[states.status],
       h("div", null,
         h("h3", { style: { marginBottom: "0" } }, text.bankingInformationSectionHeader),
@@ -386,13 +401,11 @@ export const TaxAndCashDashboardView = (props) => {
         h("div", { class: sheet.classes.BankingInformationContainer },
           slots.payoutDetailsCardSlot,
           !states.loading && (h("p", { class: sheet.classes.DescriptionText }, text.payoutFromImpact)),
-          states.canEditPayoutInfo && (h("sl-button", { disabled: states.disabled || states.loading, type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onEditPayoutInfo }, text.editPaymentInformationButton)))),
+          states.canEditPayoutInfo && (h("sl-button", { disabled: states.disabled || states.loading, type: "default", class: sheet.classes.EditBankDetailsButton, onClick: callbacks.onEditPayoutInfo }, text.editPaymentInformationButton)))),
       h("div", { class: sheet.classes.TaxDocumentsContainer },
         h("div", null, states.loading ? (h("div", { class: sheet.classes.TaxSectionSkeletonContainer },
           h("sl-skeleton", { class: sheet.classes.SkeletonOne }),
-          h("sl-skeleton", { class: sheet.classes.SkeletonTwo }))) : (h("div", null, states.noFormNeeded ? (h("div", null,
-          h("h3", { class: sheet.classes.TaxDocumentsSectionHeaderContainer }, text.taxDocumentSectionHeader),
-          h("p", { class: sheet.classes.TaxDocSubtext }, text.noFormNeededSubtext))) : (h("div", null,
+          h("sl-skeleton", { class: sheet.classes.SkeletonTwo }))) : (h("div", null, !states.noFormNeeded && (h("div", null,
           h("span", { class: sheet.classes.TaxFormDetailsContainer },
             h("div", { class: sheet.classes.StatusContainer },
               h("h3", null, intl.formatMessage({
@@ -402,7 +415,7 @@ export const TaxAndCashDashboardView = (props) => {
                 documentType: states.documentTypeString,
               })),
               h("span", { class: sheet.classes.StatusAlert }, statusMap[states.status]))),
-          states.status !== "NOT_VERIFIED" && (h("sl-button", { style: { marginTop: "20px" }, disabled: states.disabled || states.loading, onClick: callbacks.onClick, type: "primary", exportparts: "base: primarybutton-base" }, text.newFormButton)))))))),
+          states.status !== "NOT_VERIFIED" && (h("sl-button", { disabled: states.disabled || states.loading, onClick: callbacks.onClick, type: "default", class: sheet.classes.NewFormButton, exportparts: "base: primarybutton-base" }, text.newFormButton)))))))),
       h("div", { class: sheet.classes.IndirectTaxPreviewContainer }, states.loading ? (h("div", { class: sheet.classes.TaxSectionSkeletonContainer },
         h("sl-skeleton", { class: sheet.classes.SkeletonOne }),
         h("sl-skeleton", { class: sheet.classes.SkeletonTwo }))) : (h("div", null,