@saasquatch/mint-components 1.14.3 → 1.14.4

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

@@ -20,6 +20,7 @@ const bankingFormProps = {
     currency: "USD",
     loadingError: false,
     email: "test@example.com",
+    showModal: false,
   },
   callbacks: {
     onVerificationHide: () => { },
@@ -29,6 +30,8 @@ const bankingFormProps = {
     setPaymentScheduleChecked: () => { },
     setCountrySearch: () => { },
     onBack: async () => console.log("back"),
+    onModalOpen: () => { },
+    onModalClose: () => { },
   },
   refs: { formRef: { current: null } },
 };
@@ -349,3 +352,12 @@ export const BankingInfoFormVerififyIdentityModal = () => {
       },
     } }));
 };
+export const BankingInfoFormModalOpen = () => {
+  return (h("sqm-banking-info-form", { demoData: {
+      ...bankingFormProps,
+      states: {
+        ...bankingFormProps.states,
+        showModal: true,
+      },
+    } }));
+};

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

@@ -209,6 +209,7 @@ const stepFourProps = {
     formState: {
       paymentMethodChecked: "toBankAccount",
     },
+    showModal: false,
   },
   callbacks: {
     onVerificationHide: () => { },
@@ -218,6 +219,8 @@ const stepFourProps = {
     setPaymentScheduleChecked: () => { },
     onBack: async () => console.log("back"),
     setCountrySearch: () => { },
+    onModalOpen: () => { },
+    onModalClose: () => { },
   },
   refs: { formRef: { current: null } },
 };
@@ -239,12 +242,15 @@ const docusignFormProps = {
       errors: {},
       taxFormExpired: false,
     },
+    showModal: false,
   },
   callbacks: {
     onExit: () => { },
     completeDocument: async () => { },
     setParticipantType: (p) => console.log({ p }),
     setDocusignStatus: (status) => console.log(status),
+    onModalOpen: () => { },
+    onModalClose: () => { },
   },
 };
 const dashboardProps = {
@@ -721,6 +727,16 @@ export const StepThreeDocusignDisabled = () => {
       },
     } }));
 };
+export const StepThreeWithDocusignModalOpen = () => {
+  return (h("sqm-docusign-form", { demoData: {
+      states: {
+        documentType: "W9",
+        documentTypeString: taxTypeToName("W9"),
+        ...docusignFormProps.states,
+        showModal: true,
+      },
+    } }));
+};
 // STEP 4
 export const StepFourDefault = () => {
   return h("sqm-banking-info-form", null);

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

@@ -5,7 +5,7 @@ export function getFormMap({ props, getValidationErrorMessage, bankCountry, }) {
   const { errors, ...formState } = props.states.formState;
   return {
     0: {
-      input: (h("sl-input", Object.assign({ required: true, label: props.text.beneficiaryAccountNameLabel, name: "/beneficiaryAccountName", id: "beneficiaryAccountName", key: "beneficiaryAccountName", type: "text" }, (((_a = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _a === void 0 ? void 0 : _a.beneficiaryAccountName) && {
+      input: (h("sl-input", Object.assign({ required: true, label: props.text.beneficiaryAccountNameLabel, name: "/beneficiaryAccountName", id: "beneficiaryAccountName", key: "beneficiaryAccountName", type: "text", "help-text": props.text.beneficiaryAccountNameDescription }, (((_a = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _a === void 0 ? void 0 : _a.beneficiaryAccountName) && {
         class: "error-input",
         helpText: getValidationErrorMessage({
           type: (_c = (_b = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _b === void 0 ? void 0 : _b.beneficiaryAccountName) === null || _c === void 0 ? void 0 : _c.type,

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

@@ -3,6 +3,11 @@ import { intl } from "../../../global/global";
 import { createStyleSheet } from "../../../styling/JSS";
 import { FORM_STEPS } from "../sqm-tax-and-cash/data";
 const style = {
+  ModalTitleContainer: {
+    display: "flex",
+    gap: "var(--sl-spacing-small)",
+    alignItems: "center",
+  },
   FormWrapper: {
     display: "flex",
     justifyContent: "flex-start",
@@ -142,6 +147,28 @@ const style = {
     height: "26px",
     width: "26px",
   },
+  Dialog: {
+    "&::part(panel)": {
+      maxWidth: "420px",
+    },
+    "&::part(title)": {
+      fontSize: "var(--sl-font-size-large)",
+      fontWeight: "600",
+    },
+    "&::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",
+    },
+  },
+  DialogButton: { margin: "auto", width: "100%" },
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
@@ -211,6 +238,12 @@ export const BankingInfoFormView = (props) => {
     h("style", { type: "text/css" },
       styleString,
       vanillaStyle),
+    h("sl-dialog", { class: sheet.classes.Dialog, open: states.showModal, "onSl-hide": callbacks.onModalClose },
+      h("div", { class: classes.ModalTitleContainer, slot: "label" },
+        h("sl-icon", { name: "info-circle", style: { color: "var(--sl-color-info-500)" } }),
+        h("h2", { style: { fontSize: "var(--sl-font-size-large)" } }, text.modalTitle)),
+      h("p", null, text.modalDescription),
+      h("sl-button", { slot: "footer", type: "primary", class: sheet.classes.DialogButton, submit: true, exportparts: "base: primarybutton-base" }, text.modalButtonText)),
     h("div", { class: classes.TextContainer },
       h("div", null,
         !states.hideSteps && (h("p", null, intl.formatMessage({
@@ -270,6 +303,8 @@ export const BankingInfoFormView = (props) => {
           ? getLoadingSkeleton("toPayPalAccount")
           : slots.paymentFixedDaySelectSlot))))),
       h("div", { class: classes.BtnContainer },
-        h("sl-button", { type: "primary", disabled: states.disabled || states.saveDisabled, loading: states.saveLoading, submit: true, exportparts: "base: primarybutton-base" }, text.continueButton),
+        h("sl-button", Object.assign({ type: "primary", disabled: states.disabled || states.saveDisabled, loading: states.saveLoading }, (states.hideSteps
+          ? { onClick: callbacks.onModalOpen }
+          : { submit: "submit" }), { exportparts: "base: primarybutton-base" }), text.continueButton),
         !states.hideBackButton && (h("sl-button", { exportparts: "base: secondarybutton-base", class: classes.SecondaryBtn, type: "text", onClick: callbacks.onBack }, text.backButton))))));
 };

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

@@ -92,7 +92,11 @@ export class BankingInfoForm {
     /**
      * @uiName Beneficiary account field label
      */
-    this.beneficiaryAccountNameLabel = "Beneficiary account name";
+    this.beneficiaryAccountNameLabel = "Account holder name";
+    /**
+     * @uiName Beneficiary account field description
+     */
+    this.beneficiaryAccountNameDescription = "The beneficiary name of your bank account. Ensure this matches the name on your tax form.";
     /**
      * @uiName Bank account type field label
      */
@@ -271,6 +275,18 @@ export class BankingInfoForm {
      * @uiWidget textArea
      */
     this.loadingErrorAlertDescription = "Please refresh the page and try again. If this problem continues, contact Support.";
+    /**
+     * @uiName Information modal title
+     */
+    this.modalTitle = "Important Note";
+    /**
+     * @uiName Information modal description text
+     */
+    this.modalDescription = "Updating payment information places your account and payouts on hold for up to 48 hours while we verify your change. Payments scheduled during the hold period are skipped.";
+    /**
+     * @uiName Information modal button text
+     */
+    this.modalButtonText = "I understand, update my information";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -768,7 +784,28 @@ export class BankingInfoForm {
       },
       "attribute": "beneficiary-account-name-label",
       "reflect": false,
-      "defaultValue": "\"Beneficiary account name\""
+      "defaultValue": "\"Account holder name\""
+    },
+    "beneficiaryAccountNameDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Beneficiary account field description",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "beneficiary-account-name-description",
+      "reflect": false,
+      "defaultValue": "\"The beneficiary name of your bank account. Ensure this matches the name on your tax form.\""
     },
     "bankAccountTypeLabel": {
       "type": "string",
@@ -1607,12 +1644,75 @@ export class BankingInfoForm {
       "reflect": false,
       "defaultValue": "\"Please refresh the page and try again. If this problem continues, contact Support.\""
     },
+    "modalTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Information modal title",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "modal-title",
+      "reflect": false,
+      "defaultValue": "\"Important Note\""
+    },
+    "modalDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Information modal description text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "modal-description",
+      "reflect": false,
+      "defaultValue": "\"Updating payment information places your account and payouts on hold for up to 48 hours while we verify your change. Payments scheduled during the hold period are skipped.\""
+    },
+    "modalButtonText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Information modal button text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "modal-button-text",
+      "reflect": false,
+      "defaultValue": "\"I understand, update my information\""
+    },
     "demoData": {
       "type": "unknown",
       "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; email?: string; }; slots?: { verificationDialogSlot?: VNode; 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; email?: string; showModal: boolean; }; slots?: { verificationDialogSlot?: VNode; formInputsSlot?: VNode[]; countryInputSlot?: VNode; paymentMethodSlot?: VNode; paymentThresholdSelectSlot?: VNode; paymentFixedDaySelectSlot?: VNode; paypalInputSlot?: VNode; }; refs?: { formRef: any; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -1721,6 +1821,7 @@ function useDemoBankingInfoForm(props) {
       currency,
       setCurrency,
       hasPayPal: true,
+      showModal: false,
     },
     callbacks: {
       onVerificationHide: () => { },
@@ -1733,6 +1834,8 @@ function useDemoBankingInfoForm(props) {
       setCountrySearch: () => { },
       onBack: async () => setStep("/dashboard"),
       onVerification: () => { },
+      onModalOpen: () => { },
+      onModalClose: () => { },
     },
     text: props.getTextProps(),
     refs: {

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

@@ -105,6 +105,7 @@ export function useBankingInfoForm(props) {
   const [paymentScheduleChecked, setPaymentScheduleChecked] = useState(undefined);
   const [countrySearch, setCountrySearch] = useState("");
   const [filteredCountries, setFilteredCountries] = useState(countries || []);
+  const [showModal, setShowModal] = useState(false);
   const currency = ((_c = (_b = (_a = userData === null || userData === void 0 ? void 0 : userData.user) === null || _a === void 0 ? void 0 : _a.impactConnection) === null || _b === void 0 ? void 0 : _b.publisher) === null || _c === void 0 ? void 0 : _c.currency) || "";
   const isPartner = !!((_f = (_e = (_d = userData === null || userData === void 0 ? void 0 : userData.user) === null || _d === void 0 ? void 0 : _d.impactConnection) === null || _e === void 0 ? void 0 : _e.publisher) === null || _f === void 0 ? void 0 : _f.withdrawalSettings);
   const feeCap = paypalFeeMap[currency] || "";
@@ -276,10 +277,12 @@ export function useBankingInfoForm(props) {
     });
     setErrors({ inputErrors: validationErrors });
     if (Object.keys(validationErrors).length) {
+      setShowModal(false);
       return;
     }
     let token = undefined;
     if (isPartner) {
+      setShowModal(false);
       setShowVerification(true);
       token = await new Promise((res) => {
         const cb = (e) => {
@@ -292,6 +295,7 @@ export function useBankingInfoForm(props) {
       setShowVerification(false);
     }
     await runMutation(formData, token);
+    setShowModal(false);
   };
   const onVerification = async (token) => {
     host.dispatchEvent(new CustomEvent(VERIFICATION_EVENT_KEY, {
@@ -325,6 +329,8 @@ export function useBankingInfoForm(props) {
       setCountrySearch,
       onVerification,
       onVerificationHide: () => onVerification(null),
+      onModalClose: () => setShowModal(false),
+      onModalOpen: () => setShowModal(true),
     },
     states: {
       showVerification,
@@ -358,6 +364,7 @@ export function useBankingInfoForm(props) {
       bankCountry: formState.bankCountry,
       countrySearch,
       email: (_j = userData === null || userData === void 0 ? void 0 : userData.user) === null || _j === void 0 ? void 0 : _j.email,
+      showModal,
     },
     refs: {
       formRef,

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

@@ -3,6 +3,11 @@ import { intl } from "../../../global/global";
 import { createStyleSheet } from "../../../styling/JSS";
 import { FORM_STEPS } from "../sqm-tax-and-cash/data";
 const style = {
+  ModalTitleContainer: {
+    display: "flex",
+    gap: "var(--sl-spacing-small)",
+    alignItems: "center",
+  },
   FormWrapper: {
     display: "flex",
     justifyContent: "flex-start",
@@ -114,6 +119,28 @@ const style = {
     color: "var(--sl-color-neutral-500)",
     fontSize: "var(--sl-font-size-medium)",
   },
+  Dialog: {
+    "&::part(panel)": {
+      maxWidth: "420px",
+    },
+    "&::part(title)": {
+      fontSize: "var(--sl-font-size-large)",
+      fontWeight: "600",
+    },
+    "&::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",
+    },
+  },
+  DialogButton: { margin: "auto", width: "100%" },
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
@@ -147,6 +174,17 @@ export const DocusignFormView = (props) => {
     h("style", { type: "text/css" },
       styleString,
       vanillaStyle),
+    h("sl-dialog", { class: sheet.classes.Dialog, open: states.showModal, "onSl-hide": callbacks.onModalClose },
+      h("div", { class: classes.ModalTitleContainer, slot: "label" },
+        h("sl-icon", { name: "info-circle", style: { color: "var(--sl-color-info-500)" } }),
+        h("h2", { style: { fontSize: "var(--sl-font-size-large)" } }, text.modalTitle)),
+      h("p", null, intl.formatMessage({
+        id: "modalText",
+        defaultMessage: text.modalDescription,
+      }, {
+        br: h("br", null),
+      })),
+      h("sl-button", { slot: "footer", type: "primary", class: sheet.classes.DialogButton, onClick: callbacks.onModalClose, exportparts: "base: primarybutton-base" }, text.modalButtonText)),
     h("div", { class: classes.TextContainer },
       h("div", null,
         !states.hideSteps && (h("p", null, intl.formatMessage({

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

@@ -120,6 +120,18 @@ export class DocusignForm {
      * @uiName Exit button text
      */
     this.exitButton = "Exit";
+    /**
+     * @uiName Information modal title
+     */
+    this.modalTitle = "Important Note";
+    /**
+     * @uiName Information modal description text
+     */
+    this.modalDescription = "Remember the name you enter in your tax form. It must exactly match the bank account holder name configured in the next step. {br}{br}Otherwise you will have to resubmit your form again and there will be delays receiving your payout.";
+    /**
+     * @uiName Information modal button text
+     */
+    this.modalButtonText = "I understand";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -607,12 +619,75 @@ export class DocusignForm {
       "reflect": false,
       "defaultValue": "\"Exit\""
     },
+    "modalTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Information modal title",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "modal-title",
+      "reflect": false,
+      "defaultValue": "\"Important Note\""
+    },
+    "modalDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Information modal description text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "modal-description",
+      "reflect": false,
+      "defaultValue": "\"Remember the name you enter in your tax form. It must exactly match the bank account holder name configured in the next step. {br}{br}Otherwise you will have to resubmit your form again and there will be delays receiving your payout.\""
+    },
+    "modalButtonText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Information modal button text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "modal-button-text",
+      "reflect": false,
+      "defaultValue": "\"I understand\""
+    },
     "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; showExitButton: 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; showExitButton: boolean; showModal: boolean; }; data?: { taxForm: TaxDocumentType; documentUrl: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -661,6 +736,7 @@ function useDocusignFormDemo(props) {
         errors: {},
       },
       documentType: "W9",
+      showModal: false,
     },
     data: {
       taxForm: "W9",
@@ -671,6 +747,8 @@ function useDocusignFormDemo(props) {
       demo: {
         onSubmit: () => setStep("/4"),
         onBack: () => setStep("/3"),
+        onModalOpen: () => { },
+        onModalClose: () => { },
       },
       setParticipantType: (p) => console.log({ p }),
       setDocusignStatus: (status) => console.log(status),

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

@@ -44,6 +44,7 @@ export function useDocusignForm(props) {
   const [errors, setErrors] = useState({});
   const [loading, setLoading] = useState(false);
   const [showExitButton, setShowExitButton] = useState(false);
+  const [showModal, setShowModal] = useState(true);
   // Only look at current document if it's valid (same as required type)
   const existingDocumentType = validTaxDocument(publisher === null || publisher === void 0 ? void 0 : publisher.requiredTaxDocumentType) && (publisher === null || publisher === void 0 ? void 0 : publisher.currentTaxDocument)
     ? publisher === null || publisher === void 0 ? void 0 : publisher.requiredTaxDocumentType : undefined;
@@ -139,6 +140,7 @@ export function useDocusignForm(props) {
       documentType: actualDocumentType,
       documentTypeString: taxTypeToName(actualDocumentType),
       showExitButton,
+      showModal,
     },
     data: {
       taxForm: actualDocumentType,
@@ -149,6 +151,8 @@ export function useDocusignForm(props) {
       completeDocument,
       onExit: progressStep,
       setParticipantType,
+      onModalClose: () => setShowModal(false),
+      onModalOpen: () => setShowModal(true),
     },
     text: props.getTextProps(),
   };