@saasquatch/mint-components 2.0.0-3 → 2.0.0-30

package/dist/cjs/sqm-big-stat_46.cjs.entry.js

@@ -26,8 +26,8 @@ const sqmPortalLoginView = require('./sqm-portal-login-view-bb50304c.js');
 const usePortalLogin = require('./usePortalLogin-353f776a.js');
 const AsYouType = require('./AsYouType-6788393a.js');
 const utilities = require('./utilities-9a0c5e91.js');
-const ShadowViewAddon = require('./ShadowViewAddon-23b04c91.js');
-require('./sqm-portal-container-view-07e4343f.js');
+const ShadowViewAddon = require('./ShadowViewAddon-016bebfd.js');
+require('./sqm-portal-container-view-ca86b9e5.js');
 const parseStates = require('./parseStates-d1effc19.js');
 const usePayoutStatus = require('./usePayoutStatus-fe32dd1a.js');
 
@@ -1568,13 +1568,6 @@ const Hero = class {
      * @uiName Minimum height (in px)
      */
     this.minHeight = 200;
-    /**
-     * Content background color or image (for use in the left column)
-     *
-     * @uiName Content background
-     * @uiWidget Background
-     */
-    this.background = "#f9fafb";
     /**
      * @uiName Padding size
      * @uiEnum ["none", "small", "medium","large"]
@@ -3191,6 +3184,14 @@ const PayoutStatusAlert = class {
      * @uiName Error description
      */
     this.errorDescription = "There was an error with determining your payout status.";
+    /**
+     * @undocumented
+     * @componentState { "title": "Payout Info Required", "props": { "states": { "status": "INFORMATION_REQUIRED" } }, "dependencies": ["sqm-payout-status-alert"] }
+     * @componentState { "title": "Verification Required", "props": { "states": { "status": "VERIFICATION:REQUIRED" } }, "dependencies": ["sqm-payout-status-alert"] }
+     * @componentState { "title": "Identity Verification", "props": { "states": { "status": "VERIFICATION:REVIEW" } }, "dependencies": ["sqm-payout-status-alert"] }
+     * @componentState { "title": "Account Hold", "props": { "states": { "status": "HOLD" } }, "dependencies": ["sqm-payout-status-alert"] }
+     */
+    this.stateController = "{}";
     domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
@@ -3205,12 +3206,16 @@ const PayoutStatusAlert = class {
   }
 };
 function useDemoPayoutStatusAlert(props) {
+  const states = parseStates.parseStates(props.stateController);
+  const formatted = Object.keys(states).reduce((prev, key) => key === "sqm-payout-status-alert"
+    ? { ...prev, ...states[key] }
+    : { ...prev, [`${key}_stateController`]: states[key] }, {});
   return cjs.cjs({
     states: {
       error: false,
       status: "INFORMATION_REQUIRED",
       loading: false,
-      showVerifyIdentity: false,
+      veriffLoading: false,
     },
     data: { type: "SquatchAdmin" },
     text: props.getTextProps(),
@@ -3218,7 +3223,7 @@ function useDemoPayoutStatusAlert(props) {
       onTermsClick: () => { },
       onClick: () => console.log("show"),
     },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+  }, formatted || props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
 const GET_USER$1 = index_module.dist.gql `
@@ -5759,40 +5764,7 @@ function useRewardExchangeListDemo(props) {
   const formatted = Object.keys(states).reduce((prev, key) => key === "sqm-reward-exchange-list"
     ? { ...prev, ...states[key] }
     : { ...prev, [`${key}_stateController`]: states[key] }, {});
-  const finalProps = cjs.cjs({ ...ShadowViewAddon.demoRewardExchange, content: { text: props } }, 
-  // {
-  //   states: {
-  //     content: {
-  //       text: props,
-  //     },
-  //     redeemStage: "chooseReward",
-  //     amount: 0,
-  //     selectedStep: undefined,
-  //     selectedItem: undefined,
-  //     open: false,
-  //     exchangeError: false,
-  //     queryError: false,
-  //     loading: false,
-  //     noExchangeOptions: false,
-  //     // empty: EmptySlot(),
-  //   },
-  //   data: {
-  //     // shareCode: "SHARECODE123",
-  //     exchangeList: demoRewardExchange.data.exchangeList,
-  //   },
-  //   callbacks: {
-  //     exchangeReward: () => {},
-  //     setExchangeState: (_: ExchangeState) => {},
-  //     setStage: (_: Stages) => {},
-  //     resetState: () => {},
-  //     copyFuelTankCode: () => {},
-  //   },
-  //   refs: {
-  //     canvasRef: {},
-  //   },
-  // },
-  props.demoData || formatted || {}, { arrayMerge: (_, a) => a });
-  console.log({ finalProps });
+  const finalProps = cjs.cjs({ ...ShadowViewAddon.demoRewardExchange, content: { text: props } }, props.demoData || formatted || {}, { arrayMerge: (_, a) => a });
   return finalProps;
 }
 

package/dist/cjs/sqm-empty_4.cjs.entry.js

@@ -8,7 +8,7 @@ const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js')
 require('./index.module-4f54e412.js');
 const utils = require('./utils-0d3ac0fb.js');
 require('./JSS-8503a151.js');
-const sqmPortalContainerView = require('./sqm-portal-container-view-07e4343f.js');
+const sqmPortalContainerView = require('./sqm-portal-container-view-ca86b9e5.js');
 
 function EmptyStateView(props) {
   const { emptyStateHeader, emptyStateImage, emptyStateText, supportText, missingFeature = "", } = props;

package/dist/cjs/{sqm-portal-container-view-07e4343f.js → sqm-portal-container-view-ca86b9e5.js}

@@ -38,7 +38,7 @@ function PortalContainerView(props, children) {
       maxWidth: props.maxWidth,
       margin: props.center && "auto",
       justifyContent: props.justifyContent,
-      backgroundColor: props.backgroundColor || "var(--sqm-portal-background)",
+      backgroundColor: props.backgroundColor || "inherit",
     },
   };
   const vanillaStyle = `

package/dist/cjs/sqm-stencilbook.cjs.entry.js

@@ -34,8 +34,8 @@ const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-25e
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-1c4e781f.js');
 require('./ErrorView-3f91e5ab.js');
 const sqmQrCodeView = require('./sqm-qr-code-view-4ccf89da.js');
-const ShadowViewAddon = require('./ShadowViewAddon-23b04c91.js');
-const sqmPortalContainerView = require('./sqm-portal-container-view-07e4343f.js');
+const ShadowViewAddon = require('./ShadowViewAddon-016bebfd.js');
+const sqmPortalContainerView = require('./sqm-portal-container-view-ca86b9e5.js');
 const IndirectTaxDetailsView = require('./IndirectTaxDetailsView-e5f70b8b.js');
 const utils = require('./utils-83d125fa.js');
 const sqmLeadInputFieldView = require('./sqm-lead-input-field-view-06ed3632.js');
@@ -16722,9 +16722,10 @@ const TaxAndCashDashboardW9ThresholdReached = () => {
         documentTypeString: utils.taxTypeToName("W9"),
         dateSubmitted: "Jan 18th, 2025",
         noFormNeeded: false,
-        notRegistered: true,
+        notRegistered: false,
         showNewFormDialog: false,
         hasHold: false,
+        enforceUsTaxComplianceOption: "CASH_ONLY_DEFER_W9",
       },
     } }));
 };
@@ -16750,7 +16751,7 @@ const TaxAndCashDashboardPayoutsOnHold = () => {
   return (index.h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
-        payoutStatus: "DONE",
+        payoutStatus: "HOLD",
         veriffLoading: false,
         canEditPayoutInfo: true,
         disabled: true,
@@ -16762,7 +16763,7 @@ const TaxAndCashDashboardPayoutsOnHold = () => {
         indirectTaxNumber: "123456",
         country: "Slovania",
         showNewFormDialog: false,
-        hasHold: true,
+        hasHold: false,
       },
     } }));
 };

package/dist/collection/components/sqm-hero/sqm-hero.js

@@ -24,13 +24,6 @@ export class Hero {
      * @uiName Minimum height (in px)
      */
     this.minHeight = 200;
-    /**
-     * Content background color or image (for use in the left column)
-     *
-     * @uiName Content background
-     * @uiWidget Background
-     */
-    this.background = "#f9fafb";
     /**
      * @uiName Padding size
      * @uiEnum ["none", "small", "medium","large"]
@@ -138,8 +131,7 @@ export class Hero {
         "text": "Content background color or image (for use in the left column)"
       },
       "attribute": "background",
-      "reflect": false,
-      "defaultValue": "\"#f9fafb\""
+      "reflect": false
     },
     "paddingSize": {
       "type": "string",

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

@@ -14,7 +14,7 @@ export function PortalContainerView(props, children) {
       maxWidth: props.maxWidth,
       margin: props.center && "auto",
       justifyContent: props.justifyContent,
-      backgroundColor: props.backgroundColor || "var(--sqm-portal-background)",
+      backgroundColor: props.backgroundColor || "inherit",
     },
   };
   const vanillaStyle = `

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

@@ -4,7 +4,7 @@ import { getProps } from "../../utils/utils";
 import { PortalFooterView } from "./sqm-portal-footer-view";
 /**
  * @uiName Footer
- * @validParents ["div","sqm-brand","sqm-portal-container", "sqm-divided-layout", "sqm-referral-card", "sqm-instant-access-registration", "sqm-portal-frame"]
+ * @validParents ["div","sqm-brand","sqm-portal-container", "sqm-divided-layout", "sqm-referral-card", "sqm-instant-access-registration", "sqm-portal-frame", "sqm-referred-registration"]
  */
 export class PortalFooter {
   constructor() {

package/dist/collection/components/sqm-reward-exchange-list/sqm-reward-exchange-list.js

@@ -793,39 +793,6 @@ function useRewardExchangeListDemo(props) {
   const formatted = Object.keys(states).reduce((prev, key) => key === "sqm-reward-exchange-list"
     ? { ...prev, ...states[key] }
     : { ...prev, [`${key}_stateController`]: states[key] }, {});
-  const finalProps = deepmerge({ ...demoRewardExchange, content: { text: props } }, 
-  // {
-  //   states: {
-  //     content: {
-  //       text: props,
-  //     },
-  //     redeemStage: "chooseReward",
-  //     amount: 0,
-  //     selectedStep: undefined,
-  //     selectedItem: undefined,
-  //     open: false,
-  //     exchangeError: false,
-  //     queryError: false,
-  //     loading: false,
-  //     noExchangeOptions: false,
-  //     // empty: EmptySlot(),
-  //   },
-  //   data: {
-  //     // shareCode: "SHARECODE123",
-  //     exchangeList: demoRewardExchange.data.exchangeList,
-  //   },
-  //   callbacks: {
-  //     exchangeReward: () => {},
-  //     setExchangeState: (_: ExchangeState) => {},
-  //     setStage: (_: Stages) => {},
-  //     resetState: () => {},
-  //     copyFuelTankCode: () => {},
-  //   },
-  //   refs: {
-  //     canvasRef: {},
-  //   },
-  // },
-  props.demoData || formatted || {}, { arrayMerge: (_, a) => a });
-  console.log({ finalProps });
+  const finalProps = deepmerge({ ...demoRewardExchange, content: { text: props } }, props.demoData || formatted || {}, { arrayMerge: (_, a) => a });
   return finalProps;
 }

package/dist/collection/components/sqm-titled-section/sqm-titled-section.js

@@ -4,7 +4,7 @@ import { getProps } from "../../utils/utils";
 import { PortalSectionView } from "./sqm-portal-section-view";
 /**
  * @uiName Titled Section
- * @validParents ["sqm-portal-container","div","sqm-divided-layout","template","sqm-hero","sqm-tab", "sqm-referred-registration", "sqb-program-section","sqb-conditional-section", "sqm-instant-access-registration", "sqm-referral-card"]
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","template","sqm-hero","sqm-tab", "sqm-referred-registration", "sqb-program-section","sqb-conditional-section", "sqm-instant-access-registration", "sqm-referral-card", "sqm-referred-registration"]
  * @validChildren ["div","sqm-portal-container","p","sqm-timeline","h1","h2","h3","h5","h4","sqm-qr-code","sqm-referral-code","sqm-referral-codes","sqm-share-code","sqm-share-link","sqm-text","span", "sqm-user-name"]
  * @slots [{"name":"label", "title":"Label"},{"name":"content", "title":"Content"}]
  * @exampleGroup Layout

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

@@ -1125,9 +1125,10 @@ export const TaxAndCashDashboardW9ThresholdReached = () => {
         documentTypeString: taxTypeToName("W9"),
         dateSubmitted: "Jan 18th, 2025",
         noFormNeeded: false,
-        notRegistered: true,
+        notRegistered: false,
         showNewFormDialog: false,
         hasHold: false,
+        enforceUsTaxComplianceOption: "CASH_ONLY_DEFER_W9",
       },
     } }));
 };
@@ -1153,7 +1154,7 @@ export const TaxAndCashDashboardPayoutsOnHold = () => {
   return (h("sqm-tax-and-cash-dashboard", { demoData: {
       ...dashboardProps,
       states: {
-        payoutStatus: "DONE",
+        payoutStatus: "HOLD",
         veriffLoading: false,
         canEditPayoutInfo: true,
         disabled: true,
@@ -1165,7 +1166,7 @@ export const TaxAndCashDashboardPayoutsOnHold = () => {
         indirectTaxNumber: "123456",
         country: "Slovania",
         showNewFormDialog: false,
-        hasHold: true,
+        hasHold: false,
       },
     } }));
 };

package/dist/collection/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert.js

@@ -5,6 +5,7 @@ import deepmerge from "deepmerge";
 import { getProps } from "../../../utils/utils";
 import { PayoutStatusAlertView, } from "./sqm-payout-status-alert-view";
 import { usePayoutStatus } from "./usePayoutStatus";
+import { parseStates } from "../../../utils/parseStates";
 /**
  * @uiName Payout Status Alert
  * @validParents ["sqm-portal-container","div","sqm-hero","sqm-instant-access-registration","sqm-brand","sqb-program-section","sqb-conditional-section"]
@@ -109,6 +110,14 @@ export class PayoutStatusAlert {
      * @uiName Error description
      */
     this.errorDescription = "There was an error with determining your payout status.";
+    /**
+     * @undocumented
+     * @componentState { "title": "Payout Info Required", "props": { "states": { "status": "INFORMATION_REQUIRED" } }, "dependencies": ["sqm-payout-status-alert"] }
+     * @componentState { "title": "Verification Required", "props": { "states": { "status": "VERIFICATION:REQUIRED" } }, "dependencies": ["sqm-payout-status-alert"] }
+     * @componentState { "title": "Identity Verification", "props": { "states": { "status": "VERIFICATION:REVIEW" } }, "dependencies": ["sqm-payout-status-alert"] }
+     * @componentState { "title": "Account Hold", "props": { "states": { "status": "HOLD" } }, "dependencies": ["sqm-payout-status-alert"] }
+     */
+    this.stateController = "{}";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -628,6 +637,39 @@ export class PayoutStatusAlert {
       "reflect": false,
       "defaultValue": "\"There was an error with determining your payout status.\""
     },
+    "stateController": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "{ \"title\": \"Payout Info Required\", \"props\": { \"states\": { \"status\": \"INFORMATION_REQUIRED\" } }, \"dependencies\": [\"sqm-payout-status-alert\"] }",
+            "name": "componentState"
+          }, {
+            "text": "{ \"title\": \"Verification Required\", \"props\": { \"states\": { \"status\": \"VERIFICATION:REQUIRED\" } }, \"dependencies\": [\"sqm-payout-status-alert\"] }",
+            "name": "componentState"
+          }, {
+            "text": "{ \"title\": \"Identity Verification\", \"props\": { \"states\": { \"status\": \"VERIFICATION:REVIEW\" } }, \"dependencies\": [\"sqm-payout-status-alert\"] }",
+            "name": "componentState"
+          }, {
+            "text": "{ \"title\": \"Account Hold\", \"props\": { \"states\": { \"status\": \"HOLD\" } }, \"dependencies\": [\"sqm-payout-status-alert\"] }",
+            "name": "componentState"
+          }],
+        "text": ""
+      },
+      "attribute": "state-controller",
+      "reflect": false,
+      "defaultValue": "\"{}\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
@@ -661,12 +703,16 @@ export class PayoutStatusAlert {
   }; }
 }
 function useDemoPayoutStatusAlert(props) {
+  const states = parseStates(props.stateController);
+  const formatted = Object.keys(states).reduce((prev, key) => key === "sqm-payout-status-alert"
+    ? { ...prev, ...states[key] }
+    : { ...prev, [`${key}_stateController`]: states[key] }, {});
   return deepmerge({
     states: {
       error: false,
       status: "INFORMATION_REQUIRED",
       loading: false,
-      showVerifyIdentity: false,
+      veriffLoading: false,
     },
     data: { type: "SquatchAdmin" },
     text: props.getTextProps(),
@@ -674,5 +720,5 @@ function useDemoPayoutStatusAlert(props) {
       onTermsClick: () => { },
       onClick: () => console.log("show"),
     },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+  }, formatted || props.demoData || {}, { arrayMerge: (_, a) => a });
 }

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

@@ -5,6 +5,7 @@ import deepmerge from "deepmerge";
 import { getProps } from "../../../utils/utils";
 import { TaxAndCashDashboardView } from "./sqm-tax-and-cash-dashboard-view";
 import { useTaxAndCashDashboard, } from "./useTaxAndCashDashboard";
+import { parseStates } from "../../../utils/parseStates";
 /**
  * @uiName Tax and Cash Status Dashboard
  */
@@ -340,7 +341,7 @@ export class TaxAndCashDashboard {
     this.cancelButton = "Cancel";
     /**
      * @undocumented
-     * @componentState { "title": "Payouts on hold", "props": { "states": { "payoutStatus": "HOLD" } }, "uiGroup": "Dashboard Properties" }
+     * @componentState { "title": "Payouts on hold", "props": { "states": { "payoutStatus": "HOLD" } }, "dependencies": ["sqm-payout-status-alert"], "uiGroup": "Dashboard Properties" }
      */
     this.stateController = "{}";
     withHooks(this);
@@ -1888,7 +1889,7 @@ export class TaxAndCashDashboard {
             "text": undefined,
             "name": "undocumented"
           }, {
-            "text": "{ \"title\": \"Payouts on hold\", \"props\": { \"states\": { \"payoutStatus\": \"HOLD\" } }, \"uiGroup\": \"Dashboard Properties\" }",
+            "text": "{ \"title\": \"Payouts on hold\", \"props\": { \"states\": { \"payoutStatus\": \"HOLD\" } }, \"dependencies\": [\"sqm-payout-status-alert\"], \"uiGroup\": \"Dashboard Properties\" }",
             "name": "componentState"
           }],
         "text": ""
@@ -1900,47 +1901,47 @@ export class TaxAndCashDashboard {
   }; }
 }
 function useDemoTaxAndCashDashboard(props) {
-  console.log("dashboard", { props });
-  // @ts-ignore
-  return deepmerge({
-    states: {
-      dateSubmitted: "today",
-      documentType: "W9",
-      documentTypeString: "W-9",
-      status: "ACTIVE",
-      country: "United States",
-      indirectTaxNumber: "55555555",
-      indirectTaxType: "Indirect Tax",
-      noFormNeeded: false,
-      disabled: false,
-      loading: false,
-      showNewFormDialog: false,
-      hasHold: false,
-      subRegion: "CA",
-      subRegionTaxNumber: undefined,
-      qstNumber: undefined,
-      isBusinessEntity: false,
-      province: undefined,
-      notRegistered: true,
-      loadingError: false,
-      payoutStatus: "DONE",
-      veriffLoading: false,
-      canEditPayoutInfo: true,
-    },
-    callbacks: {
-      onClick: () => console.debug("check step"),
-      onEditPayoutInfo: () => console.debug("payout info"),
-      onNewFormCancel: () => console.log("hide"),
-      onNewFormClick: () => console.log("show"),
-      onVerifyClick: () => console.log("verify"),
-    },
-    text: props.getTextProps(),
-    slots: {
-      payoutDetailsCardSlot: (h("sqm-payout-details-card", { demoData: {
-          states: {
-            badgeStatus: "nextPayout",
-          },
-        } })),
-    },
-  }, props.demoData || props.stateController || {}, { arrayMerge: (_, a) => a });
+  const parsed = parseStates(props.stateController);
+  const formatted = parsed["sqm-tax-and-cash-dashboard"] !== undefined
+    ? parsed["sqm-tax-and-cash-dashboard"]
+    : {};
+  const merged = deepmerge.all([
+    {
+      states: {
+        dateSubmitted: "today",
+        documentType: "W9",
+        documentTypeString: "W-9",
+        status: "ACTIVE",
+        country: "United States",
+        indirectTaxNumber: "55555555",
+        indirectTaxType: "Indirect Tax",
+        noFormNeeded: false,
+        disabled: false,
+        loading: false,
+        showNewFormDialog: false,
+        hasHold: false,
+        subRegion: "CA",
+        subRegionTaxNumber: undefined,
+        qstNumber: undefined,
+        isBusinessEntity: false,
+        province: undefined,
+        notRegistered: true,
+        loadingError: false,
+        payoutStatus: "HOLD",
+        veriffLoading: false,
+        canEditPayoutInfo: true,
+      },
+      callbacks: {
+        onClick: () => console.debug("check step"),
+        onEditPayoutInfo: () => console.debug("payout info"),
+        onNewFormCancel: () => console.log("hide"),
+        onNewFormClick: () => console.log("show"),
+        onVerifyClick: () => console.log("verify"),
+      },
+      text: props.getTextProps(),
+    },
+    props.demoData || {},
+    formatted,
+  ], { arrayMerge: (_, a) => a });
+  return merged;
 }

package/dist/esm/{ShadowViewAddon-c0bd62f7.js → ShadowViewAddon-4cde160a.js}

@@ -13,7 +13,7 @@ import { l as luxon } from './luxon-bbf75a9d.js';
 import { T as TextSpanView } from './sqm-text-span-view-4c17b8c9.js';
 import { p as pathToRegexp } from './index-ffa26b43.js';
 import { a as isValidColor, b as isMobile } from './utilities-72c07b09.js';
-import { a as PortalSectionView, P as PortalContainerView } from './sqm-portal-container-view-176e92e3.js';
+import { a as PortalSectionView, P as PortalContainerView } from './sqm-portal-container-view-16309b22.js';
 
 function BigStatView(props) {
   const { statvalue, flexReverse, alignment, statTextColor, statFontSize, descriptionTextColor, descriptionFontSize, statFontWeight, } = props;