@saasquatch/mint-components 2.0.0-5 → 2.0.0-51

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

@@ -3184,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() { }
@@ -3198,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(),
@@ -3211,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 `
@@ -5752,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-stencilbook.cjs.entry.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/cjs/sqm-tax-and-cash.cjs.entry.js

@@ -1283,7 +1283,7 @@ const TaxAndCashMonolith = class {
       case "/4":
         return (index.h("sqm-banking-info-form", Object.assign({}, this.getGeneralStepTextProps("step4_"))));
       case "/dashboard":
-        return (index.h("sqm-tax-and-cash-dashboard", Object.assign({}, this.getGeneralStepTextProps("dashboard_"))));
+        return (index.h("sqm-tax-and-cash-dashboard", Object.assign({}, this.getGeneralStepTextProps("dashboard_"), { stateController: props["sqm-tax-and-cash-dashboard_stateController"] || "{}" })));
       case "/error":
         return (index.h(ErrorView.ErrorView, { loadingErrorAlertHeader: this.loadingErrorAlertHeader, loadingErrorAlertDescription: global.intl.formatMessage({
             id: "loadingErrorAlertDescription",

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

@@ -122,13 +122,13 @@ export class Hero {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Content background",
+            "text": "Splash image",
             "name": "uiName"
           }, {
             "text": "Background",
             "name": "uiWidget"
           }],
-        "text": "Content background color or image (for use in the left column)"
+        "text": "Splash image or background color (for use in the left column)"
       },
       "attribute": "background",
       "reflect": false
@@ -172,13 +172,13 @@ export class Hero {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Splash image",
+            "text": "Content background",
             "name": "uiName"
           }, {
             "text": "Background",
             "name": "uiWidget"
           }],
-        "text": "Splash image or background color (for use in the right column)"
+        "text": "Content background color or image (for use in the right column)"
       },
       "attribute": "secondary-background",
       "reflect": false

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/sqm-tax-and-cash.js

@@ -1125,7 +1125,7 @@ export class TaxAndCashMonolith {
       case "/4":
         return (h("sqm-banking-info-form", Object.assign({}, this.getGeneralStepTextProps("step4_"))));
       case "/dashboard":
-        return (h("sqm-tax-and-cash-dashboard", Object.assign({}, this.getGeneralStepTextProps("dashboard_"))));
+        return (h("sqm-tax-and-cash-dashboard", Object.assign({}, this.getGeneralStepTextProps("dashboard_"), { stateController: props["sqm-tax-and-cash-dashboard_stateController"] || "{}" })));
       case "/error":
         return (h(ErrorView, { loadingErrorAlertHeader: this.loadingErrorAlertHeader, loadingErrorAlertDescription: intl.formatMessage({
             id: "loadingErrorAlertDescription",

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

@@ -115,6 +115,10 @@ const style = {
   },
   EditBankDetailsButton: {
     marginTop: "var(--sl-spacing-large)",
+    backgroundColor: "var(--sqm-secondary-button-background)",
+    color: "var(--sqm-secondary-button-color)",
+    borderColor: "var(--sqm-secondary-button-color-border)",
+    borderRadius: "var(--sqm-secondary-button-radius)",
   },
   SkeletonOne: {
     width: "15%",
@@ -194,6 +198,26 @@ const style = {
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
+const vanillaStyle = `
+    :host{
+      display: block;   
+    }
+
+    sl-button[type="secondary"]::part(base) {
+    font-family: var(--sqm-primary-font);
+      background-color: var(--sqm-secondary-button-background);
+      color: var(--sqm-secondary-button-color);
+      border-color: var(--sqm-secondary-button-color-border);
+      border-radius: var(--sqm-secondary-button-radius);
+    }
+
+    sl-button[type="secondary"]::part(base):hover {
+      background-color: var(--sqm-secondary-button-background-hover);
+      color: var(--sqm-secondary-button-color-hover);
+      border-color: var(--sqm-secondary-button-border-color-hover);
+    }
+    
+  `;
 export const TaxAndCashDashboardView = (props) => {
   var _a;
   const { states, text, callbacks, slots } = props;
@@ -398,7 +422,10 @@ export const TaxAndCashDashboardView = (props) => {
   const alertInfo = getAlert(states.payoutStatus);
   return (h("div", null,
     h("div", null,
-      h("style", { type: "text/css" }, styleString),
+      h("style", { type: "text/css" },
+        styleString,
+        " ",
+        vanillaStyle),
       states.loadingError && (h("div", null,
         h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true },
           h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
@@ -436,7 +463,10 @@ export const TaxAndCashDashboardView = (props) => {
         h("div", { class: sheet.classes.BankingInformationContainer },
           slots.payoutDetailsCardSlot,
           !states.loading && (h("p", { class: sheet.classes.DescriptionText }, text.payoutFromImpact)),
-          states.canEditPayoutInfo && (h("sl-button", { disabled: states.disabled || states.loading, type: "default", class: sheet.classes.EditBankDetailsButton, onClick: callbacks.onEditPayoutInfo }, text.editPaymentInformationButton)))),
+          states.canEditPayoutInfo && (h("sl-button", { disabled: states.disabled || states.loading, exportparts: "base: secondarybutton-base", type: "secondary", 
+            // style={{ backgroundColor: "green" }}
+            // class={sheet.classes.EditBankDetailsButton}
+            onClick: callbacks.onEditPayoutInfo }, text.editPaymentInformationButton)))),
       (!states.noFormNeeded || states.status === "NOT_VERIFIED") && (h("div", { class: sheet.classes.TaxDocumentsContainer },
         h("div", null, states.loading ? (h("div", { class: sheet.classes.TaxSectionSkeletonContainer },
           h("sl-skeleton", { class: sheet.classes.SkeletonOne }),

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

@@ -2,6 +2,7 @@ import { isDemo } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Host, Prop } from "@stencil/core";
 import deepmerge from "deepmerge";
+import { parseStates } from "../../../utils/parseStates";
 import { getProps } from "../../../utils/utils";
 import { TaxAndCashDashboardView } from "./sqm-tax-and-cash-dashboard-view";
 import { useTaxAndCashDashboard, } from "./useTaxAndCashDashboard";
@@ -1900,7 +1901,7 @@ export class TaxAndCashDashboard {
   }; }
 }
 function useDemoTaxAndCashDashboard(props) {
-  console.log("dashboard", { props });
+  const stateController = parseStates(props.stateController);
   // @ts-ignore
   return deepmerge({
     states: {
@@ -1942,5 +1943,5 @@ function useDemoTaxAndCashDashboard(props) {
           },
         } })),
     },
-  }, props.demoData || props.stateController || {}, { arrayMerge: (_, a) => a });
+  }, stateController || props.demoData || {}, { arrayMerge: (_, a) => a });
 }