@saasquatch/mint-components 1.8.0-99 → 1.8.0

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

@@ -1,8 +1,7 @@
-import { isDemo } from "@saasquatch/component-boilerplate";
+import { isDemo, useSetParent } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
-import { Component, h, Host, Prop, State } from "@stencil/core";
+import { Component, Host, Prop, State, h } from "@stencil/core";
 import deepmerge from "deepmerge";
-import { useParent } from "../../../utils/useParentState";
 import { getProps } from "../../../utils/utils";
 import { TAX_CONTEXT_NAMESPACE } from "../sqm-tax-and-cash/data";
 import { UserInfoFormView } from "./sqm-user-info-form-view";
@@ -15,107 +14,108 @@ export class TaxForm {
   constructor() {
     this.ignored = true;
     /**
-     * Label text for first name input
-     * @uiName First name label
+     * @uiName First name field label
      */
     this.firstName = "First name";
     /**
-     * Label text for last name input
-     * @uiName Last name label
+     * @uiName Last name field label
      */
     this.lastName = "Last name";
     /**
-     * Label text for email input
-     * @uiName Email label
+     * @uiName Email field label
      */
     this.email = "Email";
     /**
-     * Label text for country input
-     * @uiName Country label
+     * @uiName Country field label
      */
     this.country = "Country";
     /**
-     * Label text for currency input
-     * @uiName Currency label
+     * @uiName Currency field label
      */
     this.currency = "Currency";
     /**
-     * Help text shown underneath currency input
-     * @uiName Currency help text
+     * @uiName Currency field help text
      */
     this.currencyHelpText = "Choose your preferred payout currency";
     /**
-     * Label text for tax and banking collection checkbox
-     * @uiName Tax and banking label
-     */
-    this.allowBankingCollection = "I have read the {termsAndConditionsLink} and allow impact.com to collect my tax and banking information";
-    /**
-     * Sub text shown at the top of the page, used to show the current step of the tax form.
-     * @uiName Tax form step text
+     * @uiName Setup progress
      */
     this.formStep = "Step {step} of {count}";
     /**
-     * Heading text shown above the forms inputs.
-     * @uiName Form heading text
+     * @uiName Step 1 title
      */
     this.personalInformation = "Personal Information";
     /**
-     * Text shown inside of submit button
-     * @uiName Submit button text
+     * @uiName Continue button label
      */
     this.continueButton = "Continue";
     /**
-     * Alert header text shown in alert if user is already a registered partner
-     * @uiName Participant is partner title
+     * Part of the alert displayed at the top of the page if the participant is already a registered partner on impact.com.
+     * @uiName Participant is a partner alert title
+     * @uiWidget textArea
      */
     this.isPartnerAlertHeader = "An account with this email already exists with our referral program provider, impact.com";
     /**
-     * Alert description text shown in alert if user is already a registered partner
-     * @uiName Participant is partner description
+     * Part of the alert displayed at the top of the page if the participant is already a registered partner on impact.com.
+     * @uiName Participant is a partner alert description
+     * @uiWidget textArea
      */
     this.isPartnerAlertDescription = "If you don’t recognize this referral program provider or believe this is a mistake, please contact Support or sign up for this referral program with a different email.";
     /**
-     * The title for error message shown at the top of the page in an error banner
-     *
-     * @uiName General error title
+     * Part of the alert displayed at the top of the page.
+     * @uiName Form submission error message title
+     * @uiWidget textArea
      */
     this.generalErrorTitle = "There was a problem submitting your information";
     /**
-     * The error message shown at the top of the page in an error banner
-     *
-     * @uiName General error text
+     * Part of the alert displayed at the top of the page.
+     * @uiName Form submission error message description
+     * @uiWidget textArea
      */
     this.generalErrorDescription = "Please review your information and try again. If this problem continues, contact Support.";
     /**
-     * Label text for terms and conditions
-     * @uiName Terms and conditions label text
+     * Edit the property called terms and conditions text to change what's displayed for {termsAndConditionsLink}.
+     * @uiName Terms and conditions checkbox
+     */
+    this.allowBankingCollection = "I have read the {termsAndConditionsLink} and allow impact.com to collect my tax and banking information";
+    /**
+     * The text link that appears in the terms and conditions checkbox
+     * @uiName Terms and conditions text
+     * @uiWidget textArea
      */
-    this.termsAndConditionsLabel = "Terms and Conditions";
+    this.termsAndConditionsLabel = "terms and conditions";
     /**
      * Placeholder text displayed in the country search dropdown
-     * @uiName Search for country text
+     * @uiName Country field placeholder text
      */
     this.searchForCountryText = "Search for country..";
     /**
      * Placeholder text displayed in the currency search dropdown
-     * @uiName Search for currency text
+     * @uiName Currency field placeholder text
      */
     this.searchForCurrencyText = "Search for currency..";
     /**
-     * Required error text shown at the bottom of field inputs
-     * @uiName Field inputs error text
+     * Displayed under a field that is missing required information.
+     * @uiName Empty form field error message
      */
     this.fieldRequiredError = "{fieldName} is required";
     /**
-     * Alert header shown if there is a problem loading a form
-     * @uiName Loading error alert header
+     * Part of the alert displayed at the top of the page.
+     * @uiName Page load error message title
+     * @uiWidget textArea
      */
     this.loadingErrorAlertHeader = "There was a problem loading your form";
     /**
-     * Alert description shown if there is a problem loading a form
-     * @uiName Loading error alert description
+     * Part of the alert displayed at the top of the page.
+     * @uiName Page load error message description
+     * @uiWidget textArea
      */
     this.loadingErrorAlertDescription = "Please refresh the page and try again. If this problem continues, contact Support.";
+    /**
+     * Displayed at the top of the page on all set up steps.
+     * @uiName Page description
+     */
+    this.taxAndPayoutsDescription = "Submit your tax documents and add your banking information to receive your rewards.";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -133,7 +133,6 @@ export class TaxForm {
     };
   }
   render() {
-    console.debug("Rendering user info form");
     const props = isDemo() ? useDemoUserInfoForm(this) : useUserInfoForm(this);
     return (h(Host, null,
       h(UserInfoFormView, { data: props.data, 
@@ -158,10 +157,10 @@ export class TaxForm {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "First name label",
+            "text": "First name field label",
             "name": "uiName"
           }],
-        "text": "Label text for first name input"
+        "text": ""
       },
       "attribute": "first-name",
       "reflect": false,
@@ -179,10 +178,10 @@ export class TaxForm {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Last name label",
+            "text": "Last name field label",
             "name": "uiName"
           }],
-        "text": "Label text for last name input"
+        "text": ""
       },
       "attribute": "last-name",
       "reflect": false,
@@ -200,10 +199,10 @@ export class TaxForm {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Email label",
+            "text": "Email field label",
             "name": "uiName"
           }],
-        "text": "Label text for email input"
+        "text": ""
       },
       "attribute": "email",
       "reflect": false,
@@ -221,10 +220,10 @@ export class TaxForm {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Country label",
+            "text": "Country field label",
             "name": "uiName"
           }],
-        "text": "Label text for country input"
+        "text": ""
       },
       "attribute": "country",
       "reflect": false,
@@ -242,10 +241,10 @@ export class TaxForm {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Currency label",
+            "text": "Currency field label",
             "name": "uiName"
           }],
-        "text": "Label text for currency input"
+        "text": ""
       },
       "attribute": "currency",
       "reflect": false,
@@ -263,36 +262,15 @@ export class TaxForm {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Currency help text",
+            "text": "Currency field help text",
             "name": "uiName"
           }],
-        "text": "Help text shown underneath currency input"
+        "text": ""
       },
       "attribute": "currency-help-text",
       "reflect": false,
       "defaultValue": "\"Choose your preferred payout currency\""
     },
-    "allowBankingCollection": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Tax and banking label",
-            "name": "uiName"
-          }],
-        "text": "Label text for tax and banking collection checkbox"
-      },
-      "attribute": "allow-banking-collection",
-      "reflect": false,
-      "defaultValue": "\"I have read the {termsAndConditionsLink} and allow impact.com to collect my tax and banking information\""
-    },
     "formStep": {
       "type": "string",
       "mutable": false,
@@ -305,10 +283,10 @@ export class TaxForm {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Tax form step text",
+            "text": "Setup progress",
             "name": "uiName"
           }],
-        "text": "Sub text shown at the top of the page, used to show the current step of the tax form."
+        "text": ""
       },
       "attribute": "form-step",
       "reflect": false,
@@ -326,10 +304,10 @@ export class TaxForm {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Form heading text",
+            "text": "Step 1 title",
             "name": "uiName"
           }],
-        "text": "Heading text shown above the forms inputs."
+        "text": ""
       },
       "attribute": "personal-information",
       "reflect": false,
@@ -347,10 +325,10 @@ export class TaxForm {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Submit button text",
+            "text": "Continue button label",
             "name": "uiName"
           }],
-        "text": "Text shown inside of submit button"
+        "text": ""
       },
       "attribute": "continue-button",
       "reflect": false,
@@ -368,10 +346,13 @@ export class TaxForm {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Participant is partner title",
+            "text": "Participant is a partner alert title",
             "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
           }],
-        "text": "Alert header text shown in alert if user is already a registered partner"
+        "text": "Part of the alert displayed at the top of the page if the participant is already a registered partner on impact.com."
       },
       "attribute": "is-partner-alert-header",
       "reflect": false,
@@ -389,10 +370,13 @@ export class TaxForm {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Participant is partner description",
+            "text": "Participant is a partner alert description",
             "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
           }],
-        "text": "Alert description text shown in alert if user is already a registered partner"
+        "text": "Part of the alert displayed at the top of the page if the participant is already a registered partner on impact.com."
       },
       "attribute": "is-partner-alert-description",
       "reflect": false,
@@ -410,10 +394,13 @@ export class TaxForm {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "General error title",
+            "text": "Form submission error message title",
             "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
           }],
-        "text": "The title for error message shown at the top of the page in an error banner"
+        "text": "Part of the alert displayed at the top of the page."
       },
       "attribute": "general-error-title",
       "reflect": false,
@@ -431,15 +418,39 @@ export class TaxForm {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "General error text",
+            "text": "Form submission error message description",
             "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
           }],
-        "text": "The error message shown at the top of the page in an error banner"
+        "text": "Part of the alert displayed at the top of the page."
       },
       "attribute": "general-error-description",
       "reflect": false,
       "defaultValue": "\"Please review your information and try again. If this problem continues, contact Support.\""
     },
+    "allowBankingCollection": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Terms and conditions checkbox",
+            "name": "uiName"
+          }],
+        "text": "Edit the property called terms and conditions text to change what's displayed for {termsAndConditionsLink}."
+      },
+      "attribute": "allow-banking-collection",
+      "reflect": false,
+      "defaultValue": "\"I have read the {termsAndConditionsLink} and allow impact.com to collect my tax and banking information\""
+    },
     "termsAndConditionsLabel": {
       "type": "string",
       "mutable": false,
@@ -452,14 +463,17 @@ export class TaxForm {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Terms and conditions label text",
+            "text": "Terms and conditions text",
             "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
           }],
-        "text": "Label text for terms and conditions"
+        "text": "The text link that appears in the terms and conditions checkbox"
       },
       "attribute": "terms-and-conditions-label",
       "reflect": false,
-      "defaultValue": "\"Terms and Conditions\""
+      "defaultValue": "\"terms and conditions\""
     },
     "searchForCountryText": {
       "type": "string",
@@ -473,7 +487,7 @@ export class TaxForm {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Search for country text",
+            "text": "Country field placeholder text",
             "name": "uiName"
           }],
         "text": "Placeholder text displayed in the country search dropdown"
@@ -494,7 +508,7 @@ export class TaxForm {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Search for currency text",
+            "text": "Currency field placeholder text",
             "name": "uiName"
           }],
         "text": "Placeholder text displayed in the currency search dropdown"
@@ -515,10 +529,10 @@ export class TaxForm {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Field inputs error text",
+            "text": "Empty form field error message",
             "name": "uiName"
           }],
-        "text": "Required error text shown at the bottom of field inputs"
+        "text": "Displayed under a field that is missing required information."
       },
       "attribute": "field-required-error",
       "reflect": false,
@@ -536,10 +550,13 @@ export class TaxForm {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Loading error alert header",
+            "text": "Page load error message title",
             "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
           }],
-        "text": "Alert header shown if there is a problem loading a form"
+        "text": "Part of the alert displayed at the top of the page."
       },
       "attribute": "loading-error-alert-header",
       "reflect": false,
@@ -557,21 +574,45 @@ export class TaxForm {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Loading error alert description",
+            "text": "Page load error message description",
             "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
           }],
-        "text": "Alert description shown if there is a problem loading a form"
+        "text": "Part of the alert displayed at the top of the page."
       },
       "attribute": "loading-error-alert-description",
       "reflect": false,
       "defaultValue": "\"Please refresh the page and try again. If this problem continues, contact Support.\""
     },
+    "taxAndPayoutsDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Page description",
+            "name": "uiName"
+          }],
+        "text": "Displayed at the top of the page on all set up steps."
+      },
+      "attribute": "tax-and-payouts-description",
+      "reflect": false,
+      "defaultValue": "\"Submit your tax documents and add your banking information to receive your rewards.\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<UseUserInfoFormResult>",
-        "resolved": "{ states?: { step: string; hideSteps: boolean; disabled: boolean; loadingError: boolean; loading: boolean; isPartner: boolean; isUser: boolean; formState: { errors: {}; firstName: string; lastName: string; email: string; countryCode: string; currency: string; }; }; refs?: { formRef: Ref<HTMLFormElement>; currencyRef: Ref<HTMLSelectElement>; }; data?: { currencies: Currencies; countries: TaxCountry[]; allCurrencies: Currencies; allCountries: TaxCountry[]; }; setStep?: (value: string) => void; onSubmit?: (event: any) => Promise<void>; }",
+        "resolved": "{ states?: { step: string; hideSteps: boolean; disabled: boolean; loadingError: boolean; loading: boolean; isPartner: boolean; isUser: boolean; formState: { errors: {}; firstName: string; lastName: string; email: string; countryCode: string; currency: string; }; }; refs?: { formRef: Ref<HTMLFormElement>; currencyRef: Ref<HTMLSelectElement>; }; data?: { currencies: { displayName: string; currencyCode: string; }[]; countries: TaxCountry[]; allCurrencies: { displayName: string; currencyCode: string; }[]; allCountries: TaxCountry[]; }; setStep?: (value: string) => void; onSubmit?: (event: any) => Promise<void>; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -602,7 +643,7 @@ export class TaxForm {
   }; }
 }
 function useDemoUserInfoForm(props) {
-  const [step, setStep] = useParent(TAX_CONTEXT_NAMESPACE);
+  const setStep = useSetParent(TAX_CONTEXT_NAMESPACE);
   return deepmerge({
     setStep,
     onSubmit: () => {
@@ -634,11 +675,11 @@ function useDemoUserInfoForm(props) {
       loadingError: false,
       formState: {
         errors: {
-          email: true,
-          firstName: true,
-          lastName: true,
-          countryCode: true,
-          currency: true,
+          email: false,
+          firstName: false,
+          lastName: false,
+          countryCode: false,
+          currency: false,
         },
       },
     },

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

@@ -1,22 +1,19 @@
-import { useUserIdentity } from "@saasquatch/component-boilerplate";
-import { useEffect, useRef, useState } from "@saasquatch/universal-hooks";
+import { useEffect, useMemo, useRef, useState, } from "@saasquatch/universal-hooks";
 import jsonpointer from "jsonpointer";
-import { useParentQueryValue } from "../../../utils/useParentQuery";
-import { useParent, useParentValue } from "../../../utils/useParentState";
-import { COUNTRIES_QUERY_NAMESPACE, CURRENCIES_NAMESPACE, TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "../sqm-tax-and-cash/data";
+import { CURRENCIES_NAMESPACE, SORTED_COUNTRIES_NAMESPACE, TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "../sqm-tax-and-cash/data";
 import { objectIsFull } from "../utils";
+import { useParent, useParentQueryValue, useParentValue } from "@saasquatch/component-boilerplate";
 export function useUserInfoForm(props) {
-  var _a, _b, _c, _d, _e;
-  const user = useUserIdentity();
+  var _a, _b, _c, _d;
   const currencyRef = useRef(undefined);
   const formRef = useRef(null);
   const context = useParentValue(TAX_FORM_CONTEXT_NAMESPACE);
+  const countries = useParentValue(SORTED_COUNTRIES_NAMESPACE);
   const [step, setStep] = useParent(TAX_CONTEXT_NAMESPACE);
   const [userFormContext, setUserFormContext] = useParent(USER_FORM_CONTEXT_NAMESPACE);
   const { data, loading, errors: userError, } = useParentQueryValue(USER_QUERY_NAMESPACE);
-  const { data: countriesRes, loading: countriesLoading } = useParentQueryValue(COUNTRIES_QUERY_NAMESPACE);
-  const currencies = useParentValue(CURRENCIES_NAMESPACE);
-  const countries = (_a = countriesRes === null || countriesRes === void 0 ? void 0 : countriesRes.impactPayoutCountries) === null || _a === void 0 ? void 0 : _a.data;
+  const _currencies = useParentValue(CURRENCIES_NAMESPACE);
+  const currencies = useMemo(() => [...(_currencies || [])].sort((a, b) => a.displayName.localeCompare(b.displayName)), [_currencies]);
   const [countrySearch, setCountrySearch] = useState("");
   const [filteredCountries, setFilteredCountries] = useState(countries || []);
   const [currencySearch, setCurrencySearch] = useState("");
@@ -144,8 +141,8 @@ export function useUserInfoForm(props) {
       disabled: loading,
       loadingError: !!(userError === null || userError === void 0 ? void 0 : userError.message),
       loading: loading,
-      isPartner: !!((_c = (_b = data === null || data === void 0 ? void 0 : data.user) === null || _b === void 0 ? void 0 : _b.impactConnection) === null || _c === void 0 ? void 0 : _c.publisher),
-      isUser: !!((_e = (_d = data === null || data === void 0 ? void 0 : data.user) === null || _d === void 0 ? void 0 : _d.impactConnection) === null || _e === void 0 ? void 0 : _e.user),
+      isPartner: !!((_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),
+      isUser: !!((_d = (_c = data === null || data === void 0 ? void 0 : data.user) === null || _c === void 0 ? void 0 : _c.impactConnection) === null || _d === void 0 ? void 0 : _d.user),
       formState: {
         ...userFormContext,
         errors: formErrors,

package/dist/collection/components/tax-and-cash/utils.js

@@ -1,4 +1,12 @@
 import { intl } from "../../global/global";
+export function validTaxDocument(requiredType, currentType) {
+  if (requiredType === "W9" && currentType === "W9")
+    return true;
+  if ((requiredType === "W8BEN" || requiredType === "W8BENE") &&
+    (currentType === "W8BEN" || currentType === "W8BENE"))
+    return true;
+  return false;
+}
 export const objectIsFull = (obj) => {
   return !Object.keys(obj).find((k) => obj[k] == undefined);
 };
@@ -22,4 +30,13 @@ export const getIsRequiredErrorMessage = (fieldName, errorMessage) => {
     fieldName,
   });
 };
-//TODO: AL Add utils function for handling mapping of badge statuses to actual badge text in tax-and-cash-dashboard
+export function getCountryObj({ countryCode, locale, }) {
+  // @ts-ignore DisplayNames not in Intl type
+  const displayName = new Intl.DisplayNames([locale], {
+    type: "region",
+  }).of(countryCode);
+  return {
+    countryCode,
+    displayName,
+  };
+}

package/dist/collection/stories/PortalTemplates.stories.js

@@ -14,6 +14,7 @@ import editProfileTemplate from "../templates/EditProfile.html";
 import activityTemplate from "../templates/Activity.html";
 import resetPasswordEmailTemplate from "../templates/ResetPasswordEmail.html";
 import verifyEmailTemplate from "../templates/VerifyEmail.html";
+import taxPayoutReminderEmailTemplate from "../templates/taxPayoutReminderEmail.html";
 import loginTemplate from "../templates/Login.html";
 import registerTemplate from "../templates/Register.html";
 import forgotPasswordTemplate from "../templates/ForgotPassword.html";
@@ -112,3 +113,7 @@ export const VerifyEmail = createHookStory(() => {
   const { states, callbacks } = useTemplate(verifyEmailTemplate);
   return h(TemplateView, { states: states, callbacks: callbacks });
 });
+export const taxPayoutReminderEmail = createHookStory(() => {
+  const { states, callbacks } = useTemplate(taxPayoutReminderEmailTemplate);
+  return h(TemplateView, { states: states, callbacks: callbacks });
+});

package/dist/esm/{GenericTableView-a2b0ba19.js → GenericTableView-d59d8ab4.js}

@@ -1,4 +1,4 @@
-import { h } from './index-f16aa635.js';
+import { h } from './index-17b4da69.js';
 import { g as gap } from './mixins-f60a614c.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';