@saasquatch/mint-components 1.12.0-0 → 1.12.0-10

package/dist/collection/components/tax-and-cash/TaxForm.stories.js

@@ -210,6 +210,7 @@ const stepFourProps = {
     },
   },
   callbacks: {
+    onVerification: () => { },
     onSubmit: async () => console.log("Submit"),
     setPaymentMethodChecked: () => { },
     setPaymentScheduleChecked: () => { },
@@ -246,6 +247,8 @@ const docusignFormProps = {
 };
 const dashboardProps = {
   states: {
+    showVerifyIdentity: false,
+    payoutStatus: "DONE",
     canEditPayoutInfo: true,
     disabled: false,
     status: "ACTIVE",
@@ -257,6 +260,7 @@ const dashboardProps = {
     indirectTaxNumber: "123456",
     indirectTaxType: "VAT",
     showNewFormDialog: false,
+    hasHold: false,
   },
   slots: {
     payoutDetailsCardSlot: (h("sqm-payout-details-card", { demoData: {
@@ -763,6 +767,8 @@ export const TaxAndCashDashboardActiveW8BENForm = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
+        payoutStatus: "DONE",
+        showVerifyIdentity: false,
         noFormNeeded: false,
         canEditPayoutInfo: true,
         documentType: "W8BEN",
@@ -771,6 +777,7 @@ export const TaxAndCashDashboardActiveW8BENForm = () => {
         indirectTaxType: "VAT",
         indirectTaxNumber: "123456",
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -778,6 +785,8 @@ export const TaxAndCashDashboardActiveW8BENEForm = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
+        payoutStatus: "DONE",
+        showVerifyIdentity: false,
         noFormNeeded: false,
         canEditPayoutInfo: true,
         documentType: "W8BENE",
@@ -786,6 +795,7 @@ export const TaxAndCashDashboardActiveW8BENEForm = () => {
         indirectTaxType: "VAT",
         indirectTaxNumber: "123456",
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -793,6 +803,8 @@ export const TaxAndCashDashboardNotActiveW9Form = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
+        payoutStatus: "DONE",
+        showVerifyIdentity: false,
         noFormNeeded: false,
         canEditPayoutInfo: true,
         status: "INACTIVE",
@@ -802,6 +814,7 @@ export const TaxAndCashDashboardNotActiveW9Form = () => {
         indirectTaxType: "VAT",
         indirectTaxNumber: "123456",
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -809,6 +822,8 @@ export const TaxAndCashDashboardNotVerifiedW9Form = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
+        payoutStatus: "DONE",
+        showVerifyIdentity: false,
         canEditPayoutInfo: true,
         disabled: false,
         status: "NOT_VERIFIED",
@@ -819,6 +834,7 @@ export const TaxAndCashDashboardNotVerifiedW9Form = () => {
         indirectTaxType: "VAT",
         indirectTaxNumber: "123456",
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -826,6 +842,8 @@ export const TaxAndCashDashboardNotVerifiedW8BENForm = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
+        payoutStatus: "DONE",
+        showVerifyIdentity: false,
         canEditPayoutInfo: true,
         disabled: false,
         status: "NOT_VERIFIED",
@@ -837,6 +855,7 @@ export const TaxAndCashDashboardNotVerifiedW8BENForm = () => {
         indirectTaxType: "VAT",
         indirectTaxNumber: "123456",
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -844,6 +863,8 @@ export const TaxAndCashDashboardNotVerifiedW8BENEForm = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
+        payoutStatus: "DONE",
+        showVerifyIdentity: false,
         canEditPayoutInfo: true,
         disabled: false,
         status: "NOT_VERIFIED",
@@ -855,6 +876,7 @@ export const TaxAndCashDashboardNotVerifiedW8BENEForm = () => {
         indirectTaxType: "VAT",
         indirectTaxNumber: "123456",
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -862,6 +884,8 @@ export const TaxAndCashDashboardNotActiveW8BENEForm = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
+        payoutStatus: "DONE",
+        showVerifyIdentity: false,
         canEditPayoutInfo: true,
         disabled: false,
         status: "NOT_ACTIVE",
@@ -873,6 +897,7 @@ export const TaxAndCashDashboardNotActiveW8BENEForm = () => {
         indirectTaxType: "VAT",
         country: "United Kingdom",
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -880,6 +905,8 @@ export const TaxAndCashDashboardNoFormNeeded = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
+        payoutStatus: "DONE",
+        showVerifyIdentity: false,
         canEditPayoutInfo: true,
         disabled: false,
         documentType: "W9",
@@ -891,6 +918,7 @@ export const TaxAndCashDashboardNoFormNeeded = () => {
         indirectTaxNumber: "123456",
         indirectTaxType: "GST",
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -898,6 +926,8 @@ export const TaxAndCashDashboardIndirectTaxCanada = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
+        payoutStatus: "DONE",
+        showVerifyIdentity: false,
         canEditPayoutInfo: true,
         status: "ACTIVE",
         disabled: false,
@@ -910,6 +940,7 @@ export const TaxAndCashDashboardIndirectTaxCanada = () => {
         indirectTaxType: "GST",
         indirectTaxNumber: "123456",
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -917,6 +948,8 @@ export const TaxAndCashDashboardIndirectTaxCanadaQuebec = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
+        payoutStatus: "DONE",
+        showVerifyIdentity: false,
         canEditPayoutInfo: true,
         status: "ACTIVE",
         disabled: false,
@@ -930,6 +963,7 @@ export const TaxAndCashDashboardIndirectTaxCanadaQuebec = () => {
         indirectTaxNumber: "123456",
         qstNumber: "44212",
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -937,6 +971,8 @@ export const TaxAndCashDashboardIndirectTaxSpain = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
+        payoutStatus: "DONE",
+        showVerifyIdentity: false,
         canEditPayoutInfo: true,
         status: "ACTIVE",
         disabled: false,
@@ -950,6 +986,7 @@ export const TaxAndCashDashboardIndirectTaxSpain = () => {
         indirectTaxNumber: "123456",
         subRegionTaxNumber: "44212",
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -957,6 +994,8 @@ export const TaxAndCashDashboardIndirectTaxNotRegistered = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
+        payoutStatus: "DONE",
+        showVerifyIdentity: false,
         canEditPayoutInfo: true,
         status: "ACTIVE",
         documentType: "W8BEN",
@@ -965,6 +1004,7 @@ export const TaxAndCashDashboardIndirectTaxNotRegistered = () => {
         noFormNeeded: false,
         notRegistered: true,
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -972,6 +1012,8 @@ export const TaxAndCashDashboardIdentityVerifcationRequired = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
+        payoutStatus: "VERIFICATION_NEEDED",
+        showVerifyIdentity: true,
         showIdentityVerificationDialog: true,
         identiyRequired: true,
         canEditPayoutInfo: true,
@@ -982,6 +1024,7 @@ export const TaxAndCashDashboardIdentityVerifcationRequired = () => {
         noFormNeeded: false,
         notRegistered: true,
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -989,6 +1032,8 @@ export const TaxAndCashDashboardNewTaxForm = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
+        payoutStatus: "DONE",
+        showVerifyIdentity: false,
         canEditPayoutInfo: true,
         status: "ACTIVE",
         documentType: "W8BEN",
@@ -997,6 +1042,27 @@ export const TaxAndCashDashboardNewTaxForm = () => {
         noFormNeeded: false,
         notRegistered: true,
         showNewFormDialog: true,
+        hasHold: false,
+      },
+    } }));
+};
+export const TaxAndCashDashboardPayoutsOnHold = () => {
+  return (h("sqm-tax-and-cash-dashboard", { demoData: {
+      ...dashboardProps,
+      states: {
+        payoutStatus: "DONE",
+        showVerifyIdentity: false,
+        canEditPayoutInfo: true,
+        disabled: true,
+        status: "ACTIVE",
+        documentType: "W8BEN",
+        documentTypeString: taxTypeToName("W8BEN"),
+        dateSubmitted: "Jan 18th, 2025",
+        noFormNeeded: false,
+        indirectTaxNumber: "123456",
+        country: "Slovania",
+        showNewFormDialog: false,
+        hasHold: true,
       },
     } }));
 };
@@ -1004,6 +1070,8 @@ export const TaxAndCashDashboardLoading = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
+        payoutStatus: "DONE",
+        showVerifyIdentity: false,
         canEditPayoutInfo: true,
         disabled: false,
         status: "ACTIVE",
@@ -1013,6 +1081,7 @@ export const TaxAndCashDashboardLoading = () => {
         noFormNeeded: false,
         loading: true,
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -1020,6 +1089,8 @@ export const TaxAndCashDashboardWithLoadingError = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
+        payoutStatus: "DONE",
+        showVerifyIdentity: false,
         disabled: false,
         canEditPayoutInfo: true,
         status: "ACTIVE",
@@ -1030,6 +1101,7 @@ export const TaxAndCashDashboardWithLoadingError = () => {
         loading: true,
         loadingError: true,
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };
@@ -1037,6 +1109,8 @@ export const TaxAndCashDashboardWithGeneralError = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
+        payoutStatus: "DONE",
+        showVerifyIdentity: false,
         canEditPayoutInfo: true,
         disabled: false,
         status: "ACTIVE",
@@ -1048,6 +1122,7 @@ export const TaxAndCashDashboardWithGeneralError = () => {
         indirectTaxType: "VAT",
         country: "Slovania",
         showNewFormDialog: false,
+        hasHold: false,
         errors: {
           general: true,
         },
@@ -1058,6 +1133,8 @@ export const TaxAndCashDashboardDisabled = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
+        payoutStatus: "DONE",
+        showVerifyIdentity: false,
         canEditPayoutInfo: true,
         disabled: true,
         status: "ACTIVE",
@@ -1068,6 +1145,7 @@ export const TaxAndCashDashboardDisabled = () => {
         indirectTaxNumber: "123456",
         country: "Slovania",
         showNewFormDialog: false,
+        hasHold: false,
       },
     } }));
 };

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

@@ -314,7 +314,7 @@ export class BankingInfoForm {
       },
     };
     if (props.states.isPartner && props.states.showVerification) {
-      return h("sqm-code-verification", null);
+      return (h("sqm-code-verification", { onVerification: props.callbacks.onVerification }));
     }
     return (h(Host, null,
       h(BankingInfoFormView, { callbacks: props.callbacks, text: props.text, states: props.states, refs: props.refs, slots: {
@@ -1619,6 +1619,7 @@ function useDemoBankingInfoForm(props) {
       setPaymentScheduleChecked,
       setCountrySearch: () => { },
       onBack: async () => setStep("/dashboard"),
+      onVerification: () => { },
     },
     text: props.getTextProps(),
     refs: {

package/dist/collection/components/tax-and-cash/sqm-banking-info-form/useBankingInfoForm.js

@@ -288,6 +288,12 @@ export function useBankingInfoForm(props) {
     }
     await runMutation(formData, token);
   };
+  const onVerification = async (token) => {
+    host.dispatchEvent(new CustomEvent(VERIFICATION_EVENT_KEY, {
+      detail: { token },
+      bubbles: false,
+    }));
+  };
   function setPaymentMethodChecked(paymentMethod) {
     _setPaymentMethodChecked(paymentMethod);
     if (paymentMethod === "toPayPalAccount") {
@@ -312,6 +318,7 @@ export function useBankingInfoForm(props) {
       setPaymentScheduleChecked,
       onBack: () => setStep("/dashboard"),
       setCountrySearch,
+      onVerification,
     },
     states: {
       showVerification,

package/dist/collection/components/tax-and-cash/sqm-docusign-form/docusign-iframe/DocusignIframe.js

@@ -80,7 +80,6 @@ export const DocusignIframe = ({ states, data, callbacks, text, }) => {
     const allowed = allowedDomains.some((d) => { var _a; return (_a = e.origin) === null || _a === void 0 ? void 0 : _a.includes(d); });
     if (!allowed)
       return;
-    console.log(e);
     if (typeof e.data === "number") {
       setiFrameHeight(e.data + "px");
     }

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

@@ -3,10 +3,20 @@ export default {
   title: "Components/Payout Status Alert",
 };
 const defaultProps = {
+  error: false,
   status: "INFORMATION_REQUIRED",
   loading: false,
+  showVerifyIdentity: false,
 };
 export const InformationRequired = () => (h("sqm-payout-status-alert", { demoData: { states: defaultProps } }));
 export const VerifyIdentity = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, status: "VERIFICATION_NEEDED" } } }));
+export const VerifyIdentityOpen = () => (h("sqm-payout-status-alert", { demoData: {
+    states: {
+      ...defaultProps,
+      status: "VERIFICATION_NEEDED",
+      showVerifyIdentity: true,
+    },
+  } }));
 export const Hold = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, status: "HOLD" } } }));
 export const Loading = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, loading: true } } }));
+export const Error = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps, error: true } } }));

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

@@ -9,12 +9,53 @@ const style = {
     margin: "0",
     marginBottom: "var(--sl-spacing-small)",
   },
+  ErrorAlertContainer: {
+    "&::part(base)": {
+      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",
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-danger-500)",
+    },
+  },
+  InfoAlertContainer: {
+    "&::part(base)": {
+      backgroundColor: "var(--sl-color-sky-100)",
+      borderTop: "none",
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-blue-500)",
+    },
+  },
+  Dialog: {
+    "&::part(panel)": {
+      height: "600px",
+    },
+    "&::part(close-button)": {
+      marginBottom: "var(--sl-spacing-xx-large)",
+    },
+    "&::part(title)": {
+      display: "none",
+    },
+    "&::part(header)": {},
+    "&::part(body)": { padding: "0" },
+    "&::part(footer)": {},
+  },
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function PayoutStatusAlertView(props) {
-  var _a, _b, _c, _d;
-  const { text, states } = props;
+  var _a, _b, _c, _d, _e;
+  const { text, states, data, callbacks } = props;
   if (states.loading) {
     return h("sl-skeleton", { class: sheet.classes.SkeletonOne });
   }
@@ -22,14 +63,24 @@ export function PayoutStatusAlertView(props) {
     return h("div", null);
   }
   function getAlert(status) {
+    if (states.error)
+      return {
+        header: text.errorHeader,
+        description: text.errorDescription,
+        buttonText: null,
+        alertType: "critical",
+        icon: "exclamation-triangle",
+        class: sheet.classes.ErrorAlertContainer,
+      };
     switch (status) {
       case "INFORMATION_REQUIRED":
         return {
           header: text.informationRequiredHeader,
           description: text.informationRequiredDescription,
-          buttonText: text.verificationRequiredButtonText,
+          buttonText: text.informationRequiredButtonText,
           alertType: "info",
-          icon: "exclamation-octagon",
+          icon: "info-circle",
+          class: sheet.classes.InfoAlertContainer,
         };
       case "VERIFICATION_NEEDED":
         return {
@@ -37,7 +88,8 @@ export function PayoutStatusAlertView(props) {
           description: text.verificationRequiredDescription,
           buttonText: text.verificationRequiredButtonText,
           alertType: "warning",
-          icon: "exclamation-octagon",
+          icon: "exclamation-triangle",
+          class: sheet.classes.WarningAlertContainer,
         };
       case "HOLD":
         return {
@@ -45,7 +97,8 @@ export function PayoutStatusAlertView(props) {
           description: text.holdDescription,
           buttonText: null,
           alertType: "warning",
-          icon: "exclamation-octagon",
+          icon: "exclamation-triangle",
+          class: sheet.classes.WarningAlertContainer,
         };
       default:
         return;
@@ -55,18 +108,24 @@ export function PayoutStatusAlertView(props) {
   function getButton(status) {
     switch (status) {
       case "INFORMATION_REQUIRED":
-        return (h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": "Payout and tax settings", "scroll-animation": "smooth" }));
+        return data.type === "SquatchJS2" ? (h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.informationRequiredButtonText, "scroll-animation": "smooth" })) : data.type === "SquatchPortal" ? (h("sl-button", { type: "default", onClick: callbacks.onTermsClick }, text.informationRequiredButtonText)) : (h("sl-button", { type: "default" }, text.informationRequiredButtonText));
       case "VERIFICATION_NEEDED":
-        return (h("sl-button", { type: "default", loading: states.loading }, text.verificationRequiredButtonText));
+        return (h("sl-button", { type: "default", loading: states.loading, 
+          //AL: TODO callback to open verification form
+          onClick: () => callbacks.onClick }, text.verificationRequiredButtonText));
       default:
         return;
     }
   }
   return (h("div", { part: "sqm-base" },
     h("style", { type: "text/css" }, styleString),
-    h("sqm-form-message", { style: { display: "flex", gap: "2px" }, exportparts: "base: alert-base, icon:alert-icon", type: (_a = getAlert(states.status)) === null || _a === void 0 ? void 0 : _a.alertType },
-      h("sl-icon", { slot: "icon", name: (_b = getAlert(states.status)) === null || _b === void 0 ? void 0 : _b.icon }),
-      h("strong", null, (_c = getAlert(states.status)) === null || _c === void 0 ? void 0 : _c.header),
-      h("p", { class: sheet.classes.AlertDescriptionText }, (_d = getAlert(states.status)) === null || _d === void 0 ? void 0 : _d.description),
-      getButton(states.status))));
+    h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: (_a = getAlert(states.status)) === null || _a === void 0 ? void 0 : _a.alertType, class: (_b = getAlert(states.status)) === null || _b === void 0 ? void 0 : _b.class, open: true },
+      h("sl-icon", { slot: "icon", name: (_c = getAlert(states.status)) === null || _c === void 0 ? void 0 : _c.icon }),
+      h("strong", null, (_d = getAlert(states.status)) === null || _d === void 0 ? void 0 : _d.header),
+      h("p", { class: sheet.classes.AlertDescriptionText }, (_e = getAlert(states.status)) === null || _e === void 0 ? void 0 : _e.description),
+      getButton(states.status)),
+    h("sl-dialog", { noDismiss: true, class: sheet.classes.Dialog, open: states.showVerifyIdentity, "onSl-hide": callbacks.onCancel },
+      h("iframe", { 
+        // AL: TODO replace iframe URL with verification url when available
+        scrolling: "yes", frameBorder: "0", width: "100%", height: "100%", src: "https://impacttech.complytaxforms.com/ServiceRedirect.aspx?Language=eng&Param1=UxBORV4bOIrqNb4gbpNmtvW3wjdZJyx4gPElIGMJNR8=&UUID=B576EA3E-80FD-4D85-AA59-653D23A7CCE8" }))));
 }