@saasquatch/mint-components 1.10.3 → 1.11.0-1

package/dist/collection/components/sqm-leaderboard/useLeaderboard.js

@@ -23,26 +23,6 @@ const GET_LEADERBOARD = gql `
     }
   }
 `;
-const GET_LEADERBOARD_WITHOUT_NAMES = gql `
-  query (
-    $type: String!
-    $filter: UserLeaderboardFilterInput
-    $locale: RSLocale
-    $limit: Int!
-  ) {
-    userLeaderboard(type: $type, filter: $filter) {
-      dateModified
-      rows(limit: $limit) {
-        textValue(locale: $locale)
-        rank {
-          rank
-          denseRank
-          rowNumber
-        }
-      }
-    }
-  }
-`;
 const GET_RANK = gql `
   query (
     $type: String!
@@ -63,24 +43,6 @@ const GET_RANK = gql `
     }
   }
 `;
-const GET_RANK_WITHOUT_NAMES = gql `
-  query (
-    $type: String!
-    $filter: UserLeaderboardFilterInput
-    $locale: RSLocale
-  ) {
-    viewer {
-      ... on User {
-        leaderboardRank(type: $type, filter: $filter) {
-          textValue(locale: $locale)
-          rank
-          denseRank
-          rowNumber
-        }
-      }
-    }
-  }
-`;
 export function useLeaderboard(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
   const programIdContext = useProgramId();
@@ -106,8 +68,8 @@ export function useLeaderboard(props) {
   if (props.maxRows > 0) {
     variables["limit"] = props.maxRows;
   }
-  const { data: leaderboardData, loading: loadingLeaderboard, errors: leaderboardErrors, } = useQuery(props.hideNames ? GET_LEADERBOARD_WITHOUT_NAMES : GET_LEADERBOARD, variables, !(user === null || user === void 0 ? void 0 : user.jwt), { batch: false });
-  const { data: rankData } = useQuery(props.hideNames ? GET_RANK_WITHOUT_NAMES : GET_RANK, variables, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const { data: leaderboardData, loading: loadingLeaderboard, errors: leaderboardErrors, } = useQuery(GET_LEADERBOARD, variables, !(user === null || user === void 0 ? void 0 : user.jwt), { batch: false });
+  const { data: rankData } = useQuery(GET_RANK, variables, !(user === null || user === void 0 ? void 0 : user.jwt));
   const leaderboardRows = (_b = leaderboardData === null || leaderboardData === void 0 ? void 0 : leaderboardData.userLeaderboard) === null || _b === void 0 ? void 0 : _b.rows;
   const flattenedLeaderboard = getFlattenedLeaderboard(leaderboardRows);
   const sortedLeaderboard = flattenedLeaderboard === null || flattenedLeaderboard === void 0 ? void 0 : flattenedLeaderboard.sort(function (a, b) {
@@ -151,6 +113,8 @@ export function useLeaderboard(props) {
     },
     elements: {
       empty: props.empty,
+      essentials: props.essentials,
+      loadingstate: props.loadingstate,
     },
   };
 }

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: {
+    completeDocument: 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.completeDocument();
+    }
   }, []);
   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,13 @@ 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,
       }, callbacks: {
-        onStatusChange: props.callbacks.setDocusignStatus,
+        completeDocument: props.callbacks.completeDocument,
       }, text: props.text }));
     return (h(Host, null,
       h(DocusignFormView, { callbacks: props.callbacks, states: props.states, text: props.text, slots: {

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

@@ -14,6 +14,13 @@ const GET_TAX_DOCUMENT = gql `
     }
   }
 `;
+const COMPLETE_TAX_DOCUMENT = gql `
+  mutation completeImpactPublisherTaxDocument($vars: UserIdInput!) {
+    completeImpactPublisherTaxDocument(user: $vars) {
+      success
+    }
+  }
+`;
 export const DOCUSIGN_ERROR_STATES = [
   "exception",
   "decline",
@@ -23,20 +30,21 @@ 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;
   const user = useUserIdentity();
   const context = useParentValue(TAX_FORM_CONTEXT_NAMESPACE);
   const [step, setStep] = useParent(TAX_CONTEXT_NAMESPACE);
   const { data, loading: userLoading, refetch, } = useParentQueryValue(USER_QUERY_NAMESPACE);
   const publisher = (_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;
   const [createTaxDocument, { loading: documentLoading, data: document, errors: documentErrors },] = useMutation(GET_TAX_DOCUMENT);
+  const [completeTaxDocument, { loading: completeDocumentLoading, data: completeData, errors: completeErrors, },] = useMutation(COMPLETE_TAX_DOCUMENT);
   const [docusignStatus, setDocusignStatus] = useState(undefined);
   const [participantType, setParticipantType] = useState(undefined);
   const [errors, setErrors] = useState({});
   const [loading, setLoading] = useState(false);
   // 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, (_c = publisher === null || publisher === void 0 ? void 0 : publisher.currentTaxDocument) === null || _c === void 0 ? void 0 : _c.type)
-    ? (_d = publisher === null || publisher === void 0 ? void 0 : publisher.currentTaxDocument) === null || _d === void 0 ? void 0 : _d.type : undefined;
+  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;
   const actualDocumentType = existingDocumentType ||
     getDocumentType(participantType) || (publisher === null || publisher === void 0 ? void 0 : publisher.requiredTaxDocumentType);
   useEffect(() => {
@@ -50,19 +58,14 @@ 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({
           vars: {
+            provider: "COMPLY_EXCHANGE",
             user: {
               id: user.id,
               accountId: user.accountId,
@@ -81,33 +84,36 @@ 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))
+  const completeDocument = async () => {
+    if (!user)
       return;
-    if (DOCUSIGN_SUCCESS_STATES.includes(docusignStatus)) {
-      onSubmit();
+    try {
+      setLoading(true);
+      const result = await completeTaxDocument({
+        vars: {
+          id: user.id,
+          accountId: user.accountId,
+        },
+      });
+      console.log({ result });
+      if (!result || result.message)
+        throw new Error();
+      // @ts-expect-error: no data type for result
+      if (!result.completeImpactPublisherTaxDocument.success)
+        throw new Error();
+      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);
+    }
+  };
   const allLoading = userLoading || documentLoading || loading;
   return {
     states: {
@@ -115,7 +121,7 @@ export function useDocusignForm(props) {
       hideSteps: context.hideSteps,
       disabled: allLoading,
       participantTypeDisabled: allLoading || !!existingDocumentType,
-      loading: userLoading || loading,
+      loading: userLoading || loading || completeDocumentLoading,
       urlLoading: documentLoading,
       loadingError: !!(documentErrors === null || documentErrors === void 0 ? void 0 : documentErrors.message),
       formState: {
@@ -129,10 +135,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,
+      documentUrl: (_c = document === null || document === void 0 ? void 0 : document.createImpactPublisherTaxDocument) === null || _c === void 0 ? void 0 : _c.documentUrl,
     },
     callbacks: {
       setDocusignStatus,
+      completeDocument,
       setParticipantType,
     },
     text: props.getTextProps(),

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

@@ -107,7 +107,7 @@ export function useIndirectTaxForm(props) {
     setFormState((p) => ({ ...p, [field]: value }));
   };
   const onSubmit = async (event) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e;
     if (!option) {
       setErrors({ taxDetails: true });
       return;
@@ -168,7 +168,7 @@ export function useIndirectTaxForm(props) {
       await refetch();
       const resultPublisher = (_e = (_d = (_c = result
         .createImpactConnection) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 : _d.impactConnection) === null || _e === void 0 ? void 0 : _e.publisher;
-      const hasValidCurrentDocument = validTaxDocument(resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.requiredTaxDocumentType, (_f = resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.currentTaxDocument) === null || _f === void 0 ? void 0 : _f.type);
+      const hasValidCurrentDocument = validTaxDocument(resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.requiredTaxDocumentType) && (resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.currentTaxDocument);
       if ((resultPublisher === null || resultPublisher === void 0 ? void 0 : resultPublisher.requiredTaxDocumentType) &&
         !hasValidCurrentDocument) {
         // Go to docusign form

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

@@ -1,6 +1,6 @@
 import { getContextValueName, useHost, useLocale, useParentQuery, useParentState, useUserIdentity, } from "@saasquatch/component-boilerplate";
 import { useEffect, useMemo } from "@saasquatch/universal-hooks";
-import { getCountryObj, validTaxDocument } from "../utils";
+import { getCountryObj } from "../utils";
 import { COUNTRIES_NAMESPACE, COUNTRIES_QUERY_NAMESPACE, CURRENCIES_NAMESPACE, CURRENCIES_QUERY_NAMESPACE, FINANCE_NETWORK_SETTINGS_NAMESPACE, GET_COUNTRIES, GET_CURRENCIES, GET_FINANCE_NETWORK_SETTINGS, GET_USER, SORTED_COUNTRIES_NAMESPACE, TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "./data";
 function getCurrentStep(user) {
   var _a;
@@ -9,8 +9,7 @@ function getCurrentStep(user) {
   }
   const { requiredTaxDocumentType, currentTaxDocument, withdrawalSettings, brandedSignup, } = user.impactConnection.publisher;
   // If they do have a required document, look at current document
-  if (requiredTaxDocumentType &&
-    !validTaxDocument(requiredTaxDocumentType, currentTaxDocument === null || currentTaxDocument === void 0 ? void 0 : currentTaxDocument.type))
+  if (requiredTaxDocumentType && !currentTaxDocument)
     return "/3";
   if (!withdrawalSettings && brandedSignup)
     return "/4";