@saasquatch/mint-components 1.10.2 → 1.11.0-0

package/dist/collection/components/sqm-logout-current-user/useLogoutCurrentUser.js

@@ -1,24 +1,25 @@
 import { setUserIdentity, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
 import { gql } from "graphql-request";
 const GET_USER_DETAILS = gql `
-  query getUserDetails {
-    viewer {
-      ... on User {
-        id
-        accountId
-        email
-      }
+  query getUserDetails($id: String!, $accountId: String!) {
+    user(id: $id, accountId: $accountId) {
+      id
+      accountId
+      email
     }
   }
 `;
 export function useLogoutCurrentUser(props) {
   var _a, _b;
   const user = useUserIdentity();
-  const { loading, data } = useQuery(GET_USER_DETAILS, {}, !user);
+  const { loading, data } = useQuery(GET_USER_DETAILS, {
+    id: user === null || user === void 0 ? void 0 : user.id,
+    accountId: user === null || user === void 0 ? void 0 : user.accountId,
+  }, !user);
   const onSwitchClick = () => {
     setUserIdentity(undefined);
   };
-  const filledInEmailText = (_a = props.userIdentificationText) === null || _a === void 0 ? void 0 : _a.replace("{email}", (_b = data === null || data === void 0 ? void 0 : data.viewer) === null || _b === void 0 ? void 0 : _b.email);
+  const filledInEmailText = (_a = props.userIdentificationText) === null || _a === void 0 ? void 0 : _a.replace("{email}", (_b = data === null || data === void 0 ? void 0 : data.user) === null || _b === void 0 ? void 0 : _b.email);
   return {
     loading,
     onSwitchClick,

package/dist/collection/components/sqm-portal-container/PortalContainer.stories.js

@@ -13,37 +13,37 @@ export const TooWideColumn = () => (h("div", { style: { width: "200px", border:
 export const TooWideRow = () => (h("div", { style: { width: "500px", border: "1px dashed grey" } },
   h("sqm-portal-container", { gap: "xxx-large", direction: "row", "min-width": "160px" },
     h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
-    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Post about us on X"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
     h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
 export const TooWideSmallGap = () => (h("div", { style: { width: "500px", border: "1px dashed grey" } },
   h("sqm-portal-container", { gap: "small", direction: "row", "min-width": "160px" },
     h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
-    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Post about us on X"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
     h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
 export const TooWidePadding = () => (h("div", { style: { width: "500px", border: "1px dashed grey" } },
   h("sqm-portal-container", { padding: "xxx-large", gap: "xxx-large", direction: "row", "min-width": "160px" },
     h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
-    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Post about us on X"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
     h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
 export const TooWideDisplayFlex = () => (h("div", { style: { width: "500px", border: "1px dashed grey" } },
   h("sqm-portal-container", { gap: "xxx-large", direction: "row", display: "flex", "min-width": "160px" },
     h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
-    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Post about us on X"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
     h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
 export const HalfWidth = () => (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
   h("sqm-portal-container", { gap: "xxx-large", direction: "row", minWidth: "160px", maxWidth: "50%" },
     h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
-    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Post about us on X"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
     h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
 export const HalfWidthCenter = () => (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
   h("sqm-portal-container", { gap: "xxx-large", direction: "row", minWidth: "160px", maxWidth: "50%", center: true },
     h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
-    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Post about us on X"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
     h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
 export const FullWidth = () => (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
   h("sqm-portal-container", { gap: "xxx-large", direction: "row", maxWidth: "100%" },
     h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
-    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Post about us on X"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
     h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
 export const SpaceBetween = () => {
   return (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
@@ -81,18 +81,6 @@ export const SpaceEvenly = () => {
             h("p", null, "Points Balance")))),
       h("sqm-scroll", { "scroll-id": "tab-2", outline: true, "button-type": "primary", "button-text": "Redeem your rewards", mobile: true }))));
 };
-export const ResponsiveBox = () => {
-  return (h("div", { style: { width: "100%", maxWidth: "1000px", border: "1px dashed grey" } },
-    h("sqm-portal-container", { center: true, direction: "row", display: "flex", "justify-content": "space-between", "flex-wrap": "nowrap" },
-      h("sqm-stat-container", { space: "xxx-large", display: "flex" },
-        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardsRedeemed/CREDIT/global" },
-          h("sqm-text", null,
-            h("p", null, "Rewards Redeemed"))),
-        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardBalance/CREDIT/POINT/value/global" },
-          h("sqm-text", null,
-            h("p", null, "Points Balance")))),
-      h("sqm-scroll", { "scroll-id": "tab-2", outline: true, "button-type": "primary", "button-text": "Redeem your rewards", mobile: true }))));
-};
 export const Start = () => {
   return (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
     h("sqm-portal-container", { center: true, direction: "row", display: "flex", "justify-content": "start" },

package/dist/collection/components/sqm-portal-container/sqm-portal-container-view.js

@@ -5,7 +5,7 @@ export function PortalContainerView(props, children) {
     Container: {
       boxSizing: "border-box",
       display: props.display || "grid",
-      flexWrap: props.flexWrap || "wrap",
+      flexWrap: "wrap",
       "grid-template-columns": props.direction === "row"
         ? `repeat(auto-fill, minmax(${props.minWidth}, auto))`
         : "100%",

package/dist/collection/components/sqm-portal-container/sqm-portal-container.js

@@ -37,13 +37,6 @@ export class PortalContainer {
      * @uiName Maximum width
      */
     this.maxWidth = "100%";
-    /**
-     * @uiName Flex wrap behavior
-     * @uiType string
-     * @uiEnum ["wrap", "nowrap"]
-     * @uiEnumNames ["Wrap", "No Wrap"]
-     */
-    this.flexWrap = "wrap";
     /**
      * @uiName Background color
      * @uiWidget color
@@ -260,36 +253,6 @@ export class PortalContainer {
       "reflect": false,
       "defaultValue": "\"100%\""
     },
-    "flexWrap": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Flex wrap behavior",
-            "name": "uiName"
-          }, {
-            "text": "string",
-            "name": "uiType"
-          }, {
-            "text": "[\"wrap\", \"nowrap\"]",
-            "name": "uiEnum"
-          }, {
-            "text": "[\"Wrap\", \"No Wrap\"]",
-            "name": "uiEnumNames"
-          }],
-        "text": ""
-      },
-      "attribute": "flex-wrap",
-      "reflect": false,
-      "defaultValue": "\"wrap\""
-    },
     "center": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/components/sqm-referral-card/ReferralCard.stories.js

@@ -19,7 +19,7 @@ const sharebutton = (slot) => {
     h("sqm-portal-container", { gap: "x-small" },
       h("sqm-share-button", { medium: "email" }, "Share via email"),
       h("sqm-share-button", { medium: "facebook" }, "Share on Facebook"),
-      h("sqm-share-button", { medium: "twitter" }, "Post about us on X"))));
+      h("sqm-share-button", { medium: "twitter" }, "Tweet about us"))));
 };
 const timeline = (slot, count) => {
   return (h("sqm-timeline", { slot: slot, icon: "circle" },

package/dist/collection/components/sqm-share-button/ShareButton.stories.js

@@ -83,7 +83,7 @@ export const AllMediums = () => {
       h("span", null, "Linkedin")),
     h("br", null),
     h("sqm-share-button", { medium: "twitter" },
-      h("span", null, "Post on X")),
+      h("span", null, "Twitter")),
     h("br", null),
     h("sqm-share-button", { medium: "pinterest" },
       h("span", null, "Pinterest")),

package/dist/collection/components/sqm-share-button/sqm-share-button-view.js

@@ -3,7 +3,7 @@ import { createStyleSheet } from "../../styling/JSS";
 import { HostBlock } from "../../global/mixins";
 const medium = {
   facebook: { color: "#1877f2", text: "#fff", icon: "facebook" },
-  twitter: { color: "#000000", text: "#fff", icon: "twitter-x" },
+  twitter: { color: "#1da1f2", text: "#fff", icon: "twitter" },
   email: { color: "#666666", text: "#fff", icon: "envelope" },
   direct: { color: "var(--sl-color-primary-500)", text: "#fff", icon: "send" },
   linkedin: { color: "#0077b5", text: "#fff", icon: "linkedin" },

package/dist/collection/components/sqm-share-button/sqm-share-button.js

@@ -12,7 +12,7 @@ import deepmerge from "deepmerge";
  * @uiOrder ["medium", "program-id", "*", "pill", "disabled", "hideicon"]
  * @exampleGroup Sharing
  * @example Facebook Share Button - <sqm-share-button medium="facebook">Share on Facebook</sqm-share-button>
- * @example X Share Button - <sqm-share-button medium="twitter">Share via X</sqm-share-button>
+ * @example Twitter Share Button - <sqm-share-button medium="twitter">Share via Tweet</sqm-share-button>
  * @example Email Share Button - <sqm-share-button medium="email">Share via Email</sqm-share-button>
  * @example Web Share Sheet Share Button - <sqm-share-button medium="direct">Share</sqm-share-button>
  * @example LinkedIn Share Button - <sqm-share-button medium="linkedin">Share on LinkedIn</sqm-share-button>
@@ -102,7 +102,7 @@ export class ShareButton {
             "text": "[\"facebook\", \"twitter\", \"email\", \"direct\", \"linkedin\", \"sms\", \"fbmessenger\", \"whatsapp\", \"linemessenger\", \"pinterest\" ]",
             "name": "uiEnum"
           }, {
-            "text": "[\"Facebook\", \"X\", \"Email\", \"Web Share Sheet\", \"Linkedin\", \"SMS\", \"Facebook Messenger\", \"Whatsapp\", \"Line Messenger\", \"Pinterest\"]",
+            "text": "[\"Facebook\", \"Twitter\", \"Email\", \"Web Share Sheet\", \"Linkedin\", \"SMS\", \"Facebook Messenger\", \"Whatsapp\", \"Line Messenger\", \"Pinterest\"]",
             "name": "uiEnumNames"
           }],
         "text": "The social medium to share on. Share messages and links\nwill be pulled from your program config and tagged for analytics."

package/dist/collection/components/sqm-task-card/UseTaskCard.stories.js

@@ -50,7 +50,7 @@ export const TaskCardFeed = createHookStory(() => {
   return (h("sqm-card-feed", null,
     h("sqm-task-card", { "reward-amount": "75", "card-title": "Refer a Friend", description: "Invite a friend to Klip and get 75 points when they signup for a free trial or contact our us about an enterprise license.", "button-text": "Start referring", "button-link": "https://klip-staging.vercel.app/app/klip-rewards", goal: 1, repeatable: true, "completed-text": "", demoData: "", "ended-message": "", "event-key": "", "expiry-message": "", "progress-bar-unit": "", "reward-duration": "2022-01-04T08:00:00.000Z/2022-01-20T08:00:00.000Z", "reward-unit": "", "starts-on-message": "", "stat-type": "", "display-duration": "2022-01-04T08:00:00.000Z/2022-01-05T08:00:00.000Z" }),
     h("sqb-program-section", { "program-id": "klip-loyalty" },
-      h("sqm-task-card", { "reward-amount": "50", "card-title": "Follow Us on X", description: "Earn 50 points when you Follow Us on X!", "button-text": "Follow", "button-link": "https://twitter.com/", goal: 1, "stat-type": "/programGoals/count/Follow-on-Social-Media", "open-new-tab": "true", "event-key": "socialFollow" })),
+      h("sqm-task-card", { "reward-amount": "50", "card-title": "Follow Us on Twitter", description: "Earn 50 points when you follow us on Twitter!", "button-text": "Follow", "button-link": "https://twitter.com/", goal: 1, "stat-type": "/programGoals/count/Follow-on-Social-Media", "open-new-tab": "true", "event-key": "socialFollow" })),
     h("sqm-task-card", { "reward-amount": "250", goal: 500, "show-progress-bar": "true", "card-title": "Spend $500 on Klip Products", description: "Earn 250 points when you spend $500 or more on Klip products.", "button-text": "See plans", "button-link": "https://klip-staging.vercel.app/app/plans", "stat-type": "/customFields/purchaseTotal", "open-new-tab": "false" }),
     h("sqb-program-section", { "program-id": "klip-loyalty" },
       h("sqm-task-card", { "reward-amount": "25", goal: 1, "card-title": "Upload Your First Video", description: "Earn 25 points for exploring the Klip platform when you upload your first video.", "button-text": "Upload", "button-link": "https://klip-staging.vercel.app/app", "stat-type": "/programGoals/count/Record-First-Video", "open-new-tab": "false" })),

package/dist/collection/components/sqm-task-card/sqm-task-card.js

@@ -13,7 +13,7 @@ import { useTaskCard } from "./useTaskCard";
  * @exampleGroup Rewards
  * @example One Time Task Card - <sqm-task-card reward-amount="1" reward-unit="Free Month" goal="1" card-title="Upgrade Your Plan" description="Receive one free month for being a committed customer when you upgrade your plan." button-text="Upgrade" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" open-new-tab="false" finite="0" starts-on-message="Starts {startDate}"></sqm-task-card>
  * @example Repeatable Task Card - <sqm-task-card reward-amount="250" goal="500" show-progress-bar card-title="Spend $500" description="Earn 250 points when you spend $500 or more." button-text="See plans" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" progress-bar-unit="$" finite="0" repeatable="" reward-unit="Points" starts-on-message="Starts {startDate}"></sqm-task-card>
- * @example Event Sending Task Card - <sqm-task-card goal="1" reward-amount="50" card-title="Follow Us on X" description="Earn 50 points when you Follow Us on X!" button-text="Follow" button-link="https://twitter.com/" open-new-tab="true" event-key="socialFollow" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" finite="0" reward-unit="Points" starts-on-message="Starts {startDate}"></sqm-task-card>
+ * @example Event Sending Task Card - <sqm-task-card goal="1" reward-amount="50" card-title="Follow Us on Twitter" description="Earn 50 points when you follow us on Twitter!" button-text="Follow" button-link="https://twitter.com/" open-new-tab="true" event-key="socialFollow" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" finite="0" reward-unit="Points" starts-on-message="Starts {startDate}"></sqm-task-card>
  */
 export class TaskCard {
   constructor() {

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

@@ -236,6 +236,7 @@ const docusignFormProps = {
     },
   },
   callbacks: {
+    progressStep: async () => { },
     setParticipantType: (p) => console.log({ p }),
     setDocusignStatus: (status) => console.log(status),
   },

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

@@ -116,8 +116,7 @@ const style = {
     background: "var(--sl-color-gray-200)",
   },
   LargeSkeleton: {
-    width: "100%",
-    maxWidth: "320px",
+    width: "320px",
     height: "40px",
     borderRadius: "50px",
     background: "var(--sl-color-gray-200)",

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

@@ -1,11 +1,12 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../../../styling/JSS";
-import { useCallback, useEffect } from "@saasquatch/universal-hooks";
+import { useCallback, useEffect, } from "@saasquatch/universal-hooks";
 import { DOCUSIGN_EXPIRED_STATES, DOCUSIGN_ERROR_STATES, } from "../useDocusignForm";
 const style = {
   DocusignStatusContainer: {
     width: "100%",
-    height: "600px",
+    minHeight: "600px",
+    height: "900px",
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
@@ -59,21 +60,26 @@ export const DocusignLoadingView = () => {
     h("div", { class: classes.DocusignStatusContainer },
       h("sl-spinner", { style: { fontSize: "50px", margin: "40px" } }))));
 };
-export const DocusignIframe = ({ states, callbacks, text, }) => {
+export const DocusignIframe = ({ states, data, callbacks, text, }) => {
   if (states.urlLoading)
     return h(DocusignLoadingView, null);
+  // TODO: Confirm impact domain before launch
+  const allowedDomains = [
+    "referralsaasquatch.com",
+    "impacttech.complysandbox.com",
+  ];
   const callback = useCallback((e) => {
-    var _a;
-    if (!((_a = e.origin) === null || _a === void 0 ? void 0 : _a.includes("referralsaasquatch.com")))
+    const allowed = allowedDomains.some((d) => { var _a; return (_a = e.origin) === null || _a === void 0 ? void 0 : _a.includes(d); });
+    if (!allowed)
       return;
-    if (!e.data)
-      return;
-    callbacks.onStatusChange(e.data.eventStatus);
+    if (e.data === "Complyexchange Thank you page Exit") {
+      callbacks.progressStep();
+    }
   }, []);
   useEffect(() => {
-    window.addEventListener("message", callback);
+    window.addEventListener("message", callback, false);
     return () => {
-      window.removeEventListener("message", callback);
+      window.removeEventListener("message", callback, false);
     };
   }, []);
   if (DOCUSIGN_ERROR_STATES.includes(states.status)) {
@@ -81,5 +87,6 @@ export const DocusignIframe = ({ states, callbacks, text, }) => {
   }
   if (DOCUSIGN_EXPIRED_STATES.includes(states.status))
     return h(DocusignExpiredView, { text: text });
-  return (h("iframe", { frameBorder: "0", src: states.url, width: "100%", height: "600px" }));
+  return (h("iframe", { frameBorder: "0", src: data.documentUrl, width: "100%", height: "1000px" }));
 };
+// NWH4QF

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

@@ -140,7 +140,7 @@ const vanillaStyle = `
 
   `;
 export const DocusignFormView = (props) => {
-  var _a, _b;
+  var _a;
   const { states, states: { formState, documentTypeString }, callbacks, text, slots, } = props;
   const { classes } = sheet;
   return (h("div", { class: classes.Container },
@@ -166,23 +166,7 @@ export const DocusignFormView = (props) => {
       h("strong", null, text.error.generalTitle),
       h("br", null),
       text.error.generalDescription)),
-    states.documentType !== "W9" && (h("div", { class: classes.CheckboxWrapper },
-      h("p", { class: classes.BoldText }, text.participantType),
-      states.loading ? (h("sl-spinner", { style: { fontSize: "50px", margin: "40px" } })) : (h("div", { style: { display: "flex", flexDirection: "column" } },
-        h("sl-radio", { exportparts: "base: radio-base", value: "individualParticipant", name: "/participantType", checked: formState.participantType === "individualParticipant", disabled: states.disabled || states.participantTypeDisabled, onClick: () => {
-            if (states.disabled || states.participantTypeDisabled)
-              return;
-            callbacks.setParticipantType("individualParticipant");
-          } },
-          h("span", { class: classes.RadioText }, text.individualParticipant)),
-        h("sl-radio", { exportparts: "base: radio-base", value: "businessEntity", name: "/participantType", checked: formState.participantType === "businessEntity", disabled: states.disabled || states.participantTypeDisabled, onClick: () => {
-            if (states.disabled || states.participantTypeDisabled)
-              return;
-            callbacks.setParticipantType("businessEntity");
-          } },
-          h("span", { class: classes.RadioText }, text.businessEntity)))),
-      ((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.participantType) && (h("p", { class: classes.ErrorText }, text.error.participantType)))),
-    (states.documentType === "W9" || formState.participantType) && (h("div", null,
+    h("div", null,
       h("div", null,
         h("h5", { class: classes.BoldText }, intl.formatMessage({ id: "tax-form-label", defaultMessage: text.taxFormLabel }, { documentType: documentTypeString })),
         h("p", null, intl.formatMessage({
@@ -197,5 +181,5 @@ export const DocusignFormView = (props) => {
         h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "primary", open: true, class: classes.InfoAlert },
           h("sl-icon", { class: classes.InfoIcon, slot: "icon", name: "info-circle" }),
           text.docusignSessionWarning),
-        slots.docusignIframeSlot)))));
+        slots.docusignIframeSlot))));
 };

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

@@ -131,12 +131,14 @@ export class DocusignForm {
     const _isDemo = isDemo();
     const props = _isDemo ? useDocusignFormDemo(this) : useDocusignForm(this);
     const docusignIframeSlot = (h(DocusignIframe, { states: {
-        url: props.data.documentUrl,
         status: props.states.docusignStatus,
         loading: props.states.loading,
         urlLoading: props.states.urlLoading,
+      }, data: {
+        documentUrl: props.data.documentUrl,
+        returnUrl: props.data.returnUrl,
       }, callbacks: {
-        onStatusChange: props.callbacks.setDocusignStatus,
+        progressStep: props.callbacks.progressStep,
       }, text: props.text }));
     return (h(Host, null,
       h(DocusignFormView, { callbacks: props.callbacks, states: props.states, text: props.text, slots: {
@@ -560,7 +562,7 @@ export class DocusignForm {
       "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; }; 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; returnUrl: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",

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

@@ -11,6 +11,7 @@ const GET_TAX_DOCUMENT = gql `
       createImpactPublisherTaxDocumentInput: $vars
     ) {
       documentUrl
+      returnUrl
     }
   }
 `;
@@ -23,7 +24,7 @@ export const DOCUSIGN_ERROR_STATES = [
 export const DOCUSIGN_EXPIRED_STATES = ["ttl_expired", "session_timeout"];
 export const DOCUSIGN_SUCCESS_STATES = ["signing_complete", "viewing_complete"];
 export function useDocusignForm(props) {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f;
   const user = useUserIdentity();
   const context = useParentValue(TAX_FORM_CONTEXT_NAMESPACE);
   const [step, setStep] = useParent(TAX_CONTEXT_NAMESPACE);
@@ -50,15 +51,9 @@ export function useDocusignForm(props) {
     }
   }, [existingDocumentType]);
   useEffect(() => {
-    var _a;
     // Skip if no publisher info
     if (!user || !publisher)
       return;
-    // Skip on initial load of W8 case
-    if (((_a = publisher.requiredTaxDocumentType) === null || _a === void 0 ? void 0 : _a.startsWith("W8")) &&
-      !publisher.currentTaxDocument &&
-      !participantType)
-      return;
     const fetchDocument = async () => {
       try {
         const result = await createTaxDocument({
@@ -81,33 +76,52 @@ export function useDocusignForm(props) {
     };
     fetchDocument();
   }, [user, publisher, participantType]);
-  useEffect(() => {
-    const onSubmit = async () => {
-      try {
-        setLoading(true);
-        await refetch();
-        // Skip banking info form if it already is saved
-        // or if brandedSignup is false
-        setStep(context.overrideNextStep ||
-          !!(publisher === null || publisher === void 0 ? void 0 : publisher.withdrawalSettings) ||
-          !(publisher === null || publisher === void 0 ? void 0 : publisher.brandedSignup)
-          ? "/dashboard"
-          : "/4");
-      }
-      catch (e) {
-        setErrors({ general: true });
-      }
-      finally {
-        setLoading(false);
-      }
-    };
-    // Handled in view
-    if (DOCUSIGN_ERROR_STATES.includes(docusignStatus))
-      return;
-    if (DOCUSIGN_SUCCESS_STATES.includes(docusignStatus)) {
-      onSubmit();
+  const progressStep = async () => {
+    // TODO: Needs graphql call to determine status of document
+    try {
+      setLoading(true);
+      await refetch();
+      // Skip banking info form if it already is saved
+      // or if brandedSignup is false
+      setStep(context.overrideNextStep ||
+        !!(publisher === null || publisher === void 0 ? void 0 : publisher.withdrawalSettings) ||
+        !(publisher === null || publisher === void 0 ? void 0 : publisher.brandedSignup)
+        ? "/dashboard"
+        : "/4");
     }
-  }, [docusignStatus, refetch]);
+    catch (e) {
+      setErrors({ general: true });
+    }
+    finally {
+      setLoading(false);
+    }
+  };
+  // useEffect(() => {
+  //   const onSubmit = async () => {
+  //     try {
+  //       setLoading(true);
+  //       await refetch();
+  //       // Skip banking info form if it already is saved
+  //       // or if brandedSignup is false
+  //       setStep(
+  //         context.overrideNextStep ||
+  //           !!publisher?.withdrawalSettings ||
+  //           !publisher?.brandedSignup
+  //           ? "/dashboard"
+  //           : "/4"
+  //       );
+  //     } catch (e) {
+  //       setErrors({ general: true });
+  //     } finally {
+  //       setLoading(false);
+  //     }
+  //   };
+  //   // Handled in view
+  //   if (DOCUSIGN_ERROR_STATES.includes(docusignStatus)) return;
+  //   if (DOCUSIGN_SUCCESS_STATES.includes(docusignStatus)) {
+  //     onSubmit();
+  //   }
+  // }, [docusignStatus, refetch]);
   const allLoading = userLoading || documentLoading || loading;
   return {
     states: {
@@ -130,9 +144,11 @@ export function useDocusignForm(props) {
     data: {
       taxForm: actualDocumentType,
       documentUrl: (_e = document === null || document === void 0 ? void 0 : document.createImpactPublisherTaxDocument) === null || _e === void 0 ? void 0 : _e.documentUrl,
+      returnUrl: (_f = document === null || document === void 0 ? void 0 : document.createImpactPublisherTaxDocument) === null || _f === void 0 ? void 0 : _f.returnUrl,
     },
     callbacks: {
       setDocusignStatus,
+      progressStep,
       setParticipantType,
     },
     text: props.getTextProps(),

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

@@ -83,27 +83,6 @@ const style = {
     color: "var(--sl-color-neutral-500)",
     fontSize: "var(--sl-font-size-medium)",
   },
-  PhoneInputsSection: {
-    display: "flex",
-    alignItems: "flex-start",
-    flexDirection: "column",
-    gap: "4px",
-    "& p": {
-      fontSize: "var(--sl-font-size-small)",
-      color: "var(--sl-input-label-color)",
-      fontWeight: "var(--sl-font-weight-semibold)",
-    },
-  },
-  PhoneInputsContainer: {
-    display: "flex",
-    alignItems: "flex-start",
-    gap: "4px",
-    width: "100%",
-    "& #phoneNumber": {
-      width: "100%",
-      minWidth: "0px",
-    },
-  },
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
@@ -129,7 +108,7 @@ const vanillaStyle = `
     }
 
     sl-select#phoneNumberCountryCode::part(menu) {
-      min-width: 250px;
+      width: 450px;
     }
   `;
 export const UserInfoFormView = (props) => {
@@ -212,39 +191,37 @@ export const UserInfoFormView = (props) => {
               } }), (_e = data === null || data === void 0 ? void 0 : data.countries) === null || _e === void 0 ? void 0 :
             _e.map((c) => (h("sl-menu-item", { value: c.countryCode }, c.displayName))), (_f = data === null || data === void 0 ? void 0 : data.allCountries) === null || _f === void 0 ? void 0 :
             _f.map((c) => (h("sl-menu-item", { value: c.countryCode, style: { display: "none" } }, c.displayName)))),
-          h("div", { class: classes.PhoneInputsSection },
-            h("p", null, text.phoneNumber),
-            h("div", { class: classes.PhoneInputsContainer },
-              h("sl-select", Object.assign({ id: "phoneNumberCountryCode", exportparts: "label: input-label, base: input-base", name: "/phoneNumberCountryCode", value: formState.phoneNumberCountryCode, disabled: states.disabled || states.isPartner, ref: (el) => (refs.phoneCountryRef.current = el) }, (((_g = formState.errors) === null || _g === void 0 ? void 0 : _g.phoneNumberCountryCode) ? {
-                class: classes.ErrorInput,
-              }
-                : {}), { required: true, "onSl-select": (e) => callbacks.onFormChange("phoneCountry", e) }),
-                h("sl-input", { class: classes.SearchInput, placeholder: text.searchForCountryText, onKeyDown: (e) => {
-                    // Stop shoelace intercepting key presses
-                    e.stopPropagation();
-                  }, "onSl-input": (e) => {
-                    callbacks.setPhoneCountrySearch(e.target.value);
-                  } }), (_h = data === null || data === void 0 ? void 0 : data.phoneCountries) === null || _h === void 0 ? void 0 :
-                _h.map((c) => {
-                  var _a, _b;
-                  return (h("sl-menu-item", { value: c.countryCode },
-                    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));
-                }), (_j = data === null || data === void 0 ? void 0 : data.allCountries) === null || _j === void 0 ? void 0 :
-                _j.map((c) => {
-                  var _a, _b;
-                  return (h("sl-menu-item", { value: c.countryCode, style: { display: "none" } },
-                    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));
-                })),
-              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
-                validateBillingField(/[a-zA-Z]+/, value) &&
-                  formatErrorMessage(text.phoneNumber, text.error.fieldInvalidError), disabled: states.disabled || states.isPartner }, (((_k = formState.errors) === null || _k === void 0 ? void 0 : _k.phoneNumber) ? {
-                class: classes.ErrorInput,
-                helpText: formatErrorMessage(text.phoneNumber, formState.errors.phoneNumber),
-              }
-                : {}), { required: true })))),
+          h("div", { style: { display: "flex", gap: "4px" } },
+            h("sl-select", Object.assign({ id: "phoneNumberCountryCode", exportparts: "label: input-label, base: input-base", name: "/phoneNumberCountryCode", label: text.phoneNumber, style: { minWidth: "140px" }, value: formState.phoneNumberCountryCode, disabled: states.disabled || states.isPartner, ref: (el) => (refs.phoneCountryRef.current = el) }, (((_g = formState.errors) === null || _g === void 0 ? void 0 : _g.phoneNumberCountryCode) ? {
+              class: classes.ErrorInput,
+            }
+              : {}), { required: true, "onSl-select": (e) => callbacks.onFormChange("phoneCountry", e) }),
+              h("sl-input", { class: classes.SearchInput, placeholder: text.searchForCountryText, onKeyDown: (e) => {
+                  // Stop shoelace intercepting key presses
+                  e.stopPropagation();
+                }, "onSl-input": (e) => {
+                  callbacks.setPhoneCountrySearch(e.target.value);
+                } }), (_h = data === null || data === void 0 ? void 0 : data.phoneCountries) === null || _h === void 0 ? void 0 :
+              _h.map((c) => {
+                var _a, _b;
+                return (h("sl-menu-item", { style: { width: "500px" }, value: c.countryCode },
+                  h("div", { slot: "prefix", style: { marginRight: "8px" } }, `${(_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));
+              }), (_j = data === null || data === void 0 ? void 0 : data.allCountries) === null || _j === void 0 ? void 0 :
+              _j.map((c) => {
+                var _a, _b;
+                return (h("sl-menu-item", { value: c.countryCode, style: { display: "none" } },
+                  h("div", { slot: "prefix", style: { marginRight: "8px" } }, `${(_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));
+              })),
+            h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", label: " ", id: "phoneNumber", name: "/phoneNumber", value: formState.phoneNumber, style: { marginTop: "2px", width: "362px" }, validationError: ({ value }) => 
+              // Naive phone number validation
+              validateBillingField(/[a-zA-Z]+/, value) &&
+                formatErrorMessage(text.phoneNumber, text.error.fieldInvalidError), disabled: states.disabled || states.isPartner }, (((_k = formState.errors) === null || _k === void 0 ? void 0 : _k.phoneNumber) ? {
+              class: classes.ErrorInput,
+              helpText: formatErrorMessage(text.phoneNumber, formState.errors.phoneNumber),
+            }
+              : {}), { required: true }))),
           h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", label: text.address, id: "address", name: "/address", value: formState.address, validationError: ({ value }) => 
             // Checks for non-ASCII characters
             !validateBillingField(/^[\x20-\xFF]+$/, value) &&