@saasquatch/mint-components 1.8.0-99 → 1.8.0

package/dist/collection/components/tax-and-cash/sqm-docusign-form/sqm-docusign-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, Element, h, Host, Prop, State } from "@stencil/core";
+import { Component, Element, 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 { DocusignIframe, } from "./docusign-iframe/DocusignIframe";
@@ -17,128 +16,101 @@ export class DocusignForm {
   constructor() {
     this.ignored = true;
     /**
-     * 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 at the top of the page
-     * @uiName Tax form heading text
+     * @uiName Step 3 title
      */
     this.taxForm = "Tax form";
     /**
-     * Text shown at the top of the page next to the document type text
-     * @uiName Tax form label text
+     * Display the type of tax form that the participant must submit.
+     * @uiName Tax form name
      */
     this.taxFormLabel = "{documentType} Tax Form";
     /**
-     * Subtext shown at the top of the page next to the document type text
-     * @uiName Tax form subtext
+     * Displayed at the top of the page to participants based in the US.
+     * @uiName W-9 tax form description
+     * @uiWidget textArea
      */
     this.taxFormDescription = "Participants based in the US need to submit a {documentType} form.";
     /**
-     * Subtext shown at the top of the page next to the document type text for individual participants
-     * @uiName Tax form subtext
+     * Displayed at the top of the page to individuals joining a US program who reside outside the country.
+     * @uiName W-8 BEN tax form description
+     * @uiWidget textArea
      */
     this.taxFormDescriptionIndividualParticipant = "Participants residing outside of the US, joining the referral program of a US-based company, need to submit a {documentType} form.";
     /**
-     * Subtext shown at the top of the page next to the document type text for business entities
-     * @uiName Tax form subtext
+     * Displayed at the top of the page to participants representing a business.
+     * @uiName W-8 BEN-E tax form description
+     * @uiWidget textArea
      */
     this.taxFormDescriptionBusinessEntity = "Participants residing outside of the US who represent a business entity need to submit a {documentType} form.";
     /**
-     * Text shown in the link to the form for non US residents
-     * @uiName Not based in US link text
-     */
-    this.notBasedInUS = "Not based in the US?";
-    /**
-     * Text shown in the banner above the document
-     * @uiName Banner text
-     */
-    this.banner = "For your security, we automatically end your session when you have not interacted with the form after 20 minutes.";
-    /**
-     * Heading text for the form submission checkbox
-     * @uiName Form submission checkbox heading
-     */
-    this.checkboxLabel = "Form submission";
-    /**
-     * Label text for the form submission checkbox
-     * @uiName Form submission checkbox label
-     */
-    this.checkboxDescription = "I have completed and submitted my tax form";
-    /**
-     * Text inside iframe when Docusign expires
-     * @uiName Docusign expired text
+     * This appears inside the Docusign frame.
+     * @uiName Docusign session expired messag
+     * @uiWidget textArea
      */
     this.docusignExpired = "For your security and privacy, we automatically end your session after 20 minutes of inactivity. Please refresh and re-enter your tax information to continue.";
     /**
-     * Text inside iframe when Docusign form is compelted
-     * @uiName Docusign completed text
+     * Remind participants their session will time out after 20 minutes of inactivity.
+     * @uiName Docusign timed session message
+     * @uiWidget textArea
      */
-    this.docusignCompleted = "Your document has been completed and submitted.";
+    this.docusignSessionWarning = "For your security, we automatically end your session when you have not interacted with the form after 20 minutes.";
     /**
-     * Heading text for the participant type radio buttons
-     * @uiName Participant type radio buttons heading
+     * @uiName Participant type field label
      */
     this.participantType = "Participant type";
     /**
-     * Label text for the business entity radio button
-     * @uiName Business entity radio button label
+     * An option for the participant type field. Used to determine which W-8 form is required.
+     * @uiName Business representative participant type label
      */
     this.businessEntity = "I represent a business";
     /**
-     * Label text for the individual participant radio button
-     * @uiName Individual participant radio button label
+     * An option for the participant type field. Used to determine which W-8 form is required.
+     * @uiName Individual participant type label
      */
     this.individualParticipant = "I am an individual participant";
     /**
-     * Text inside iframe when Docusign form throws error
-     * @uiName Docusign error text
+     * This appears inside the Docusign frame.
+     * @uiName Docusign form error message
+     * @uiWidget textArea
      */
     this.docusignError = "There was a problem displaying this form. Please refresh the page. If this problem continues, contact Support.";
     /**
-     * Text shown inside of refresh button
-     * @uiName Refresh button text
+     * @uiName Refresh page button label
      */
     this.refreshButton = "Refresh Page";
     /**
-     * Text shown inside of back button
-     * @uiName Back button text
-     */
-    this.backButton = "Back";
-    /**
-     * Text shown inside of cancel button
-     * @uiName Cancel button text
-     */
-    this.cancelButton = "Cancel";
-    /**
-     * 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.";
     /**
-     * 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.";
     /**
-     * The error message shown at the bottom of the page if the user has not checked the form submission checkbox
-     *
-     * @uiName Form submission error text
+     * Displayed at the top of the page on all set up steps.
+     * @uiName Page description
      */
-    this.formSubmissionError = "This field is required";
+    this.taxAndPayoutsDescription = "Submit your tax documents and add your banking information to receive your rewards.";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -149,7 +121,6 @@ export class DocusignForm {
       error: {
         generalTitle: props.generalErrorTitle,
         generalDescription: props.generalErrorDescription,
-        formSubmission: props.formSubmissionError,
         participantType: props.participantType,
         loadingErrorAlertHeader: props.loadingErrorAlertHeader,
         loadingErrorAlertDescription: props.loadingErrorAlertDescription,
@@ -188,10 +159,10 @@ export class DocusignForm {
       "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,
@@ -209,10 +180,10 @@ export class DocusignForm {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Tax form heading text",
+            "text": "Step 3 title",
             "name": "uiName"
           }],
-        "text": "Heading text shown at the top of the page"
+        "text": ""
       },
       "attribute": "tax-form",
       "reflect": false,
@@ -230,10 +201,10 @@ export class DocusignForm {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Tax form label text",
+            "text": "Tax form name",
             "name": "uiName"
           }],
-        "text": "Text shown at the top of the page next to the document type text"
+        "text": "Display the type of tax form that the participant must submit."
       },
       "attribute": "tax-form-label",
       "reflect": false,
@@ -251,10 +222,13 @@ export class DocusignForm {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Tax form subtext",
+            "text": "W-9 tax form description",
             "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
           }],
-        "text": "Subtext shown at the top of the page next to the document type text"
+        "text": "Displayed at the top of the page to participants based in the US."
       },
       "attribute": "tax-form-description",
       "reflect": false,
@@ -272,10 +246,13 @@ export class DocusignForm {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Tax form subtext",
+            "text": "W-8 BEN tax form description",
             "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
           }],
-        "text": "Subtext shown at the top of the page next to the document type text for individual participants"
+        "text": "Displayed at the top of the page to individuals joining a US program who reside outside the country."
       },
       "attribute": "tax-form-description-individual-participant",
       "reflect": false,
@@ -293,99 +270,18 @@ export class DocusignForm {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Tax form subtext",
+            "text": "W-8 BEN-E tax form description",
             "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
           }],
-        "text": "Subtext shown at the top of the page next to the document type text for business entities"
+        "text": "Displayed at the top of the page to participants representing a business."
       },
       "attribute": "tax-form-description-business-entity",
       "reflect": false,
       "defaultValue": "\"Participants residing outside of the US who represent a business entity need to submit a {documentType} form.\""
     },
-    "notBasedInUS": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Not based in US link text",
-            "name": "uiName"
-          }],
-        "text": "Text shown in the link to the form for non US residents"
-      },
-      "attribute": "not-based-in-u-s",
-      "reflect": false,
-      "defaultValue": "\"Not based in the US?\""
-    },
-    "banner": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Banner text",
-            "name": "uiName"
-          }],
-        "text": "Text shown in the banner above the document"
-      },
-      "attribute": "banner",
-      "reflect": false,
-      "defaultValue": "\"For your security, we automatically end your session when you have not interacted with the form after 20 minutes.\""
-    },
-    "checkboxLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Form submission checkbox heading",
-            "name": "uiName"
-          }],
-        "text": "Heading text for the form submission checkbox"
-      },
-      "attribute": "checkbox-label",
-      "reflect": false,
-      "defaultValue": "\"Form submission\""
-    },
-    "checkboxDescription": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Form submission checkbox label",
-            "name": "uiName"
-          }],
-        "text": "Label text for the form submission checkbox"
-      },
-      "attribute": "checkbox-description",
-      "reflect": false,
-      "defaultValue": "\"I have completed and submitted my tax form\""
-    },
     "docusignExpired": {
       "type": "string",
       "mutable": false,
@@ -398,16 +294,19 @@ export class DocusignForm {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Docusign expired text",
+            "text": "Docusign session expired messag",
             "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
           }],
-        "text": "Text inside iframe when Docusign expires"
+        "text": "This appears inside the Docusign frame."
       },
       "attribute": "docusign-expired",
       "reflect": false,
       "defaultValue": "\"For your security and privacy, we automatically end your session after 20 minutes of inactivity. Please refresh and re-enter your tax information to continue.\""
     },
-    "docusignCompleted": {
+    "docusignSessionWarning": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -419,14 +318,17 @@ export class DocusignForm {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Docusign completed text",
+            "text": "Docusign timed session message",
             "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
           }],
-        "text": "Text inside iframe when Docusign form is compelted"
+        "text": "Remind participants their session will time out after 20 minutes of inactivity."
       },
-      "attribute": "docusign-completed",
+      "attribute": "docusign-session-warning",
       "reflect": false,
-      "defaultValue": "\"Your document has been completed and submitted.\""
+      "defaultValue": "\"For your security, we automatically end your session when you have not interacted with the form after 20 minutes.\""
     },
     "participantType": {
       "type": "string",
@@ -440,10 +342,10 @@ export class DocusignForm {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Participant type radio buttons heading",
+            "text": "Participant type field label",
             "name": "uiName"
           }],
-        "text": "Heading text for the participant type radio buttons"
+        "text": ""
       },
       "attribute": "participant-type",
       "reflect": false,
@@ -461,10 +363,10 @@ export class DocusignForm {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Business entity radio button label",
+            "text": "Business representative participant type label",
             "name": "uiName"
           }],
-        "text": "Label text for the business entity radio button"
+        "text": "An option for the participant type field. Used to determine which W-8 form is required."
       },
       "attribute": "business-entity",
       "reflect": false,
@@ -482,10 +384,10 @@ export class DocusignForm {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Individual participant radio button label",
+            "text": "Individual participant type label",
             "name": "uiName"
           }],
-        "text": "Label text for the individual participant radio button"
+        "text": "An option for the participant type field. Used to determine which W-8 form is required."
       },
       "attribute": "individual-participant",
       "reflect": false,
@@ -503,10 +405,13 @@ export class DocusignForm {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Docusign error text",
+            "text": "Docusign form error message",
             "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
           }],
-        "text": "Text inside iframe when Docusign form throws error"
+        "text": "This appears inside the Docusign frame."
       },
       "attribute": "docusign-error",
       "reflect": false,
@@ -524,57 +429,15 @@ export class DocusignForm {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Refresh button text",
+            "text": "Refresh page button label",
             "name": "uiName"
           }],
-        "text": "Text shown inside of refresh button"
+        "text": ""
       },
       "attribute": "refresh-button",
       "reflect": false,
       "defaultValue": "\"Refresh Page\""
     },
-    "backButton": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Back button text",
-            "name": "uiName"
-          }],
-        "text": "Text shown inside of back button"
-      },
-      "attribute": "back-button",
-      "reflect": false,
-      "defaultValue": "\"Back\""
-    },
-    "cancelButton": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Cancel button text",
-            "name": "uiName"
-          }],
-        "text": "Text shown inside of cancel button"
-      },
-      "attribute": "cancel-button",
-      "reflect": false,
-      "defaultValue": "\"Cancel\""
-    },
     "generalErrorTitle": {
       "type": "string",
       "mutable": false,
@@ -587,10 +450,13 @@ export class DocusignForm {
       "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,
@@ -608,10 +474,13 @@ export class DocusignForm {
       "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,
@@ -629,10 +498,13 @@ export class DocusignForm {
       "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,
@@ -650,16 +522,19 @@ export class DocusignForm {
       "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.\""
     },
-    "formSubmissionError": {
+    "taxAndPayoutsDescription": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -671,21 +546,21 @@ export class DocusignForm {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Form submission error text",
+            "text": "Page description",
             "name": "uiName"
           }],
-        "text": "The error message shown at the bottom of the page if the user has not checked the form submission checkbox"
+        "text": "Displayed at the top of the page on all set up steps."
       },
-      "attribute": "form-submission-error",
+      "attribute": "tax-and-payouts-description",
       "reflect": false,
-      "defaultValue": "\"This field is required\""
+      "defaultValue": "\"Submit your tax documents and add your banking information to receive your rewards.\""
     },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<UseDocusignFormResult>",
-        "resolved": "{ states?: { step: string; hideSteps: boolean; disabled: boolean; participantTypeDisabled: boolean; loading: boolean; urlLoading: boolean; loadingError: boolean; formState: { participantType: ParticipantType; taxFormExpired: boolean; errors: {}; }; docusignStatus: DocusignStatus; documentType: TaxDocumentType; documentTypeString: string; hideBackButton: boolean; }; data?: { taxForm: TaxDocumentType; documentUrl: string; }; }",
+        "resolved": "{ states?: { step: string; hideSteps: boolean; disabled: boolean; participantTypeDisabled: boolean; loading: boolean; urlLoading: boolean; loadingError: boolean; formState: { participantType: ParticipantType; taxFormExpired: boolean; errors: {}; }; docusignStatus: DocusignStatus; documentType: TaxDocumentType; documentTypeString: string; }; data?: { taxForm: TaxDocumentType; documentUrl: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -717,7 +592,7 @@ export class DocusignForm {
   static get elementRef() { return "el"; }
 }
 function useDocusignFormDemo(props) {
-  const [step, setStep] = useParent(TAX_CONTEXT_NAMESPACE);
+  const setStep = useSetParent(TAX_CONTEXT_NAMESPACE);
   return deepmerge({
     text: props.getTextProps(),
     states: {
@@ -734,18 +609,19 @@ function useDocusignFormDemo(props) {
         errors: {},
       },
       documentType: "W9",
-      hideBackButton: false,
     },
     data: {
       taxForm: "W9",
       documentUrl: "https://example.com",
     },
     callbacks: {
+      // @ts-expect-error: Demo only props
+      demo: {
+        onSubmit: () => setStep("/4"),
+        onBack: () => setStep("/3"),
+      },
       setParticipantType: (p) => console.log({ p }),
       setDocusignStatus: (status) => console.log(status),
-      onBack: () => {
-        setStep("/2");
-      },
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
@@ -766,6 +642,6 @@ const DemoDocusignIframe = ({ callbacks }) => {
       } },
       h("span", null, "Placeholder for docusign iframe"),
       h("div", { style: { display: "flex", gap: "8px" } },
-        h("sl-button", { type: "primary", submit: true, exportparts: "base: primarybutton-base", onClick: callbacks.onBack }, "Back to Step 2"),
-        h("sl-button", { type: "primary", submit: true, exportparts: "base: primarybutton-base", onClick: callbacks.onSubmit }, "Continue to Step 4")))));
+        h("sl-button", { type: "primary", submit: true, exportparts: "base: primarybutton-base", onClick: callbacks.demo.onBack }, "Back to Step 2"),
+        h("sl-button", { type: "primary", submit: true, exportparts: "base: primarybutton-base", onClick: callbacks.demo.onSubmit }, "Continue to Step 4")))));
 };