@saasquatch/mint-components 1.12.0-12 → 1.12.0-14

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

@@ -16,7 +16,7 @@ const useChildElements = require('./useChildElements-410d2435.js');
 const luxon = require('./luxon-05098e19.js');
 const useReferralTable = require('./useReferralTable-824ac152.js');
 const utils = require('./utils-6847bc06.js');
-const sqmInvoiceTableView = require('./sqm-invoice-table-view-301eed81.js');
+const sqmInvoiceTableView = require('./sqm-invoice-table-view-ed76d7bd.js');
 const keys = require('./keys-cff24974.js');
 const usePayoutStatus = require('./usePayoutStatus-5ac536a3.js');
 const extractProps = require('./extractProps-fd93ba62.js');
@@ -1190,7 +1190,8 @@ function useBankingInfoForm(props) {
       });
       setShowVerification(false);
     }
-    await runMutation(formData, token);
+    if (token)
+      await runMutation(formData, token);
   };
   const onVerification = async (token) => {
     host.dispatchEvent(new CustomEvent(keys.VERIFICATION_EVENT_KEY, {
@@ -1223,6 +1224,7 @@ function useBankingInfoForm(props) {
       onBack: () => setStep("/dashboard"),
       setCountrySearch,
       onVerification,
+      onVerificationHide: () => onVerification(null),
     },
     states: {
       showVerification,
@@ -1556,15 +1558,33 @@ const BankingInfoForm = class {
       bitset: props.states.bitset,
       formMap,
     });
-    const searchStyle = {
+    const style = {
+      Dialog: {
+        "&::part(panel)": {
+          maxWidth: "420px",
+        },
+        "&::part(close-button)": {
+          marginBottom: "var(--sl-spacing-xx-large)",
+        },
+        "&::part(body)": {
+          padding: "0 var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
+          fontSize: "var(--sl-font-size-small)",
+        },
+        "&::part(footer)": {
+          display: "flex",
+          flexDirection: "column",
+          gap: "var(--sl-spacing-small)",
+          marginBottom: "var(--sl-spacing-xx-small)",
+          alignItems: "center",
+          flex: "1",
+        },
+      },
       SearchInput: {
         padding: "var(--sl-spacing-x-small)",
       },
     };
-    if (props.states.isPartner && props.states.showVerification) {
-      return (index.h("sqm-code-verification", { onVerification: props.callbacks.onVerification }));
-    }
-    return (index.h(index.Host, null, index.h(BankingInfoFormView, { callbacks: props.callbacks, text: props.text, states: props.states, refs: props.refs, slots: {
+    const sheet = JSS.createStyleSheet(style);
+    return (index.h(index.Host, null, props.states.isPartner && props.states.showVerification ? (index.h("sl-dialog", { class: sheet.classes.Dialog, open: true, "onSl-hide": props.callbacks.onVerificationHide }, index.h("sqm-code-verification", { onVerification: props.callbacks.onVerification }))) : null, index.h(BankingInfoFormView, { callbacks: props.callbacks, text: props.text, states: props.states, refs: props.refs, slots: {
         formInputsSlot: inputFields === null || inputFields === void 0 ? void 0 : inputFields.map(({ input }) => input),
         countryInputSlot: (index.h("sl-select", Object.assign({ label: props.text.bankLocationLabel, disabled: props.states.saveLoading, required: true, name: "/bankCountry", id: "bankCountry", value: props.states.formState.bankCountry || "", "onSl-select": (e) => { var _a, _b; return props.callbacks.setBankCountry((_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.value); } }, (((_a = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _a === void 0 ? void 0 : _a.bankCountry) && {
           class: "error-input",
@@ -1572,7 +1592,7 @@ const BankingInfoForm = class {
             type: (_c = (_b = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _b === void 0 ? void 0 : _b.bankCountry) === null || _c === void 0 ? void 0 : _c.type,
             label: props.text.bankLocationLabel,
           }),
-        })), index.h("sl-input", { disabled: props.states.saveLoading, class: searchStyle.SearchInput, placeholder: this.searchForCountryText, onKeyDown: (e) => {
+        })), index.h("sl-input", { disabled: props.states.saveLoading, class: sheet.classes.SearchInput, placeholder: this.searchForCountryText, onKeyDown: (e) => {
             // Stop shoelace intercepting key presses
             e.stopPropagation();
           }, "onSl-input": (e) => {
@@ -1688,6 +1708,7 @@ function useDemoBankingInfoForm(props) {
       hasPayPal: true,
     },
     callbacks: {
+      onVerificationHide: () => { },
       onSubmit: async () => {
         setStep("/dashboard");
       },
@@ -5050,6 +5071,7 @@ const style$5 = {
   PageDescriptionText: {
     color: "var(--sl-color-neutral-500)",
     fontSize: "var(--sl-font-size-medium)",
+    marginTop: "0",
   },
   Dialog: {
     "&::part(panel)": {
@@ -5218,20 +5240,18 @@ const TaxAndCashDashboardView = (props) => {
         index.h("strong", null, text.error.generalTitle),
         index.h("br", null),
         text.error.generalDescription)),
-      states.payoutStatus && states.payoutStatus !== "DONE" && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", name: (_b = getAlert(states.payoutStatus)) === null || _b === void 0 ? void 0 : _b.alertType, open: true, class: (_c = getAlert(states.payoutStatus)) === null || _c === void 0 ? void 0 : _c.class },
+      getAlert(states.payoutStatus) && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", name: (_b = getAlert(states.payoutStatus)) === null || _b === void 0 ? void 0 : _b.alertType, open: true, class: (_c = getAlert(states.payoutStatus)) === null || _c === void 0 ? void 0 : _c.class },
         index.h("sl-icon", { slot: "icon", name: (_d = getAlert(states.payoutStatus)) === null || _d === void 0 ? void 0 : _d.icon }),
         index.h("strong", null, getAlert(states.payoutStatus).header),
         index.h("p", { style: { margin: "0" } }, getAlert(states.payoutStatus).description),
-        getAlert(states.payoutStatus).buttonText && (index.h("sl-button", { style: { marginTop: "var(--sl-spacing-x-small)" }, type: "default", loading: states.loading, 
-          //AL: TODO hooks
-          onClick: () => callbacks.onClick }, getAlert(states.payoutStatus).buttonText)))),
+        getAlert(states.payoutStatus).buttonText && (index.h("sl-button", { style: { marginTop: "var(--sl-spacing-x-small)" }, type: "default", loading: states.veriffLoading, onClick: () => callbacks.onVerifyClick() }, getAlert(states.payoutStatus).buttonText)))),
       index.h("sl-dialog", { label: text.replaceTaxFormModalHeader, class: sheet$4.classes.Dialog, open: states.showNewFormDialog, "onSl-hide": callbacks.onNewFormCancel },
         index.h("p", null, text.replaceTaxFormModalBodyText),
         index.h("sl-button", { slot: "footer", type: "primary", class: sheet$4.classes.DialogButton, onClick: callbacks.onNewFormClick }, text.newFormButton),
         index.h("sl-button", { slot: "footer", type: "default", class: sheet$4.classes.DialogButton, onClick: callbacks.onNewFormCancel }, text.cancelButton)),
       states.status === "INACTIVE" && alertMap[states.status],
       index.h("div", null,
-        index.h("h3", null, text.bankingInformationSectionHeader),
+        index.h("h3", { style: { marginBottom: "0" } }, text.bankingInformationSectionHeader),
         index.h("p", { class: sheet$4.classes.PageDescriptionText }, text.taxAndPayoutsDescription),
         index.h("div", { class: sheet$4.classes.BankingInformationContainer },
           slots.payoutDetailsCardSlot,

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

@@ -1743,6 +1743,41 @@ function PayoutButtonScrollView(props) {
     index.h("p", { class: sheet$2.classes.PayoutButtonDescription }, text.payoutButtonDescription)));
 }
 
+const GET_PAYOUT_DETAILS = index_module.dist.gql `
+  query getPayoutDetails {
+    user: viewer {
+      ... on User {
+        id
+        impactConnection {
+          connected
+          publisher {
+            id
+            payoutsAccount {
+              hold
+              balance
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+function usePayoutButton(props) {
+  var _a, _b, _c;
+  const { data, refetch } = index_module.En(GET_PAYOUT_DETAILS, {});
+  stencilHooks_module.useEffect(() => {
+    const cb = () => refetch();
+    window.addEventListener("sqm:tax-form-updated", cb);
+    return () => window.removeEventListener("sqm:tax-form-updated", cb);
+  }, []);
+  return {
+    states: {
+      payoutSettingsComplete: !!((_c = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.impactConnection) === null || _b === void 0 ? void 0 : _b.publisher) === null || _c === void 0 ? void 0 : _c.payoutsAccount),
+    },
+    text: props.getTextProps(),
+  };
+}
+
 const PayoutButtonScroll = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -1763,7 +1798,9 @@ const PayoutButtonScroll = class {
     return utils.getProps(this);
   }
   render() {
-    const props = useDemoPayoutButtonScroll(this);
+    const props = index_module.isDemo()
+      ? useDemoPayoutButtonScroll(this)
+      : usePayoutButton(this);
     return index.h(PayoutButtonScrollView, Object.assign({}, props));
   }
 };

package/dist/cjs/sqm-code-verification.cjs.entry.js

@@ -19,7 +19,7 @@ const style = {
     display: "flex",
     flexDirection: "column",
     gap: "var(--sl-spacing-medium)",
-    maxWidth: "515px",
+    maxWidth: "550px",
   },
   HeaderContainer: {
     display: "flex",

package/dist/cjs/{sqm-invoice-table-view-301eed81.js → sqm-invoice-table-view-ed76d7bd.js}

@@ -714,6 +714,7 @@ const stepFourProps = {
     },
   },
   callbacks: {
+    onVerificationHide: () => { },
     onVerification: () => { },
     onSubmit: async () => console.log("Submit"),
     setPaymentMethodChecked: () => { },
@@ -1262,6 +1263,20 @@ const StepFourToPaypalChecked = () => {
       },
     } }));
 };
+const StepFourReVerifyEmail = () => {
+  return (index.h("sqm-banking-info-form", { demoData: {
+      ...stepFourProps,
+      states: {
+        ...stepFourProps.states,
+        showVerification: true,
+        isPartner: true,
+        formState: {
+          ...stepFourProps.states.formState,
+          paymentMethodChecked: "toPayPalAccount",
+        },
+      },
+    } }));
+};
 const TaxAndCashDashboardActiveW9Form = () => {
   return (index.h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
@@ -1755,6 +1770,7 @@ const TaxForm = /*#__PURE__*/Object.freeze({
   StepFourIsPartner: StepFourIsPartner,
   StepFourDirectToBankChecked: StepFourDirectToBankChecked,
   StepFourToPaypalChecked: StepFourToPaypalChecked,
+  StepFourReVerifyEmail: StepFourReVerifyEmail,
   TaxAndCashDashboardActiveW9Form: TaxAndCashDashboardActiveW9Form,
   TaxAndCashDashboardActiveW8BENForm: TaxAndCashDashboardActiveW8BENForm,
   TaxAndCashDashboardActiveW8BENEForm: TaxAndCashDashboardActiveW8BENEForm,

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

@@ -30,7 +30,7 @@ const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-96f
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-7ffcc0d4.js');
 const ShadowViewAddon = require('./ShadowViewAddon-040cffad.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-990a85a3.js');
-const sqmInvoiceTableView = require('./sqm-invoice-table-view-301eed81.js');
+const sqmInvoiceTableView = require('./sqm-invoice-table-view-ed76d7bd.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -14404,6 +14404,7 @@ const bankingFormProps = {
     loadingError: false,
   },
   callbacks: {
+    onVerificationHide: () => { },
     onVerification: () => { },
     onSubmit: async () => console.log("Submit"),
     setPaymentMethodChecked: () => { },

package/dist/collection/components/sqm-payout-button-scroll/sqm-payout-button-scroll.js

@@ -1,8 +1,10 @@
 import { Component, h, Prop, State } from "@stencil/core";
 import { withHooks } from "@saasquatch/stencil-hooks";
+import { isDemo } from "@saasquatch/component-boilerplate";
 import { getProps } from "../../utils/utils";
 import { PayoutButtonScrollView, } from "./sqm-payout-button-scroll-view";
 import deepmerge from "deepmerge";
+import { usePayoutButton } from "./usePayoutButton";
 /**
  * @uiName Payout Button Scroll
  */
@@ -25,7 +27,9 @@ export class PayoutButtonScroll {
     return getProps(this);
   }
   render() {
-    const props = useDemoPayoutButtonScroll(this);
+    const props = isDemo()
+      ? useDemoPayoutButtonScroll(this)
+      : usePayoutButton(this);
     return h(PayoutButtonScrollView, Object.assign({}, props));
   }
   static get is() { return "sqm-payout-button-scroll"; }

package/dist/collection/components/sqm-payout-button-scroll/usePayoutButton.js

@@ -1,6 +1,6 @@
 import { gql } from "graphql-request";
 import { useQuery } from "@saasquatch/component-boilerplate";
-import { useEffect, useState } from "@saasquatch/universal-hooks";
+import { useEffect } from "@saasquatch/universal-hooks";
 const GET_PAYOUT_DETAILS = gql `
   query getPayoutDetails {
     user: viewer {
@@ -21,15 +21,8 @@ const GET_PAYOUT_DETAILS = gql `
   }
 `;
 export function usePayoutButton(props) {
+  var _a, _b, _c;
   const { data, refetch } = useQuery(GET_PAYOUT_DETAILS, {});
-  const [completed, setCompleted] = useState(false);
-  useEffect(() => {
-    var _a, _b, _c;
-    if (!data)
-      return;
-    const hasCompleted = (_c = (_b = (_a = data.user) === null || _a === void 0 ? void 0 : _a.impactConnection) === null || _b === void 0 ? void 0 : _b.publisher) === null || _c === void 0 ? void 0 : _c.payoutAccount;
-    setCompleted(hasCompleted);
-  }, [data]);
   useEffect(() => {
     const cb = () => refetch();
     window.addEventListener("sqm:tax-form-updated", cb);
@@ -37,7 +30,7 @@ export function usePayoutButton(props) {
   }, []);
   return {
     states: {
-      payoutSettingsComplete: completed,
+      payoutSettingsComplete: !!((_c = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.impactConnection) === null || _b === void 0 ? void 0 : _b.publisher) === null || _c === void 0 ? void 0 : _c.payoutsAccount),
     },
     text: props.getTextProps(),
   };

package/dist/collection/components/sqm-widget-verification/sqm-code-verification/sqm-code-verification-view.js

@@ -8,7 +8,7 @@ const style = {
     display: "flex",
     flexDirection: "column",
     gap: "var(--sl-spacing-medium)",
-    maxWidth: "515px",
+    maxWidth: "550px",
   },
   HeaderContainer: {
     display: "flex",

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

@@ -21,6 +21,7 @@ const bankingFormProps = {
     loadingError: false,
   },
   callbacks: {
+    onVerificationHide: () => { },
     onVerification: () => { },
     onSubmit: async () => console.log("Submit"),
     setPaymentMethodChecked: () => { },

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

@@ -210,6 +210,7 @@ const stepFourProps = {
     },
   },
   callbacks: {
+    onVerificationHide: () => { },
     onVerification: () => { },
     onSubmit: async () => console.log("Submit"),
     setPaymentMethodChecked: () => { },
@@ -758,6 +759,20 @@ export const StepFourToPaypalChecked = () => {
       },
     } }));
 };
+export const StepFourReVerifyEmail = () => {
+  return (h("sqm-banking-info-form", { demoData: {
+      ...stepFourProps,
+      states: {
+        ...stepFourProps.states,
+        showVerification: true,
+        isPartner: true,
+        formState: {
+          ...stepFourProps.states.formState,
+          paymentMethodChecked: "toPayPalAccount",
+        },
+      },
+    } }));
+};
 export const TaxAndCashDashboardActiveW9Form = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,

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

@@ -10,6 +10,7 @@ import { getFormMap } from "./formDefinitions";
 import { mockPaymentOptions } from "./mockData";
 import { BankingInfoFormView, } from "./sqm-banking-info-form-view";
 import { getFormInputs, paypalFeeMap, useBankingInfoForm, } from "./useBankingInfoForm";
+import { createStyleSheet } from "../../../styling/JSS";
 /**
  * @uiName Banking Information Form
  * @exampleGroup Common Components
@@ -308,15 +309,35 @@ export class BankingInfoForm {
       bitset: props.states.bitset,
       formMap,
     });
-    const searchStyle = {
+    const style = {
+      Dialog: {
+        "&::part(panel)": {
+          maxWidth: "420px",
+        },
+        "&::part(close-button)": {
+          marginBottom: "var(--sl-spacing-xx-large)",
+        },
+        "&::part(body)": {
+          padding: "0 var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
+          fontSize: "var(--sl-font-size-small)",
+        },
+        "&::part(footer)": {
+          display: "flex",
+          flexDirection: "column",
+          gap: "var(--sl-spacing-small)",
+          marginBottom: "var(--sl-spacing-xx-small)",
+          alignItems: "center",
+          flex: "1",
+        },
+      },
       SearchInput: {
         padding: "var(--sl-spacing-x-small)",
       },
     };
-    if (props.states.isPartner && props.states.showVerification) {
-      return (h("sqm-code-verification", { onVerification: props.callbacks.onVerification }));
-    }
+    const sheet = createStyleSheet(style);
     return (h(Host, null,
+      props.states.isPartner && props.states.showVerification ? (h("sl-dialog", { class: sheet.classes.Dialog, open: true, "onSl-hide": props.callbacks.onVerificationHide },
+        h("sqm-code-verification", { onVerification: props.callbacks.onVerification }))) : null,
       h(BankingInfoFormView, { callbacks: props.callbacks, text: props.text, states: props.states, refs: props.refs, slots: {
           formInputsSlot: inputFields === null || inputFields === void 0 ? void 0 : inputFields.map(({ input }) => input),
           countryInputSlot: (h("sl-select", Object.assign({ label: props.text.bankLocationLabel, disabled: props.states.saveLoading, required: true, name: "/bankCountry", id: "bankCountry", value: props.states.formState.bankCountry || "", "onSl-select": (e) => { var _a, _b; return props.callbacks.setBankCountry((_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.value); } }, (((_a = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _a === void 0 ? void 0 : _a.bankCountry) && {
@@ -326,7 +347,7 @@ export class BankingInfoForm {
               label: props.text.bankLocationLabel,
             }),
           })),
-            h("sl-input", { disabled: props.states.saveLoading, class: searchStyle.SearchInput, placeholder: this.searchForCountryText, onKeyDown: (e) => {
+            h("sl-input", { disabled: props.states.saveLoading, class: sheet.classes.SearchInput, placeholder: this.searchForCountryText, onKeyDown: (e) => {
                 // Stop shoelace intercepting key presses
                 e.stopPropagation();
               }, "onSl-input": (e) => {
@@ -1500,7 +1521,7 @@ export class BankingInfoForm {
       "mutable": false,
       "complexType": {
         "original": "DemoData<BankingInfoFormViewProps>",
-        "resolved": "{ states?: { showVerification: boolean; step?: string; locale?: string; loading: boolean; saveLoading?: boolean; disabled: boolean; saveDisabled: boolean; hideSteps?: boolean; hasPayPal: boolean; hideBanking?: boolean; hidePayPal?: boolean; hideBalanceThreshold?: boolean; hideFixedDay?: boolean; hideBackButton: boolean; feeCap?: string; isPartner: boolean; paymentMethodFeeLabel?: string; loadingError: boolean; formState: BankingInfoFormData & { paymentMethodChecked?: \"toBankAccount\" | \"toPayPalAccount\"; paymentScheduleChecked?: \"BALANCE_THRESHOLD\" | \"FIXED_DAY\"; errors?: { general?: boolean; inputErrors?: { [field: string]: { type: \"required\" | \"invalid\"; }; }; }; }; bitset?: number; currency?: string; thresholds: string[]; countries?: { countryCode: string; displayName: string; }[]; allCountries?: { countryCode: string; displayName: string; }[]; currentPaymentOption?: any; showInputs?: boolean; bankCountry?: string; countrySearch?: string; }; slots?: { formInputsSlot?: VNode[]; countryInputSlot?: VNode; paymentMethodSlot?: VNode; paymentThresholdSelectSlot?: VNode; paymentFixedDaySelectSlot?: VNode; paypalInputSlot?: VNode; }; refs?: { formRef: any; }; }",
+        "resolved": "{ states?: { showVerification: boolean; step?: string; locale?: string; loading: boolean; saveLoading?: boolean; disabled: boolean; saveDisabled: boolean; hideSteps?: boolean; hasPayPal: boolean; hideBanking?: boolean; hidePayPal?: boolean; hideBalanceThreshold?: boolean; hideFixedDay?: boolean; hideBackButton: boolean; feeCap?: string; isPartner: boolean; paymentMethodFeeLabel?: string; loadingError: boolean; formState: BankingInfoFormData & { paymentMethodChecked?: \"toBankAccount\" | \"toPayPalAccount\"; paymentScheduleChecked?: \"BALANCE_THRESHOLD\" | \"FIXED_DAY\"; errors?: { general?: boolean; inputErrors?: { [field: string]: { type: \"required\" | \"invalid\"; }; }; }; }; bitset?: number; currency?: string; thresholds: string[]; countries?: { countryCode: string; displayName: string; }[]; allCountries?: { countryCode: string; displayName: string; }[]; currentPaymentOption?: any; showInputs?: boolean; bankCountry?: string; countrySearch?: string; }; slots?: { verificationDialogSlot?: VNode; formInputsSlot?: VNode[]; countryInputSlot?: VNode; paymentMethodSlot?: VNode; paymentThresholdSelectSlot?: VNode; paymentFixedDaySelectSlot?: VNode; paypalInputSlot?: VNode; }; refs?: { formRef: any; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -1611,6 +1632,7 @@ function useDemoBankingInfoForm(props) {
       hasPayPal: true,
     },
     callbacks: {
+      onVerificationHide: () => { },
       onSubmit: async () => {
         setStep("/dashboard");
       },

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

@@ -289,7 +289,8 @@ export function useBankingInfoForm(props) {
       });
       setShowVerification(false);
     }
-    await runMutation(formData, token);
+    if (token)
+      await runMutation(formData, token);
   };
   const onVerification = async (token) => {
     host.dispatchEvent(new CustomEvent(VERIFICATION_EVENT_KEY, {
@@ -322,6 +323,7 @@ export function useBankingInfoForm(props) {
       onBack: () => setStep("/dashboard"),
       setCountrySearch,
       onVerification,
+      onVerificationHide: () => onVerification(null),
     },
     states: {
       showVerification,

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

@@ -159,6 +159,7 @@ const style = {
   PageDescriptionText: {
     color: "var(--sl-color-neutral-500)",
     fontSize: "var(--sl-font-size-medium)",
+    marginTop: "0",
   },
   Dialog: {
     "&::part(panel)": {
@@ -327,20 +328,18 @@ export const TaxAndCashDashboardView = (props) => {
         h("strong", null, text.error.generalTitle),
         h("br", null),
         text.error.generalDescription)),
-      states.payoutStatus && states.payoutStatus !== "DONE" && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", name: (_b = getAlert(states.payoutStatus)) === null || _b === void 0 ? void 0 : _b.alertType, open: true, class: (_c = getAlert(states.payoutStatus)) === null || _c === void 0 ? void 0 : _c.class },
+      getAlert(states.payoutStatus) && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", name: (_b = getAlert(states.payoutStatus)) === null || _b === void 0 ? void 0 : _b.alertType, open: true, class: (_c = getAlert(states.payoutStatus)) === null || _c === void 0 ? void 0 : _c.class },
         h("sl-icon", { slot: "icon", name: (_d = getAlert(states.payoutStatus)) === null || _d === void 0 ? void 0 : _d.icon }),
         h("strong", null, getAlert(states.payoutStatus).header),
         h("p", { style: { margin: "0" } }, getAlert(states.payoutStatus).description),
-        getAlert(states.payoutStatus).buttonText && (h("sl-button", { style: { marginTop: "var(--sl-spacing-x-small)" }, type: "default", loading: states.loading, 
-          //AL: TODO hooks
-          onClick: () => callbacks.onClick }, getAlert(states.payoutStatus).buttonText)))),
+        getAlert(states.payoutStatus).buttonText && (h("sl-button", { style: { marginTop: "var(--sl-spacing-x-small)" }, type: "default", loading: states.veriffLoading, onClick: () => callbacks.onVerifyClick() }, getAlert(states.payoutStatus).buttonText)))),
       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", 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", null, text.bankingInformationSectionHeader),
+        h("h3", { style: { marginBottom: "0" } }, text.bankingInformationSectionHeader),
         h("p", { class: sheet.classes.PageDescriptionText }, text.taxAndPayoutsDescription),
         h("div", { class: sheet.classes.BankingInformationContainer },
           slots.payoutDetailsCardSlot,

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

@@ -12,7 +12,7 @@ import { u as useChildElements } from './useChildElements-fc84e640.js';
 import { l as luxon } from './luxon-7600be8d.js';
 import { g as generateUserError } from './useReferralTable-f6ffa103.js';
 import { g as getProps, l as luxonLocale } from './utils-334c1e34.js';
-import { t as taxTypeToName, v as validTaxDocument, a as INDIRECT_TAX_SPAIN_REGIONS, b as INDIRECT_TAX_PROVINCES, g as getCountryObj, O as OtherRegionSlotView, I as InvoiceTableView, E as ErrorView, L as LoadingView, c as vatLabels, G as GeneralLoadingView, f as formatErrorMessage, d as validateBillingField, o as objectIsFull, A as ADDRESS_REGIONS } from './sqm-invoice-table-view-1f26f252.js';
+import { t as taxTypeToName, v as validTaxDocument, a as INDIRECT_TAX_SPAIN_REGIONS, b as INDIRECT_TAX_PROVINCES, g as getCountryObj, O as OtherRegionSlotView, I as InvoiceTableView, E as ErrorView, L as LoadingView, c as vatLabels, G as GeneralLoadingView, f as formatErrorMessage, d as validateBillingField, o as objectIsFull, A as ADDRESS_REGIONS } from './sqm-invoice-table-view-6601d8f2.js';
 import { b as VERIFICATION_EVENT_KEY } from './keys-db1897ae.js';
 import { T as TAX_FORM_UPDATED_EVENT_KEY, a as useVeriffApp, g as getStatus, V as VERIFF_COMPLETE_EVENT_KEY } from './usePayoutStatus-d613ff10.js';
 import { e as extractProps } from './extractProps-ae1afbb3.js';
@@ -1186,7 +1186,8 @@ function useBankingInfoForm(props) {
       });
       setShowVerification(false);
     }
-    await runMutation(formData, token);
+    if (token)
+      await runMutation(formData, token);
   };
   const onVerification = async (token) => {
     host.dispatchEvent(new CustomEvent(VERIFICATION_EVENT_KEY, {
@@ -1219,6 +1220,7 @@ function useBankingInfoForm(props) {
       onBack: () => setStep("/dashboard"),
       setCountrySearch,
       onVerification,
+      onVerificationHide: () => onVerification(null),
     },
     states: {
       showVerification,
@@ -1552,15 +1554,33 @@ const BankingInfoForm = class {
       bitset: props.states.bitset,
       formMap,
     });
-    const searchStyle = {
+    const style = {
+      Dialog: {
+        "&::part(panel)": {
+          maxWidth: "420px",
+        },
+        "&::part(close-button)": {
+          marginBottom: "var(--sl-spacing-xx-large)",
+        },
+        "&::part(body)": {
+          padding: "0 var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
+          fontSize: "var(--sl-font-size-small)",
+        },
+        "&::part(footer)": {
+          display: "flex",
+          flexDirection: "column",
+          gap: "var(--sl-spacing-small)",
+          marginBottom: "var(--sl-spacing-xx-small)",
+          alignItems: "center",
+          flex: "1",
+        },
+      },
       SearchInput: {
         padding: "var(--sl-spacing-x-small)",
       },
     };
-    if (props.states.isPartner && props.states.showVerification) {
-      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: {
+    const sheet = createStyleSheet(style);
+    return (h(Host, null, props.states.isPartner && props.states.showVerification ? (h("sl-dialog", { class: sheet.classes.Dialog, open: true, "onSl-hide": props.callbacks.onVerificationHide }, h("sqm-code-verification", { onVerification: props.callbacks.onVerification }))) : null, h(BankingInfoFormView, { callbacks: props.callbacks, text: props.text, states: props.states, refs: props.refs, slots: {
         formInputsSlot: inputFields === null || inputFields === void 0 ? void 0 : inputFields.map(({ input }) => input),
         countryInputSlot: (h("sl-select", Object.assign({ label: props.text.bankLocationLabel, disabled: props.states.saveLoading, required: true, name: "/bankCountry", id: "bankCountry", value: props.states.formState.bankCountry || "", "onSl-select": (e) => { var _a, _b; return props.callbacks.setBankCountry((_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.value); } }, (((_a = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _a === void 0 ? void 0 : _a.bankCountry) && {
           class: "error-input",
@@ -1568,7 +1588,7 @@ const BankingInfoForm = class {
             type: (_c = (_b = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _b === void 0 ? void 0 : _b.bankCountry) === null || _c === void 0 ? void 0 : _c.type,
             label: props.text.bankLocationLabel,
           }),
-        })), h("sl-input", { disabled: props.states.saveLoading, class: searchStyle.SearchInput, placeholder: this.searchForCountryText, onKeyDown: (e) => {
+        })), h("sl-input", { disabled: props.states.saveLoading, class: sheet.classes.SearchInput, placeholder: this.searchForCountryText, onKeyDown: (e) => {
             // Stop shoelace intercepting key presses
             e.stopPropagation();
           }, "onSl-input": (e) => {
@@ -1684,6 +1704,7 @@ function useDemoBankingInfoForm(props) {
       hasPayPal: true,
     },
     callbacks: {
+      onVerificationHide: () => { },
       onSubmit: async () => {
         setStep("/dashboard");
       },
@@ -5046,6 +5067,7 @@ const style$5 = {
   PageDescriptionText: {
     color: "var(--sl-color-neutral-500)",
     fontSize: "var(--sl-font-size-medium)",
+    marginTop: "0",
   },
   Dialog: {
     "&::part(panel)": {
@@ -5214,20 +5236,18 @@ const TaxAndCashDashboardView = (props) => {
         h("strong", null, text.error.generalTitle),
         h("br", null),
         text.error.generalDescription)),
-      states.payoutStatus && states.payoutStatus !== "DONE" && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", name: (_b = getAlert(states.payoutStatus)) === null || _b === void 0 ? void 0 : _b.alertType, open: true, class: (_c = getAlert(states.payoutStatus)) === null || _c === void 0 ? void 0 : _c.class },
+      getAlert(states.payoutStatus) && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", name: (_b = getAlert(states.payoutStatus)) === null || _b === void 0 ? void 0 : _b.alertType, open: true, class: (_c = getAlert(states.payoutStatus)) === null || _c === void 0 ? void 0 : _c.class },
         h("sl-icon", { slot: "icon", name: (_d = getAlert(states.payoutStatus)) === null || _d === void 0 ? void 0 : _d.icon }),
         h("strong", null, getAlert(states.payoutStatus).header),
         h("p", { style: { margin: "0" } }, getAlert(states.payoutStatus).description),
-        getAlert(states.payoutStatus).buttonText && (h("sl-button", { style: { marginTop: "var(--sl-spacing-x-small)" }, type: "default", loading: states.loading, 
-          //AL: TODO hooks
-          onClick: () => callbacks.onClick }, getAlert(states.payoutStatus).buttonText)))),
+        getAlert(states.payoutStatus).buttonText && (h("sl-button", { style: { marginTop: "var(--sl-spacing-x-small)" }, type: "default", loading: states.veriffLoading, onClick: () => callbacks.onVerifyClick() }, getAlert(states.payoutStatus).buttonText)))),
       h("sl-dialog", { label: text.replaceTaxFormModalHeader, class: sheet$4.classes.Dialog, open: states.showNewFormDialog, "onSl-hide": callbacks.onNewFormCancel },
         h("p", null, text.replaceTaxFormModalBodyText),
         h("sl-button", { slot: "footer", type: "primary", class: sheet$4.classes.DialogButton, onClick: callbacks.onNewFormClick }, text.newFormButton),
         h("sl-button", { slot: "footer", type: "default", class: sheet$4.classes.DialogButton, onClick: callbacks.onNewFormCancel }, text.cancelButton)),
       states.status === "INACTIVE" && alertMap[states.status],
       h("div", null,
-        h("h3", null, text.bankingInformationSectionHeader),
+        h("h3", { style: { marginBottom: "0" } }, text.bankingInformationSectionHeader),
         h("p", { class: sheet$4.classes.PageDescriptionText }, text.taxAndPayoutsDescription),
         h("div", { class: sheet$4.classes.BankingInformationContainer },
           slots.payoutDetailsCardSlot,

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

@@ -1739,6 +1739,41 @@ function PayoutButtonScrollView(props) {
     h$1("p", { class: sheet$2.classes.PayoutButtonDescription }, text.payoutButtonDescription)));
 }
 
+const GET_PAYOUT_DETAILS = dist.gql `
+  query getPayoutDetails {
+    user: viewer {
+      ... on User {
+        id
+        impactConnection {
+          connected
+          publisher {
+            id
+            payoutsAccount {
+              hold
+              balance
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+function usePayoutButton(props) {
+  var _a, _b, _c;
+  const { data, refetch } = En(GET_PAYOUT_DETAILS, {});
+  useEffect(() => {
+    const cb = () => refetch();
+    window.addEventListener("sqm:tax-form-updated", cb);
+    return () => window.removeEventListener("sqm:tax-form-updated", cb);
+  }, []);
+  return {
+    states: {
+      payoutSettingsComplete: !!((_c = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.impactConnection) === null || _b === void 0 ? void 0 : _b.publisher) === null || _c === void 0 ? void 0 : _c.payoutsAccount),
+    },
+    text: props.getTextProps(),
+  };
+}
+
 const PayoutButtonScroll = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -1759,7 +1794,9 @@ const PayoutButtonScroll = class {
     return getProps(this);
   }
   render() {
-    const props = useDemoPayoutButtonScroll(this);
+    const props = isDemo()
+      ? useDemoPayoutButtonScroll(this)
+      : usePayoutButton(this);
     return h$1(PayoutButtonScrollView, Object.assign({}, props));
   }
 };

package/dist/esm/sqm-code-verification.entry.js

@@ -15,7 +15,7 @@ const style = {
     display: "flex",
     flexDirection: "column",
     gap: "var(--sl-spacing-medium)",
-    maxWidth: "515px",
+    maxWidth: "550px",
   },
   HeaderContainer: {
     display: "flex",