@saasquatch/mint-components 1.12.0-1 → 1.12.0-11

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

@@ -16,8 +16,10 @@ 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-ce9a34ac.js');
+const sqmInvoiceTableView = require('./sqm-invoice-table-view-c58966f8.js');
 const keys = require('./keys-cff24974.js');
+const usePayoutStatus = require('./usePayoutStatus-b9fb7399.js');
+const extractProps = require('./extractProps-fd93ba62.js');
 
 const TAX_CONTEXT_NAMESPACE = "sq:tax-and-cash";
 const TAX_FORM_CONTEXT_NAMESPACE = "sq:tax-form-context";
@@ -39,6 +41,11 @@ const GET_USER = index_module.dist.gql `
         email
         countryCode
         customFields
+        managedIdentity {
+          uid
+          email
+          emailVerified
+        }
         impactConnection {
           connected
           user {
@@ -82,6 +89,7 @@ const GET_USER = index_module.dist.gql `
             }
             payoutsAccount {
               hold
+              holdReasons
               balance
             }
           }
@@ -1182,6 +1190,12 @@ function useBankingInfoForm(props) {
     }
     await runMutation(formData, token);
   };
+  const onVerification = async (token) => {
+    host.dispatchEvent(new CustomEvent(keys.VERIFICATION_EVENT_KEY, {
+      detail: { token },
+      bubbles: false,
+    }));
+  };
   function setPaymentMethodChecked(paymentMethod) {
     _setPaymentMethodChecked(paymentMethod);
     if (paymentMethod === "toPayPalAccount") {
@@ -1206,6 +1220,7 @@ function useBankingInfoForm(props) {
       setPaymentScheduleChecked,
       onBack: () => setStep("/dashboard"),
       setCountrySearch,
+      onVerification,
     },
     states: {
       showVerification,
@@ -1545,7 +1560,7 @@ const BankingInfoForm = class {
       },
     };
     if (props.states.isPartner && props.states.showVerification) {
-      return index.h("sqm-code-verification", null);
+      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: {
         formInputsSlot: inputFields === null || inputFields === void 0 ? void 0 : inputFields.map(({ input }) => input),
@@ -1679,6 +1694,7 @@ function useDemoBankingInfoForm(props) {
       setPaymentScheduleChecked,
       setCountrySearch: () => { },
       onBack: async () => setStep("/dashboard"),
+      onVerification: () => { },
     },
     text: props.getTextProps(),
     refs: {
@@ -1920,7 +1936,6 @@ 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");
     }
@@ -3779,27 +3794,9 @@ const TableRow = class {
   }
 };
 
-/**
- * Util function for getting just the props with a certain prefix.
- * @param props Text props on stencil component
- * @param prefix Prefix denoting which group the text prop belongs to
- * @returns A new object with all keys with the prefix provided. The prefix is removed from each key.
- */
-function extractProps(props, prefix) {
-  const keys = Object.keys(props).filter((k) => k.startsWith(prefix));
-  const formattedProps = keys.reduce((prev, k) => {
-    const key = k.replace(prefix, "");
-    return {
-      ...prev,
-      [key]: props[k],
-    };
-  }, {});
-  return formattedProps;
-}
-
 function getCurrentStep(user) {
-  var _a;
-  if (!((_a = user.impactConnection) === null || _a === void 0 ? void 0 : _a.connected)) {
+  var _a, _b;
+  if (!((_a = user.impactConnection) === null || _a === void 0 ? void 0 : _a.connected) || !((_b = user.impactConnection) === null || _b === void 0 ? void 0 : _b.publisher)) {
     return "/1";
   }
   const { requiredTaxDocumentType, currentTaxDocument, withdrawalSettings, brandedSignup, } = user.impactConnection.publisher;
@@ -4693,14 +4690,14 @@ const TaxAndCashMonolith = class {
      * @uiGroup Dashboard Properties
      * @uiWidget textArea
      */
-    this.dashboard_errorTitleText = "Your payout is on hold ";
+    this.payoutHoldAlertHeader = "Your payout is on hold";
     /**
      * Part of the alert displayed at the top of the page when there’s been an issue preventing payouts.
      * @uiName Payout error message description
      * @uiGroup Dashboard Properties
      * @uiWidget textArea
      */
-    this.dashboard_errorDescriptionText = "If you’ve recently added your payout information, please wait while we verify your information. If it’s still on hold after a few days, please contact Support or check your inbox for an email from our referral program provider, impact.com.";
+    this.payoutHoldAlertDescription = "Please contact Support or check your inbox for an email from our referral program provider, impact.com.";
     /**
      * Text displayed for existing publishers that do not have saved banking information.
      * @uiName Payout missing information subtext
@@ -4850,7 +4847,7 @@ const TaxAndCashMonolith = class {
   getGeneralStepTextProps(prefix) {
     const props = utils.getProps(this);
     return {
-      ...extractProps(props, prefix),
+      ...extractProps.extractProps(props, prefix),
       generalErrorTitle: props.generalErrorTitle,
       generalErrorDescription: props.generalErrorDescription,
       fieldRequiredError: props.fieldRequiredError,
@@ -4915,6 +4912,12 @@ const style$5 = {
       borderTop: "none",
     },
   },
+  HoldAlertContainer: {
+    "&::part(base)": {
+      border: "none",
+      backgroundColor: "transparent",
+    },
+  },
   ExpiringSoonAlertContainer: {
     "&::part(base)": {
       backgroundColor: "var(--sl-color-yellow-100)",
@@ -5154,22 +5157,22 @@ const TaxAndCashDashboardView = (props) => {
         index.h("strong", null, text.error.generalTitle),
         index.h("br", null),
         text.error.generalDescription)),
-      states.identiyRequired && (index.h("div", null,
-        index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "warning", open: true, class: sheet$4.classes.ExpiringSoonAlertContainer },
-          index.h("sl-icon", { slot: "icon", name: "exclamation-triangle" }),
-          index.h("strong", null, text.verifyIdentityAlertHeader),
-          index.h("br", null),
-          text.verifyIdentityAlertMessage,
-          index.h("br", null),
-          index.h("sl-button", null, text.verifyIdentityButton)))),
-      index.h("sl-dialog", { 
-        // AL: todo plugin open dialog
-        label: " verify Identity iframe", class: sheet$4.classes.Dialog, open: states.showIdentityVerificationDialog },
-        index.h("div", { style: {
-            width: "420px",
-            height: "420px",
-            border: "1px dotted black",
-          } })),
+      states.hasHold && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "warning", open: true, class: sheet$4.classes.HoldAlertContainer },
+        index.h("sl-icon", { slot: "icon", name: "exclamation-triangle" }),
+        index.h("strong", null, text.payoutHoldAlertHeader),
+        index.h("br", null),
+        text.payoutHoldAlertDescription)),
+      states.payoutStatus === "VERIFICATION_NEEDED" && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "warning", open: true, class: sheet$4.classes.HoldAlertContainer },
+        index.h("sl-icon", { slot: "icon", name: "exclamation-triangle" }),
+        index.h("strong", null, text.verificationRequiredHeader),
+        index.h("p", { style: { margin: "0" } }, text.verificationRequiredDescription),
+        index.h("sl-button", { style: { marginTop: "var(--sl-spacing-x-small)" }, type: "default", loading: states.loading, 
+          //AL: TODO hooks
+          onClick: () => callbacks.onClick }, text.verificationRequiredButtonText))),
+      index.h("sl-dialog", { noDismiss: true, class: sheet$4.classes.Dialog, open: states.showVerifyIdentity, "onSl-hide": callbacks.onVerifyIdentityCancel },
+        index.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" })),
       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),
@@ -5275,10 +5278,11 @@ function getIndirectTaxType(taxInformation) {
   return "Indirect Tax";
 }
 const useTaxAndCashDashboard = (props) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
   const setStep = index_module.Sn(TAX_CONTEXT_NAMESPACE);
   const setContext = index_module.Sn(TAX_FORM_CONTEXT_NAMESPACE);
   const [showDialog, setShowDialog] = stencilHooks_module.useState(false);
+  const [showVerification, setShowVerification] = stencilHooks_module.useState(false);
   const locale = index_module.Q();
   stencilHooks_module.useEffect(() => {
     // Clear override context once on submitted
@@ -5309,6 +5313,7 @@ const useTaxAndCashDashboard = (props) => {
     setStep("/3");
   };
   const provinceName = (_d = sqmInvoiceTableView.INDIRECT_TAX_PROVINCES.find((p) => { var _a; return p.regionCode === ((_a = publisher === null || publisher === void 0 ? void 0 : publisher.taxInformation) === null || _a === void 0 ? void 0 : _a.indirectTaxRegion); })) === null || _d === void 0 ? void 0 : _d.displayName;
+  const payoutStatus = usePayoutStatus.getStatus(data);
   return {
     states: {
       dateSubmitted,
@@ -5330,12 +5335,16 @@ const useTaxAndCashDashboard = (props) => {
       loading,
       loadingError: !!(userError === null || userError === void 0 ? void 0 : userError.message),
       showNewFormDialog: showDialog,
+      hasHold: !!((_m = publisher === null || publisher === void 0 ? void 0 : publisher.payoutsAccount) === null || _m === void 0 ? void 0 : _m.hold),
+      payoutStatus,
+      showVerifyIdentity: showVerification,
     },
     callbacks: {
       onClick: () => setShowDialog(true),
       onEditPayoutInfo,
       onNewFormCancel: () => setShowDialog(false),
       onNewFormClick,
+      onVerifyIdentityCancel: () => setShowVerification(false),
     },
     text: props.getTextProps(),
   };
@@ -5403,18 +5412,6 @@ const TaxAndCashDashboard = class {
      * @uiName Inactive W-8 error message description
      */
     this.taxAlertNotActiveMessageW8 = "Your tax form may have expired or has personal information that doesn’t match your profile. Please submit a new {documentType} form.";
-    /**
-     * Part of the alert displayed at the top of the page.
-     *
-     * @uiName Verify identity warning message header
-     */
-    this.verifyIdentityAlertHeader = "Verify your identity";
-    /**
-     * Part of the alert displayed at the top of the page.
-     *
-     * @uiName Verify identity warning message description
-     */
-    this.verifyIdentityAlertMessage = "Complete your verification to start receiving your cash rewards. It should only take a few minutes verify.";
     /**
      * Additional text displayed next to the tax form's status badge.
      *
@@ -5519,18 +5516,35 @@ const TaxAndCashDashboard = class {
      * @uiName Payout error message title
      * @uiWidget textArea
      */
-    this.errorTitleText = "Your payout is on hold ";
+    this.payoutHoldAlertHeader = "Your payout is on hold";
     /**
      * Part of the alert displayed at the top of the page when there’s been an issue preventing payouts.
      * @uiName Payout error message description
      * @uiWidget textArea
      */
-    this.errorDescriptionText = "If you’ve recently added your payout information, please wait while we verify your information. If it’s still on hold after a few days, please contact Support or check your inbox for an email from our referral program provider, impact.com.";
+    this.payoutHoldAlertDescription = "Please contact Support or check your inbox for an email from our referral program provider, impact.com.";
     /**
      * Text displayed for existing publishers that do not have saved banking information.
      * @uiName Payout missing information subtext
      */
     this.payoutMissingInformationText = "Missing banking information, go to Impact.com to resolve.";
+    /**
+     * Part of the alert displayed at the top of the page when the user needs to verify their identity.
+     * @uiName Verification required alert message title
+     * @uiWidget textArea
+     */
+    this.verificationRequiredHeader = "Verify your identity";
+    /**
+     * Part of the alert displayed at the top of the page when the user needs to verify their identity
+     * @uiName Verification required alert message description
+     * @uiWidget textArea
+     */
+    this.verificationRequiredDescription = "Complete your verification to start receiving your cash rewards. It should only take a few minutes verify.";
+    /**
+     * Part of the alert displayed at the top of the page when the user needs to verify their identity.
+     * @uiName Verification required alert button text
+     */
+    this.verificationRequiredButtonText = "Start Verification";
     /**
      * Part of the alert displayed at the top of the page.
      * @uiName Form submission error message title
@@ -5615,10 +5629,6 @@ const TaxAndCashDashboard = class {
      * @uiName Cancel button label
      */
     this.cancelButton = "Cancel";
-    /**
-     * @uiName Verify button label
-     */
-    this.verifyIdentityButton = "Start Verification";
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
@@ -5657,12 +5667,16 @@ function useDemoTaxAndCashDashboard(props) {
       disabled: false,
       loading: false,
       showNewFormDialog: false,
+      hasHold: false,
+      showVerifyIdentity: false,
+      payoutStatus: "DONE",
     },
     callbacks: {
       onClick: () => console.debug("check step"),
       onEditPayoutInfo: () => console.debug("payout info"),
       onNewFormCancel: () => console.log("hide"),
       onNewFormClick: () => console.log("show"),
+      onVerifyIdentityCancel: () => console.log("hide"),
     },
     text: props.getTextProps(),
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
@@ -6719,7 +6733,6 @@ const style$6 = {
   },
   PhoneInputsSection: {
     display: "flex",
-    alignItems: "flex-end",
     flexDirection: "column",
     gap: "4px",
     "& p": {
@@ -6730,7 +6743,6 @@ const style$6 = {
   },
   PhoneInputsContainer: {
     display: "flex",
-    alignItems: "flex-end",
     gap: "4px",
     width: "100%",
     "& #phoneNumber": {
@@ -6871,10 +6883,7 @@ const UserInfoFormView = (props) => {
                     index.h("div", { slot: "prefix" }, `${(_a = PHONE_EXTENSIONS[c.countryCode]) === null || _a === void 0 ? void 0 : _a.name} `), (_b = PHONE_EXTENSIONS[c.countryCode]) === null || _b === void 0 ? void 0 :
                     _b.dial_code));
                 })),
-              index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", id: "phoneNumber", name: "/phoneNumber", value: formState.phoneNumber, validationError: ({ value }) => 
-                // Naive phone number validation
-                sqmInvoiceTableView.validateBillingField(/[a-zA-Z]+/, value) &&
-                  sqmInvoiceTableView.formatErrorMessage(text.phoneNumber, text.error.fieldInvalidError), disabled: states.disabled || states.isPartner }, (((_k = formState.errors) === null || _k === void 0 ? void 0 : _k.phoneNumber) ? {
+              index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", id: "phoneNumber", name: "/phoneNumber", value: formState.phoneNumber, validationError: true, disabled: states.disabled || states.isPartner }, (((_k = formState.errors) === null || _k === void 0 ? void 0 : _k.phoneNumber) ? {
                 class: classes.ErrorInput,
                 helpText: sqmInvoiceTableView.formatErrorMessage(text.phoneNumber, formState.errors.phoneNumber),
               }
@@ -6952,17 +6961,20 @@ function useUserInfoForm(props) {
   const [filteredCurrencies, setFilteredCurrencies] = stencilHooks_module.useState(currencies || []);
   const [formErrors, setErrors] = stencilHooks_module.useState({});
   stencilHooks_module.useEffect(() => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const user = data === null || data === void 0 ? void 0 : data.user;
     if (!user || step !== "/1")
       return;
     // If form already filled out, skip initialising it
     if (sqmInvoiceTableView.objectIsFull(userFormContext))
       return;
-    if (((_a = user.impactConnection) === null || _a === void 0 ? void 0 : _a.publisher) && ((_b = user.impactConnection) === null || _b === void 0 ? void 0 : _b.user)) {
+    // Prefer MI email if it was verified before this
+    const email = ((_a = user.managedIdentity) === null || _a === void 0 ? void 0 : _a.emailVerified) ? user.managedIdentity.email
+      : user.email;
+    if (((_b = user.impactConnection) === null || _b === void 0 ? void 0 : _b.publisher) && ((_c = user.impactConnection) === null || _c === void 0 ? void 0 : _c.user)) {
       // Initialise with partner information
       setUserFormContext({
-        email: user.email,
+        email,
         firstName: user.impactConnection.user.firstName,
         lastName: user.impactConnection.user.lastName,
         countryCode: user.impactConnection.publisher.countryCode,
@@ -6978,17 +6990,17 @@ function useUserInfoForm(props) {
     else if (!(userFormContext === null || userFormContext === void 0 ? void 0 : userFormContext.email)) {
       // Initialise with user information
       setUserFormContext({
-        email: user.email,
+        email,
         firstName: user.firstName,
         lastName: user.lastName,
         countryCode: user.countryCode || "US",
-        currency: (_c = user.customFields) === null || _c === void 0 ? void 0 : _c.currency,
-        phoneNumberCountryCode: ((_d = user.customFields) === null || _d === void 0 ? void 0 : _d.phoneNumberCountryCode) || "US",
-        phoneNumber: (_e = user.customFields) === null || _e === void 0 ? void 0 : _e.phoneNumber,
-        address: (_f = user.customFields) === null || _f === void 0 ? void 0 : _f.address,
-        city: (_g = user.customFields) === null || _g === void 0 ? void 0 : _g.city,
-        state: (_h = user.customFields) === null || _h === void 0 ? void 0 : _h.state,
-        postalCode: (_j = user.customFields) === null || _j === void 0 ? void 0 : _j.postalCode,
+        currency: (_d = user.customFields) === null || _d === void 0 ? void 0 : _d.currency,
+        phoneNumberCountryCode: ((_e = user.customFields) === null || _e === void 0 ? void 0 : _e.phoneNumberCountryCode) || "US",
+        phoneNumber: (_f = user.customFields) === null || _f === void 0 ? void 0 : _f.phoneNumber,
+        address: (_g = user.customFields) === null || _g === void 0 ? void 0 : _g.address,
+        city: (_h = user.customFields) === null || _h === void 0 ? void 0 : _h.city,
+        state: (_j = user.customFields) === null || _j === void 0 ? void 0 : _j.state,
+        postalCode: (_k = user.customFields) === null || _k === void 0 ? void 0 : _k.postalCode,
       });
     }
   }, [data, step, userFormContext]);
@@ -7067,6 +7079,8 @@ function useUserInfoForm(props) {
     const { allowBankingCollection, ...userData } = formData;
     setUserFormContext({
       ...userFormContext,
+      firstName: userData.firstName,
+      lastName: userData.lastName,
       phoneNumberCountryCode: userData.phoneNumberCountryCode,
       phoneNumber: userData.phoneNumber,
       countryCode: userData.countryCode,