@saasquatch/mint-components 2.0.6 → 2.0.8-0

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

@@ -3779,6 +3779,7 @@ const style$5 = {
     marginBottom: "var(--sl-spacing-xx-small)",
     margin: "0",
     display: "flex",
+    alignItems: "center",
     gap: "var(--sl-spacing-x-small)",
     "&::part(base)": {
       color: "var(--sqm-text)",
@@ -3860,6 +3861,9 @@ const style$5 = {
     display: "flex",
     textAlign: "center",
     width: "250px",
+    "&::part(body)": {
+      pointerEvents: "auto",
+    },
   },
   ToolTip: {
     top: "6px",
@@ -3938,6 +3942,43 @@ const style$5 = {
     gap: "var(--sl-spacing-medium)",
     flexWrap: "wrap",
   },
+  DropdownTooltipContainer: {
+    top: "-4px",
+    "&::part(panel)": {
+      boxShadow: "none",
+      border: "none",
+      marginTop: "var(--sl-spacing-x-small)",
+    },
+  },
+  DropdownContent: {
+    padding: "var(--sl-spacing-xxx-small) var(--sl-spacing-x-small)",
+    fontSize: "var(--sl-font-size-small)",
+    fontFamily: "var(--sl-font-sans)",
+    fontWeight: "var(--sl-font-weight-normal)",
+    lineHeight: "var(--sl-line-height-dense)",
+    minWidth: "225px",
+    backgroundColor: "var(--sl-color-gray-900)",
+    color: "var(--sl-color-white)",
+    borderRadius: "var(--sl-border-radius-medium)",
+    position: "relative",
+    marginLeft: "5px",
+  },
+  DropdownArrow: {
+    position: "absolute",
+    left: "-5px",
+    top: "50%",
+    transform: "translateY(-50%)",
+    width: "0",
+    height: "0",
+    borderTop: "5px solid transparent",
+    borderBottom: "5px solid transparent",
+    borderRight: "5px solid var(--sl-color-gray-900)",
+    zIndex: "1",
+  },
+  DropdownLink: {
+    color: "var(--sl-color-white)",
+    textDecoration: "underline",
+  },
 };
 const sheet$4 = JSS.createStyleSheet(style$5);
 const styleString$4 = sheet$4.toString();
@@ -4253,6 +4294,34 @@ const TaxAndCashDashboardView = (props) => {
     }
   };
   const alertInfo = getAlert(states.payoutStatus);
+  const dropdownHover = (el) => {
+    var _a;
+    if (!el)
+      return;
+    const trigger = el.querySelector('[slot="trigger"]');
+    const panel = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".dropdown__panel");
+    if (!trigger || !panel)
+      return;
+    let hideTimeout;
+    const show = () => {
+      clearTimeout(hideTimeout);
+      el.show();
+    };
+    const scheduleHide = () => {
+      hideTimeout = setTimeout(() => el.hide(), 100);
+    };
+    trigger.addEventListener("mouseenter", show);
+    trigger.addEventListener("mouseleave", scheduleHide);
+    panel.addEventListener("mouseenter", show);
+    panel.addEventListener("mouseleave", scheduleHide);
+    return () => {
+      trigger.removeEventListener("mouseenter", show);
+      trigger.removeEventListener("mouseleave", scheduleHide);
+      panel.removeEventListener("mouseenter", show);
+      panel.removeEventListener("mouseleave", scheduleHide);
+      clearTimeout(hideTimeout);
+    };
+  };
   return (index.h("div", null,
     index.h("div", null,
       index.h("style", { type: "text/css" },
@@ -4316,8 +4385,16 @@ const TaxAndCashDashboardView = (props) => {
         index.h("sl-skeleton", { class: sheet$4.classes.SkeletonTwo }))) : (index.h("div", null,
         index.h("h3", { class: sheet$4.classes.IndirectTaxPreviewHeaderContainer },
           text.indirectTaxInfoSectionHeader,
-          index.h("sl-tooltip", { trigger: "hover", placement: "right", content: text.indirectTaxTooltipSupport, class: sheet$4.classes.TooltipContainer },
-            index.h("sl-icon", { name: "info-circle", class: sheet$4.classes.ToolTip }))),
+          index.h("sl-dropdown", { placement: "right", distance: 1, ref: dropdownHover, class: sheet$4.classes.DropdownTooltipContainer },
+            index.h("sl-icon", { slot: "trigger", name: "info-circle", class: sheet$4.classes.ToolTip, style: { cursor: "pointer" } }),
+            index.h("div", { class: sheet$4.classes.DropdownContent },
+              index.h("div", { class: sheet$4.classes.DropdownArrow }),
+              global.intl.formatMessage({
+                id: "indirectTaxTooltipSupport",
+                defaultMessage: text.indirectTaxTooltipSupport,
+              }, {
+                supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com`, class: sheet$4.classes.DropdownLink }, text.supportLink)),
+              })))),
         index.h("div", { class: sheet$4.classes.IndirectTaxPreviewDetails },
           index.h("span", null, states.notRegistered ? (index.h("span", { class: sheet$4.classes.NotRegisteredIndirectTaxText }, global.intl.formatMessage({
             id: "notRegisteredForTax",
@@ -4612,7 +4689,7 @@ const TaxAndCashDashboard = class {
      * @uiName Indirect tax tooltip
      * @uiWidget textArea
      */
-    this.indirectTaxTooltipSupport = "To make changes to your indirect tax information, please contact our Support team.";
+    this.indirectTaxTooltipSupport = "To make changes to your indirect tax information, please contact our {supportLink}.";
     /**
      * Displayed to participants who have submitted their indirect tax information.
      *

package/dist/cjs/sqm-big-stat_47.cjs.entry.js

@@ -2943,6 +2943,7 @@ const sheet$2 = JSS.createStyleSheet(style$2);
 const styleString$2 = sheet$2.toString();
 function PayoutStatusAlertView(props) {
   const { text, states, data, callbacks } = props;
+  console.log("test 123456");
   function getAlert(status) {
     if (states.error)
       return {
@@ -3176,6 +3177,7 @@ function PayoutStatusAlertView(props) {
     return index.h("sl-skeleton", { class: sheet$2.classes.SkeletonOne });
   }
   const alertDetails = getAlert(states.status);
+  console.log("status is ", states.status, alertDetails);
   if (states.status === "DONE" || !alertDetails) {
     return index.h("div", null);
   }
@@ -3373,7 +3375,8 @@ function useDemoPayoutStatusAlert(props) {
   return cjs.cjs({
     states: {
       error: false,
-      status: props.demoData.states.status,
+      status: states.status,
+      // status: "INFORMATION_REQUIRED" as const,
       loading: false,
       veriffLoading: false,
     },

package/dist/cjs/sqm-stencilbook.cjs.entry.js

@@ -17015,6 +17015,7 @@ const defaultProps$r = {
   loading: false,
   veriffLoading: false,
 };
+const Test = () => index.h("sqm-payout-status-alert", null);
 const InformationRequired = () => (index.h("sqm-payout-status-alert", { demoData: { states: defaultProps$r } }));
 const VerifyIdentity = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$r, status: "VERIFICATION:REQUIRED" } } }));
 const VerifyIdentityRequiredInternal = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$r, status: "VERIFICATION:INTERNAL" } } }));
@@ -17041,6 +17042,7 @@ const PaymentReturned = () => (index.h("sqm-payout-status-alert", { demoData: {
 const PayoutStatusAlert = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PayoutStatusAlert_stories,
+  Test: Test,
   InformationRequired: InformationRequired,
   VerifyIdentity: VerifyIdentity,
   VerifyIdentityRequiredInternal: VerifyIdentityRequiredInternal,

package/dist/collection/components/tax-and-cash/sqm-payout-status-alert/PayoutStatusAlert.stories.js

@@ -8,6 +8,7 @@ const defaultProps = {
   loading: false,
   veriffLoading: false,
 };
+export const Test = () => h("sqm-payout-status-alert", null);
 export const InformationRequired = () => (h("sqm-payout-status-alert", { demoData: { states: defaultProps } }));
 export const VerifyIdentity = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, status: "VERIFICATION:REQUIRED" } } }));
 export const VerifyIdentityRequiredInternal = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, status: "VERIFICATION:INTERNAL" } } }));

package/dist/collection/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert-view.js

@@ -42,6 +42,7 @@ const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function PayoutStatusAlertView(props) {
   const { text, states, data, callbacks } = props;
+  console.log("test 123456");
   function getAlert(status) {
     if (states.error)
       return {
@@ -275,6 +276,7 @@ export function PayoutStatusAlertView(props) {
     return h("sl-skeleton", { class: sheet.classes.SkeletonOne });
   }
   const alertDetails = getAlert(states.status);
+  console.log("status is ", states.status, alertDetails);
   if (states.status === "DONE" || !alertDetails) {
     return h("div", null);
   }

package/dist/collection/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert.js

@@ -1061,7 +1061,8 @@ function useDemoPayoutStatusAlert(props) {
   return deepmerge({
     states: {
       error: false,
-      status: props.demoData.states.status,
+      status: states.status,
+      // status: "INFORMATION_REQUIRED" as const,
       loading: false,
       veriffLoading: false,
     },

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

@@ -57,6 +57,7 @@ const style = {
     marginBottom: "var(--sl-spacing-xx-small)",
     margin: "0",
     display: "flex",
+    alignItems: "center",
     gap: "var(--sl-spacing-x-small)",
     "&::part(base)": {
       color: "var(--sqm-text)",
@@ -138,6 +139,9 @@ const style = {
     display: "flex",
     textAlign: "center",
     width: "250px",
+    "&::part(body)": {
+      pointerEvents: "auto",
+    },
   },
   ToolTip: {
     top: "6px",
@@ -216,6 +220,43 @@ const style = {
     gap: "var(--sl-spacing-medium)",
     flexWrap: "wrap",
   },
+  DropdownTooltipContainer: {
+    top: "-4px",
+    "&::part(panel)": {
+      boxShadow: "none",
+      border: "none",
+      marginTop: "var(--sl-spacing-x-small)",
+    },
+  },
+  DropdownContent: {
+    padding: "var(--sl-spacing-xxx-small) var(--sl-spacing-x-small)",
+    fontSize: "var(--sl-font-size-small)",
+    fontFamily: "var(--sl-font-sans)",
+    fontWeight: "var(--sl-font-weight-normal)",
+    lineHeight: "var(--sl-line-height-dense)",
+    minWidth: "225px",
+    backgroundColor: "var(--sl-color-gray-900)",
+    color: "var(--sl-color-white)",
+    borderRadius: "var(--sl-border-radius-medium)",
+    position: "relative",
+    marginLeft: "5px",
+  },
+  DropdownArrow: {
+    position: "absolute",
+    left: "-5px",
+    top: "50%",
+    transform: "translateY(-50%)",
+    width: "0",
+    height: "0",
+    borderTop: "5px solid transparent",
+    borderBottom: "5px solid transparent",
+    borderRight: "5px solid var(--sl-color-gray-900)",
+    zIndex: "1",
+  },
+  DropdownLink: {
+    color: "var(--sl-color-white)",
+    textDecoration: "underline",
+  },
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
@@ -531,6 +572,34 @@ export const TaxAndCashDashboardView = (props) => {
     }
   };
   const alertInfo = getAlert(states.payoutStatus);
+  const dropdownHover = (el) => {
+    var _a;
+    if (!el)
+      return;
+    const trigger = el.querySelector('[slot="trigger"]');
+    const panel = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".dropdown__panel");
+    if (!trigger || !panel)
+      return;
+    let hideTimeout;
+    const show = () => {
+      clearTimeout(hideTimeout);
+      el.show();
+    };
+    const scheduleHide = () => {
+      hideTimeout = setTimeout(() => el.hide(), 100);
+    };
+    trigger.addEventListener("mouseenter", show);
+    trigger.addEventListener("mouseleave", scheduleHide);
+    panel.addEventListener("mouseenter", show);
+    panel.addEventListener("mouseleave", scheduleHide);
+    return () => {
+      trigger.removeEventListener("mouseenter", show);
+      trigger.removeEventListener("mouseleave", scheduleHide);
+      panel.removeEventListener("mouseenter", show);
+      panel.removeEventListener("mouseleave", scheduleHide);
+      clearTimeout(hideTimeout);
+    };
+  };
   return (h("div", null,
     h("div", null,
       h("style", { type: "text/css" },
@@ -594,8 +663,16 @@ export const TaxAndCashDashboardView = (props) => {
         h("sl-skeleton", { class: sheet.classes.SkeletonTwo }))) : (h("div", null,
         h("h3", { class: sheet.classes.IndirectTaxPreviewHeaderContainer },
           text.indirectTaxInfoSectionHeader,
-          h("sl-tooltip", { trigger: "hover", placement: "right", content: text.indirectTaxTooltipSupport, class: sheet.classes.TooltipContainer },
-            h("sl-icon", { name: "info-circle", class: sheet.classes.ToolTip }))),
+          h("sl-dropdown", { placement: "right", distance: 1, ref: dropdownHover, class: sheet.classes.DropdownTooltipContainer },
+            h("sl-icon", { slot: "trigger", name: "info-circle", class: sheet.classes.ToolTip, style: { cursor: "pointer" } }),
+            h("div", { class: sheet.classes.DropdownContent },
+              h("div", { class: sheet.classes.DropdownArrow }),
+              intl.formatMessage({
+                id: "indirectTaxTooltipSupport",
+                defaultMessage: text.indirectTaxTooltipSupport,
+              }, {
+                supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com`, class: sheet.classes.DropdownLink }, text.supportLink)),
+              })))),
         h("div", { class: sheet.classes.IndirectTaxPreviewDetails },
           h("span", null, states.notRegistered ? (h("span", { class: sheet.classes.NotRegisteredIndirectTaxText }, intl.formatMessage({
             id: "notRegisteredForTax",

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

@@ -129,7 +129,7 @@ export class TaxAndCashDashboard {
      * @uiName Indirect tax tooltip
      * @uiWidget textArea
      */
-    this.indirectTaxTooltipSupport = "To make changes to your indirect tax information, please contact our Support team.";
+    this.indirectTaxTooltipSupport = "To make changes to your indirect tax information, please contact our {supportLink}.";
     /**
      * Displayed to participants who have submitted their indirect tax information.
      *
@@ -872,7 +872,7 @@ export class TaxAndCashDashboard {
       },
       "attribute": "indirect-tax-tooltip-support",
       "reflect": false,
-      "defaultValue": "\"To make changes to your indirect tax information, please contact our Support team.\""
+      "defaultValue": "\"To make changes to your indirect tax information, please contact our {supportLink}.\""
     },
     "indirectTaxDetails": {
       "type": "string",

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

@@ -3775,6 +3775,7 @@ const style$5 = {
     marginBottom: "var(--sl-spacing-xx-small)",
     margin: "0",
     display: "flex",
+    alignItems: "center",
     gap: "var(--sl-spacing-x-small)",
     "&::part(base)": {
       color: "var(--sqm-text)",
@@ -3856,6 +3857,9 @@ const style$5 = {
     display: "flex",
     textAlign: "center",
     width: "250px",
+    "&::part(body)": {
+      pointerEvents: "auto",
+    },
   },
   ToolTip: {
     top: "6px",
@@ -3934,6 +3938,43 @@ const style$5 = {
     gap: "var(--sl-spacing-medium)",
     flexWrap: "wrap",
   },
+  DropdownTooltipContainer: {
+    top: "-4px",
+    "&::part(panel)": {
+      boxShadow: "none",
+      border: "none",
+      marginTop: "var(--sl-spacing-x-small)",
+    },
+  },
+  DropdownContent: {
+    padding: "var(--sl-spacing-xxx-small) var(--sl-spacing-x-small)",
+    fontSize: "var(--sl-font-size-small)",
+    fontFamily: "var(--sl-font-sans)",
+    fontWeight: "var(--sl-font-weight-normal)",
+    lineHeight: "var(--sl-line-height-dense)",
+    minWidth: "225px",
+    backgroundColor: "var(--sl-color-gray-900)",
+    color: "var(--sl-color-white)",
+    borderRadius: "var(--sl-border-radius-medium)",
+    position: "relative",
+    marginLeft: "5px",
+  },
+  DropdownArrow: {
+    position: "absolute",
+    left: "-5px",
+    top: "50%",
+    transform: "translateY(-50%)",
+    width: "0",
+    height: "0",
+    borderTop: "5px solid transparent",
+    borderBottom: "5px solid transparent",
+    borderRight: "5px solid var(--sl-color-gray-900)",
+    zIndex: "1",
+  },
+  DropdownLink: {
+    color: "var(--sl-color-white)",
+    textDecoration: "underline",
+  },
 };
 const sheet$4 = createStyleSheet(style$5);
 const styleString$4 = sheet$4.toString();
@@ -4249,6 +4290,34 @@ const TaxAndCashDashboardView = (props) => {
     }
   };
   const alertInfo = getAlert(states.payoutStatus);
+  const dropdownHover = (el) => {
+    var _a;
+    if (!el)
+      return;
+    const trigger = el.querySelector('[slot="trigger"]');
+    const panel = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".dropdown__panel");
+    if (!trigger || !panel)
+      return;
+    let hideTimeout;
+    const show = () => {
+      clearTimeout(hideTimeout);
+      el.show();
+    };
+    const scheduleHide = () => {
+      hideTimeout = setTimeout(() => el.hide(), 100);
+    };
+    trigger.addEventListener("mouseenter", show);
+    trigger.addEventListener("mouseleave", scheduleHide);
+    panel.addEventListener("mouseenter", show);
+    panel.addEventListener("mouseleave", scheduleHide);
+    return () => {
+      trigger.removeEventListener("mouseenter", show);
+      trigger.removeEventListener("mouseleave", scheduleHide);
+      panel.removeEventListener("mouseenter", show);
+      panel.removeEventListener("mouseleave", scheduleHide);
+      clearTimeout(hideTimeout);
+    };
+  };
   return (h("div", null,
     h("div", null,
       h("style", { type: "text/css" },
@@ -4312,8 +4381,16 @@ const TaxAndCashDashboardView = (props) => {
         h("sl-skeleton", { class: sheet$4.classes.SkeletonTwo }))) : (h("div", null,
         h("h3", { class: sheet$4.classes.IndirectTaxPreviewHeaderContainer },
           text.indirectTaxInfoSectionHeader,
-          h("sl-tooltip", { trigger: "hover", placement: "right", content: text.indirectTaxTooltipSupport, class: sheet$4.classes.TooltipContainer },
-            h("sl-icon", { name: "info-circle", class: sheet$4.classes.ToolTip }))),
+          h("sl-dropdown", { placement: "right", distance: 1, ref: dropdownHover, class: sheet$4.classes.DropdownTooltipContainer },
+            h("sl-icon", { slot: "trigger", name: "info-circle", class: sheet$4.classes.ToolTip, style: { cursor: "pointer" } }),
+            h("div", { class: sheet$4.classes.DropdownContent },
+              h("div", { class: sheet$4.classes.DropdownArrow }),
+              intl.formatMessage({
+                id: "indirectTaxTooltipSupport",
+                defaultMessage: text.indirectTaxTooltipSupport,
+              }, {
+                supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com`, class: sheet$4.classes.DropdownLink }, text.supportLink)),
+              })))),
         h("div", { class: sheet$4.classes.IndirectTaxPreviewDetails },
           h("span", null, states.notRegistered ? (h("span", { class: sheet$4.classes.NotRegisteredIndirectTaxText }, intl.formatMessage({
             id: "notRegisteredForTax",
@@ -4608,7 +4685,7 @@ const TaxAndCashDashboard = class {
      * @uiName Indirect tax tooltip
      * @uiWidget textArea
      */
-    this.indirectTaxTooltipSupport = "To make changes to your indirect tax information, please contact our Support team.";
+    this.indirectTaxTooltipSupport = "To make changes to your indirect tax information, please contact our {supportLink}.";
     /**
      * Displayed to participants who have submitted their indirect tax information.
      *

package/dist/esm/sqm-big-stat_47.entry.js

@@ -2939,6 +2939,7 @@ const sheet$2 = createStyleSheet(style$2);
 const styleString$2 = sheet$2.toString();
 function PayoutStatusAlertView(props) {
   const { text, states, data, callbacks } = props;
+  console.log("test 123456");
   function getAlert(status) {
     if (states.error)
       return {
@@ -3172,6 +3173,7 @@ function PayoutStatusAlertView(props) {
     return h$1("sl-skeleton", { class: sheet$2.classes.SkeletonOne });
   }
   const alertDetails = getAlert(states.status);
+  console.log("status is ", states.status, alertDetails);
   if (states.status === "DONE" || !alertDetails) {
     return h$1("div", null);
   }
@@ -3369,7 +3371,8 @@ function useDemoPayoutStatusAlert(props) {
   return cjs({
     states: {
       error: false,
-      status: props.demoData.states.status,
+      status: states.status,
+      // status: "INFORMATION_REQUIRED" as const,
       loading: false,
       veriffLoading: false,
     },

package/dist/esm/sqm-stencilbook.entry.js

@@ -17011,6 +17011,7 @@ const defaultProps$r = {
   loading: false,
   veriffLoading: false,
 };
+const Test = () => h("sqm-payout-status-alert", null);
 const InformationRequired = () => (h("sqm-payout-status-alert", { demoData: { states: defaultProps$r } }));
 const VerifyIdentity = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$r, status: "VERIFICATION:REQUIRED" } } }));
 const VerifyIdentityRequiredInternal = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$r, status: "VERIFICATION:INTERNAL" } } }));
@@ -17037,6 +17038,7 @@ const PaymentReturned = () => (h("sqm-payout-status-alert", { demoData: { states
 const PayoutStatusAlert = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PayoutStatusAlert_stories,
+  Test: Test,
   InformationRequired: InformationRequired,
   VerifyIdentity: VerifyIdentity,
   VerifyIdentityRequiredInternal: VerifyIdentityRequiredInternal,