@saasquatch/mint-components 1.8.0-21 → 1.8.0-23

package/dist/esm/{sqm-tax-and-cash.entry.js → sqm-docusign-embed_2.entry.js}

@@ -1,10 +1,31 @@
-import { h, r as registerInstance, c as Host } from './index-17b4da69.js';
+import { r as registerInstance, h, c as Host } from './index-17b4da69.js';
 import { f as useEffect, m as h$1 } from './stencil-hooks.module-2b1ac06e.js';
 import { V, e as setUserIdentity, H, i as isDemo } from './index.module-4d07653e.js';
-import { c as cjs } from './cjs-bdfb4486.js';
+import './cjs-bdfb4486.js';
 import { g as getContextValueName, a as useParentState, T as TAX_CONTEXT_NAMESPACE, U as USER_INFO_NAMESPACE, b as USER_QUERY_NAMESPACE, G as GET_USER, C as COUNTRIES_NAMESPACE, c as GET_COUNTRIES, d as CURRENCIES_NAMESPACE, e as GET_CURRENCIES } from './data-e76577b2.js';
 import { u as useParentQuery } from './useParentQuery-90a33801.js';
 
+const DocusignEmbedComponent = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  // private iframe: HTMLIFrameElement;
+  // async componentDidLoad() {
+  //   // TODO: Replace with actual endpoint when it's ready
+  //   const url = await (await fetch("http://localhost:5555/geturl")).text();
+  //   this.iframe.src = url;
+  //   // this.iframe.src =
+  //   //   "https://demo.docusign.net/Signing/MTRedeem/v1/81222592-d65d-4d8f-b847-04856779a9f4?slt=eyJ0eXAiOiJNVCIsImFsZyI6IlJTMjU2Iiwia2lkIjoiNjgxODVmZjEtNGU1MS00Y2U5LWFmMWMtNjg5ODEyMjAzMzE3In0.AQYAAAABAAMABwAAIIekfxjcSAgAAMCYK6EY3EgYAAEAAAAAAAAAIQDwAgAAeyJUb2tlbklkIjoiYzMyZjkwZDAtOGYyMy00MzZhLWFlNTctN2Q1MDgxZGRkZjAxIiwiRXhwaXJhdGlvbiI6IjIwMjQtMDEtMThUMjM6NTE6MDgrMDA6MDAiLCJJc3N1ZWRBdCI6IjIwMjQtMDEtMThUMjM6NDY6MDguNDY0OTEwNCswMDowMCIsIlJlc291cmNlSWQiOiIxMGIzZDE3MS1hNGI3LTQ1NDUtYjBmNy00OTEwNGI0ZjJhNTQiLCJSZXNvdXJjZXMiOiJ7XCJFbnZlbG9wZUlkXCI6XCIxMGIzZDE3MS1hNGI3LTQ1NDUtYjBmNy00OTEwNGI0ZjJhNTRcIixcIkFjdG9yVXNlcklkXCI6XCI1ZTg0M2IwMS0wNjUwLTRkZTYtOGJkZS00OTBjYzBkYmFhMDVcIixcIlJlY2lwaWVudElkXCI6XCIwYTMwZDdhNC1iZWYzLTRhYjUtYjg0YS0wMjBiMTllZTgzMjZcIixcIkZha2VRdWVyeVN0cmluZ1wiOlwidD1iN2ZmOGNjZC0yNzE4LTQ1MWEtYmRhYS0zMDk2OTcxYjY3OGJcIixcIkludGVncmF0b3JLZXlcIjpcIklNUEEtMmE1YzM5YWItYTlmNi00NThiLTgzZWYtM2Y3ZGVkOTNhZWE1XCIsXCJDcmVhdGVkQXRcIjpcIjIwMjQtMDEtMThUMjM6NDY6MDguMzY1NTgzWlwifSIsIlRva2VuVHlwZSI6MSwiQXVkaWVuY2UiOiIyNWUwOTM5OC0wMzQ0LTQ5MGMtOGU1My0zYWIyY2E1NjI3YmYiLCJSZWRpcmVjdFVyaSI6Imh0dHBzOi8vZGVtby5kb2N1c2lnbi5uZXQvU2lnbmluZy9TdGFydEluU2Vzc2lvbi5hc3B4IiwiSGFzaEFsZ29yaXRobSI6MCwiSGFzaFJvdW5kcyI6MCwiVG9rZW5TdGF0dXMiOjAsIklzU2luZ2xlVXNlIjpmYWxzZX0_AIDnvlaAGNxI.pz7FN5reKM0PrJ1vCyu8fgCCYBLlzkVnQgbgrrE4errETVxTYz88j51emxqthnUz0MlKvpQ7v8vf09CF22bHtM7jPtriMMILMhhTrii2nUMpYpchgKUIayIZhcvlCgL7hET6DxjsLTcEvuFr11Bumn-1qmNZHh7KJvfBHN3Fve1F031dJUxhxC2XK2EKGcUvM8yXLGWMCFpkYPQBY-m6lfSqdoRIoTUzqFA9H1331kr1zUsfkR8ygyANItyf1a9eTpVuPfpVi9Sv8eRFE1Jvtj8B2Jzi4dghG9IFyBYrRNoKAUP0R2cB8QU-VdPbos5w8Wgp8OXxuqLwXeP9D3WLtA";
+  // }
+  render() {
+    console.debug("SQM-DOCUSIGN-EMBED -- URL:", this.url);
+    return (h("iframe", {
+      // ref={(el) => (this.iframe = el)}
+      src: this.url, width: "100%", height: "100%", class: "docusign-iframe"
+    }));
+  }
+};
+
 function LoadingSkeleton() {
   return (h("div", { style: { width: "100%" } },
     h("sl-skeleton", { style: { marginBottom: "28px" } }),
@@ -138,10 +159,11 @@ const TaxAndCash = class {
   disconnectedCallback() { }
   render() {
     const inDemoMode = isDemo();
-    const props = inDemoMode ? useTaxAndCashDemo(this) : useTaxAndCash();
+    // const props = inDemoMode ? useTaxAndCashDemo(this) : useTaxAndCash();
+    const props = useTaxAndCash();
     if (props.loading)
       return h(LoadingSkeleton, null);
-    return (h(Host, null, inDemoMode && (h("div", null, h("button", { onClick: () => props.setStep(getPrevStep(props.step)) }, "Preview preview step"), " ", h("button", { onClick: () => props.setStep(getNextStep(props.step)) }, "Preview next step"))), h("sqm-context-router", { contextName: props.namespace }, h("slot", null))));
+    return (h(Host, null, inDemoMode && (h("div", null, h("button", { onClick: () => props.setStep(getPrevStep(props.step)) }, "Preview previous step"), " ", h("button", { onClick: () => props.setStep(getNextStep(props.step)) }, "Preview next step"))), h("sqm-context-router", { contextName: props.namespace }, h("slot", null))));
   }
 };
 function getNextStep(step) {
@@ -149,9 +171,9 @@ function getNextStep(step) {
     return "/2";
   if (step === "/2")
     return "/3/W9";
-  if (step.includes("/3"))
-    return "/4";
-  if (step === "/4")
+  if (step.includes("/3/"))
+    return "/3b";
+  if (step === "/3b")
     return "/submitted";
   if (step === "/loading")
     return "/1";
@@ -164,25 +186,13 @@ function getPrevStep(step) {
     return "/1";
   if (step.includes("/3"))
     return "/2";
-  if (step === "/4")
+  if (step === "/3b")
     return "/3/W9";
   if (step === "/submitted")
-    return "/4";
+    return "/3b";
   if (step === "/loading")
     return "/1";
   return "/loading";
 }
-function useTaxAndCashDemo(props) {
-  const host = V();
-  const [step, setStep] = useParentState({
-    namespace: TAX_CONTEXT_NAMESPACE,
-    initialValue: "/1",
-  });
-  return cjs({
-    namespace: getContextValueName(TAX_CONTEXT_NAMESPACE),
-    step,
-    setStep,
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}
 
-export { TaxAndCash as sqm_tax_and_cash };
+export { DocusignEmbedComponent as sqm_docusign_embed, TaxAndCash as sqm_tax_and_cash };

package/dist/esm/{sqm-empty_5.entry.js → sqm-empty_4.entry.js}

@@ -114,66 +114,6 @@ const PortalContainer = class {
   }
 };
 
-const vanillaStyle = `
-  sqm-text {
-    display: block;
-  }
-
-  sqm-text h1 {
-    font-size: var(--sl-font-size-xxx-large);
-    font-weight: var(--sl-font-weight-semibold);
-    color: var(--sl-color-neutral-800);
-    margin: 0;
-  }
-
-  sqm-text h2 {
-    font-size: var(--sl-font-size-xx-large);
-    font-weight: var(--sl-font-weight-semibold);
-    color: var(--sl-color-neutral-800);
-    margin: 0;
-  }
-
-  sqm-text h3 {
-    font-size: var(--sl-font-size-x-large);
-    font-weight: var(--sl-font-weight-semibold);
-    color: var(--sl-color-neutral-800);
-    margin: 0;
-  }
-
-  sqm-text h4 {
-    font-size: var(--sl-font-size-large);
-    font-weight: var(--sl-font-weight-semibold);
-    color: var(--sl-color-neutral-800);
-    margin: 0;
-  }
-
-  sqm-text p {
-    font-size: var(--sl-font-size-medium);
-    font-weight: var(--sl-font-weight-normal);
-    color: var(--sl-color-neutral-800);
-    margin: 0;
-  }
-
-  sqm-text sub {
-    font-size: var(--sl-font-size-small);
-    font-weight: var(--sl-font-weight-normal);
-    color: var(--sl-color-neutral-400);
-    margin: 0;
-  }
-`;
-const Text = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ignored = true;
-    h$1(this);
-  }
-  disconnectedCallback() { }
-  componentWillLoad() { }
-  render() {
-    return (h("div", null, h("style", null, vanillaStyle), h("slot", null)));
-  }
-};
-
 const TitledSection = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -212,4 +152,4 @@ const TitledSection = class {
   }
 };
 
-export { Empty as sqm_empty, Image as sqm_image, PortalContainer as sqm_portal_container, Text as sqm_text, TitledSection as sqm_titled_section };
+export { Empty as sqm_empty, Image as sqm_image, PortalContainer as sqm_portal_container, TitledSection as sqm_titled_section };

package/dist/esm/sqm-payout-details-card-0b665414.js

@@ -0,0 +1,399 @@
+import { h } from './index-17b4da69.js';
+import { c as createStyleSheet } from './JSS-67b5cff8.js';
+
+const style = {
+  FormWrapper: {},
+  ErrorInput: {
+    "&::part(base)": {
+      border: "1px solid var(--sl-color-danger-500)",
+      borderRadius: "var(--sl-input-border-radius-medium)",
+    },
+    "&::part(help-text)": {
+      color: "var(--sl-color-danger-500)",
+    },
+  },
+  ErrorText: {
+    color: "var(--sl-color-danger-500)",
+    marginTop: "10px",
+  },
+  TextContainer: {
+    display: "flex",
+    justifyContent: "flex-start",
+    flexDirection: "column",
+    gap: "24px",
+    paddingBottom: "16px",
+  },
+  InputContainer: {
+    display: "flex",
+    justifyContent: "flex-start",
+    flexDirection: "column",
+    gap: "24px",
+    paddingBottom: "36px",
+  },
+  BtnContainer: {
+    paddingTop: "36px",
+    display: "flex",
+    gap: "8px",
+  },
+  CheckboxWrapper: {
+    display: "flex",
+    justifyContent: "flex-start",
+    flexDirection: "column",
+  },
+  DescriptionText: {
+    color: "var(--sl-color-neutral-500)",
+  },
+  BoldText: {
+    fontWeight: "bold",
+  },
+  RoundedCheckbox: {
+    "&::part(control)": {
+      borderRadius: "50%",
+    },
+  },
+  AlertContainer: {
+    "&::part(base)": {
+      backgroundColor: "var(--sl-color-red-100)",
+      borderTop: "none",
+      padding: "0 16px",
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-danger-500)",
+    },
+  },
+  PartnerAlertContainer: {
+    "&::part(base)": {
+      backgroundColor: "var(--sl-color-sky-100)",
+      borderTop: "none",
+      padding: "0 16px",
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-blue-500)",
+    },
+  },
+};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+const vanillaStyle = `
+    :host{
+      display: block;   
+    }
+    * {
+       margin: 0;
+       padding: 0;
+       box-sizing: border-box;
+    }
+
+    p {
+      line-height: 18px;
+      color: var(--sl-color-gray-800);
+       font-size: var(--sl-font-size-small);
+    }
+
+    sl-radio-group::part(base) {
+      display: flex;
+      flex-direction: column;
+    }
+
+  `;
+const UserInfoFormView = (props) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+  const { states, states: { formState }, callbacks, text, refs, data, } = props;
+  const { classes } = sheet;
+  console.log({ formState, data });
+  return (h("sl-form", { class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
+    h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle),
+    h("div", { class: classes.TextContainer },
+      h("div", null,
+        h("p", null, text.formStep),
+        h("h3", null, text.personalInformation))),
+    ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (h("sl-alert", { type: "warning", open: true, class: sheet.classes.AlertContainer },
+      h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+      h("strong", null, text.error.generalTitle),
+      h("br", null),
+      text.error.generalDescription)),
+    states.isPartner && (h("sl-alert", { type: "primary", open: true, class: sheet.classes.PartnerAlertContainer },
+      h("sl-icon", { slot: "icon", name: "info-circle" }),
+      h("strong", null, text.isPartnerAlertHeader),
+      h("br", null),
+      text.isPartnerAlertDescription)),
+    states.loading ? (h("sl-spinner", { style: { fontSize: "50px", margin: "40px" } })) : (h("div", null,
+      h("div", { class: classes.InputContainer },
+        h("sl-input", Object.assign({ exportparts: "label: input-label", value: formState.firstName, label: text.firstName, disabled: states.disabled }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.firstName) ? {
+          class: classes.ErrorInput,
+          helpText: text.error.firstName,
+        }
+          : {}), { id: "firstName", name: "/firstName", required: true })),
+        h("sl-input", Object.assign({ exportparts: "label: input-label", value: formState.lastName, label: text.lastName, disabled: states.disabled }, (((_c = formState.errors) === null || _c === void 0 ? void 0 : _c.lastName) ? {
+          class: classes.ErrorInput,
+          helpText: text.error.lastName,
+        }
+          : {}), { id: "lastName", name: "/lastName", required: true })),
+        h("sl-input", { exportparts: "label: input-label", value: formState.email, label: text.email, disabled: true, id: "email", name: "/email", required: true }),
+        h("sl-select", Object.assign({ id: "countryCode", exportparts: "label: input-label", name: "/countryCode", label: text.country, value: formState.countryCode, disabled: states.disabled }, (((_d = formState.errors) === null || _d === void 0 ? void 0 : _d.countryCode) ? {
+          class: classes.ErrorInput,
+          helpText: text.error.countryCode,
+        }
+          : {}), { required: true }), (_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)))),
+        h("sl-select", Object.assign({ id: "currency", exportparts: "label: input-label", name: "/currency", label: text.currency, value: formState.currency, disabled: states.disabled }, (((_f = formState.errors) === null || _f === void 0 ? void 0 : _f.currency) ? {
+          class: classes.ErrorInput,
+          helpText: text.error.currency,
+        }
+          : {}), { required: true }), (_g = data === null || data === void 0 ? void 0 : data.currencies) === null || _g === void 0 ? void 0 : _g.map((c) => (h("sl-menu-item", { value: c.currencyCode }, c.currencyCode)))),
+        h("div", { class: classes.CheckboxWrapper },
+          h("p", { class: classes.BoldText }, text.participantType),
+          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 }, text.individualParticipant),
+            h("sl-radio", { exportparts: "base: radio-base", value: "businessEntity", name: "/participantType", checked: formState.participantType === "businessEntity", disabled: states.disabled }, text.businessEntity)),
+          ((_h = formState.errors) === null || _h === void 0 ? void 0 : _h.participantType) && (h("p", { class: classes.ErrorText }, text.error.participantType))),
+        h("div", { class: classes.CheckboxWrapper },
+          h("p", { class: classes.BoldText },
+            " ",
+            text.taxAndBankingCollection),
+          h("sl-checkbox", { exportparts: "label: input-label", checked: formState.allowBankingCollection === true, "onSl-change": (e) => {
+              e.target.value = e.target.checked;
+            }, disabled: states.isPartner ? false : states.disabled, required: true, value: formState.allowBankingCollection, id: "allowBankingCollection", name: "/allowBankingCollection" }, text.allowBankingCollection),
+          ((_j = formState.errors) === null || _j === void 0 ? void 0 : _j.allowBankingCollection) && (h("p", { class: classes.ErrorText }, text.error.allowBankingCollection)))),
+      h("sl-button", { type: "primary", disabled: states.isPartner ? false : states.disabled, loading: states.loading, submit: true, exportparts: "base: primarybutton-base" }, text.submitButton)))));
+};
+
+const style$1 = {
+  Container: {
+    width: "100%",
+  },
+  InputContainer: {
+    width: "100%",
+    display: "flex",
+    justifyContent: "flex-start",
+    flexDirection: "column",
+    gap: "16px",
+    padding: "16px",
+  },
+  HR: {
+    border: "1px solid #E0E0E0",
+    margin: "10px 0",
+  },
+  Input: {
+    maxWidth: "500px",
+  },
+  ErrorInput: {
+    "&::part(base)": {
+      border: "1px solid var(--sl-color-danger-500)",
+      borderRadius: "var(--sl-input-border-radius-medium)",
+    },
+    "&::part(help-text)": {
+      color: "var(--sl-color-danger-500)",
+    },
+  },
+};
+const sheet$1 = createStyleSheet(style$1);
+const styleString$1 = sheet$1.toString();
+const vanillaStyle$1 = `
+    :host{
+      display: block;   
+    }
+    * {
+       margin: 0;
+       padding: 0;
+       box-sizing: border-box;
+    }
+  `;
+const OtherRegionSlotView = (props) => {
+  var _a, _b, _c;
+  const { states, states: { formState }, text, } = props;
+  const { classes } = sheet$1;
+  console.log("regions", { formState });
+  return (h("div", { style: states.hide ? { display: "none" } : {} },
+    h("form", { class: classes.Container },
+      h("style", { type: "text/css" },
+        styleString$1,
+        vanillaStyle$1),
+      h("hr", { class: classes.HR }),
+      h("div", { class: classes.InputContainer },
+        h("sl-select", Object.assign({ required: true, class: classes.Input, value: formState.countryCode, exportparts: "label: input-label", label: text.selectedRegion, disabled: states.loading }, (((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.selectedRegion) && {
+          class: classes.ErrorInput,
+          helpText: text.error.selectedRegion,
+        }), { id: "selectedRegion", name: "/selectedRegion" }), (_b = props.data.countries) === null || _b === void 0 ? void 0 : _b.map((c) => (h("sl-menu-item", { value: c.countryCode }, c.displayName)))),
+        h("sl-input", Object.assign({ required: true, exportparts: "label: input-label", class: classes.Input, value: formState.vatNumber, label: text.vatNumber, disabled: states.loading }, (((_c = formState.errors) === null || _c === void 0 ? void 0 : _c.vatNumber) && {
+          class: classes.ErrorInput,
+          helpText: text.error.vatNumber,
+        }), { id: "vatNumber", name: "/vatNumber" }))),
+      h("hr", { class: classes.HR }))));
+};
+const IndirectDetailsSlotView = (props) => {
+  var _a, _b;
+  const { states, states: { formState }, text, } = props;
+  const { classes } = sheet$1;
+  console.log("regions", { formState });
+  return (h("div", { style: states.hide ? { display: "none" } : {} },
+    h("form", { class: classes.Container },
+      h("style", { type: "text/css" },
+        styleString$1,
+        vanillaStyle$1),
+      h("hr", { class: classes.HR }),
+      h("div", { class: classes.InputContainer },
+        h("sl-select", Object.assign({ required: true, value: formState.province, exportparts: "label: input-label", class: classes.Input, label: text.province, disabled: states.loading }, (((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.province) && {
+          class: classes.ErrorInput,
+          helpText: text.error.province,
+        }), { id: "province", name: "/province" }),
+          h("sl-menu-item", { value: "ON" }, "Ontario"),
+          h("sl-menu-item", { value: "QC" }, "Quebec"),
+          h("sl-menu-item", { value: "NS" }, "Nova Scotia"),
+          h("sl-menu-item", { value: "NB" }, "New Brunswick"),
+          h("sl-menu-item", { value: "MB" }, "Manitoba"),
+          h("sl-menu-item", { value: "BC" }, "British Columbia"),
+          h("sl-menu-item", { value: "PE" }, "Prince Edward Island"),
+          h("sl-menu-item", { value: "SK" }, "Saskatchewan"),
+          h("sl-menu-item", { value: "AB" }, "Alberta"),
+          h("sl-menu-item", { value: "NL" }, "Newfoundland"),
+          h("sl-menu-item", { value: "NT" }, "Northwest Territories"),
+          h("sl-menu-item", { value: "YT" }, "Yukon"),
+          h("sl-menu-item", { value: "NU" }, "Nunavut")),
+        h("sl-input", Object.assign({ required: true, exportparts: "label: input-label", class: classes.Input, label: text.indirectTaxNumber, disabled: states.loading, value: formState.indirectTaxNumber }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.indirectTaxNumber) && {
+          class: classes.ErrorInput,
+          helpText: text.error.indirectTaxNumber,
+        }), { id: "indirectTaxNumber", name: "/indirectTaxNumber" }))),
+      h("hr", { class: classes.HR }))));
+};
+
+const statusMap = {
+  pending: "warning",
+  upcoming: "success",
+  "next payout": "success",
+};
+const style$2 = {
+  Container: {
+    display: "grid",
+    gridTemplateColumns: "1fr",
+    gridGap: "var(--sl-spacing-large)",
+    background: "var(--sl-color-neutral-0)",
+    boxShadow: "0px 2px 4px rgba(28, 28, 33, 0.12)",
+    borderRadius: "4px",
+    padding: "var(--sl-spacing-large)",
+    minHeight: "150px",
+    border: "1px solid var(--sl-color-gray-200)",
+  },
+  StatusContainer: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  MainCurrencyLabel: {
+    fontWeight: "var(--sl-font-weight-normal)",
+    color: "var(--sl-color-gray-500)",
+  },
+  MainCurrency: {
+    margin: 0,
+    fontSize: "32px",
+    width: "auto",
+  },
+  SubduedRegularText: {
+    fontSize: "var(--sl-font-size-small)",
+    color: "var(--sl-color-gray-500)",
+    margin: 0,
+    width: "auto",
+  },
+  CurrenciesContainer: {
+    display: "grid",
+    width: "auto",
+    gridTemplateColumns: "1fr 1fr 1fr",
+    gap: "var(--sl-spacing-xx-small) var(--sl-spacing-small)",
+    paddingTop: "var(--sq-spacing-xx-small)",
+    "& > :not(:last-child)": {
+      borderRight: "1px solid var(--sl-color-gray-200)",
+    },
+    "& > :nth-child(3)": {
+      border: "none",
+    },
+  },
+  CurrencyContainer: {
+    paddingRight: "var(--sl-spacing-small)",
+    gap: "var(--sl-spacing-small)",
+  },
+  SubCurrencyText: {
+    fontWeight: "var(--sl-font-weight-bold)",
+    fontSize: "var(--sl-font-size-large)",
+    margin: "0",
+  },
+  W9Container: {
+    paddingTop: "var(--sl-spacing-large)",
+    borderTop: "1px solid var(--sl-color-gray-200)",
+  },
+  SkeletonOne: {
+    width: "25%",
+    height: "16px",
+  },
+  SkeletonTwo: {
+    width: "25%",
+    height: "24px",
+  },
+  SkeletonThree: {
+    width: "50%",
+    height: "34px",
+  },
+};
+function PayoutDetailsCardView(props) {
+  var _a;
+  const sheet = createStyleSheet(style$2);
+  const styleString = sheet.toString();
+  const { classes } = sheet;
+  const currencyList = (currencies) => {
+    return (h("div", { class: classes.CurrenciesContainer },
+      " ", currencies === null || currencies === void 0 ? void 0 :
+      currencies.map((currency) => {
+        return (h("div", { class: classes.CurrencyContainer },
+          h("p", { class: classes.SubCurrencyText }, currency === null || currency === void 0 ? void 0 :
+            currency.amountText, currency === null || currency === void 0 ? void 0 :
+            currency.currencyText)));
+      }),
+      " "));
+  };
+  const { loading, mainCurrency, status, otherCurrencies, otherCurrenciesText, pendingStatusBadgeText, upcomingStatusBadgeText, nextPayoutStatusBadgeText, pendingDetailedStatusText, upcomingDetailedStatusText, nextPayoutDetailedStatusText, w9Pending, w9PendingText, empty, hasDatePending, hasW9Pending, } = props;
+  const badgeText = {
+    pending: pendingStatusBadgeText,
+    upcoming: upcomingStatusBadgeText,
+    "next payout": nextPayoutStatusBadgeText,
+  };
+  const statusText = {
+    pending: pendingDetailedStatusText,
+    upcoming: upcomingDetailedStatusText,
+    "next payout": nextPayoutDetailedStatusText,
+  };
+  return (h("div", null,
+    h("style", { type: "text/css" }, styleString),
+    h("div", { class: classes.Container },
+      loading ? (h("div", { class: classes.StatusContainer },
+        h("sl-skeleton", { class: classes.SkeletonOne }),
+        " ",
+        h("sl-skeleton", { class: classes.SkeletonTwo }))) : (h("div", { class: classes.StatusContainer },
+        h("p", { class: classes.SubduedRegularText }, empty && status === "pending"
+          ? ""
+          : status !== "pending"
+            ? statusText[status]
+            : hasDatePending
+              ? statusText["pending"]
+              : w9PendingText),
+        h("sl-badge", { pill: true, type: statusMap[status] }, badgeText[status]))),
+      loading ? (h("sl-skeleton", { class: classes.SkeletonThree })) : empty ? (h("h1", { class: classes.MainCurrency }, "No rewards")) : (h("h1", { class: classes.MainCurrency },
+        hasDatePending || status !== "pending"
+          ? mainCurrency === null || mainCurrency === void 0 ? void 0 : mainCurrency.amountText : (_a = w9Pending === null || w9Pending === void 0 ? void 0 : w9Pending[0]) === null || _a === void 0 ? void 0 : _a.amountText,
+        " ",
+        mainCurrency.currencyText)),
+      otherCurrencies !== undefined &&
+        otherCurrencies !== false &&
+        !loading && (h("div", null,
+        h("p", { class: classes.SubduedRegularText, style: { fontSize: "var(--sl-font-size-x-small)" } },
+          "+ ",
+          otherCurrenciesText),
+        currencyList(otherCurrencies))),
+      hasW9Pending && status === "pending" && hasDatePending && !loading && (h("div", { class: classes.W9Container },
+        h("p", { class: classes.SubduedRegularText }, w9PendingText),
+        currencyList(w9Pending))),
+      loading ? (h("sl-skeleton", { class: classes.SkeletonOne })) : (h("div", { style: { display: "flex", gap: "var(--sl-spacing-small)" } },
+        h("span", null, "Card ***2381"),
+        h("span", null, "Toronto Dominion Bank"))))));
+}
+
+export { IndirectDetailsSlotView as I, OtherRegionSlotView as O, PayoutDetailsCardView as P, UserInfoFormView as U };

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

@@ -22,9 +22,10 @@ import { P as PortalForgotPasswordView } from './sqm-portal-forgot-password-view
 import { P as PortalProfileView } from './sqm-portal-profile-view-93d85870.js';
 import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-0df781f6.js';
 import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-1db4fae6.js';
-import { S as ShareButtonView, L as LeaderboardView, C as CopyTextView, B as BigStatView, P as PortalFrameView, E as EditProfileView, u as useShareLink, a as useShareButton, b as useDemoBigStat, c as StatContainerView, d as PortalChangePasswordView, e as PortalLoginView, f as PortalRegisterView, T as TaskCardView, g as ProgressBarView, h as PoweredByImg$1, i as PortalFooterView, H as HeroView, R as ReferralIframeView, N as NameFieldsView, j as CheckboxFieldView, D as DropdownFieldView, I as InputFieldView, k as RewardExchangeView, r as rewardExchangeCustomErrorMsg, l as rewardExchangeLongText, m as rewardExchangeSelected, n as chooseAmountFixed, o as chooseAmountFixedNoDescription, p as chooseAmountVariable, q as chooseAmountVariableNoDescription, s as chooseAmountVariableDisabled, t as chooseAmountVariableUnavailable, v as confirmFixed, w as confirmVariable, x as redemptionError, y as queryError, z as success, A as successVariable, F as loading, G as empty$1, J as rewardExchange, K as CardFeedView, M as CouponCodeView, U as UserInfoFormView, O as OtherRegionSlotView, Q as IndirectDetailsSlotView, V as ProgressBar$2, W as PayoutDetailsCardView, X as autoColorScaleCss, Y as ShadowViewAddon } from './ShadowViewAddon-3b0296b9.js';
+import { S as ShareButtonView, L as LeaderboardView, C as CopyTextView, B as BigStatView, P as PortalFrameView, E as EditProfileView, u as useShareLink, a as useShareButton, b as useDemoBigStat, c as StatContainerView, d as PortalChangePasswordView, e as PortalLoginView, f as PortalRegisterView, T as TaskCardView, g as ProgressBarView, h as PoweredByImg$1, i as PortalFooterView, H as HeroView, R as ReferralIframeView, N as NameFieldsView, j as CheckboxFieldView, D as DropdownFieldView, I as InputFieldView, k as RewardExchangeView, r as rewardExchangeCustomErrorMsg, l as rewardExchangeLongText, m as rewardExchangeSelected, n as chooseAmountFixed, o as chooseAmountFixedNoDescription, p as chooseAmountVariable, q as chooseAmountVariableNoDescription, s as chooseAmountVariableDisabled, t as chooseAmountVariableUnavailable, v as confirmFixed, w as confirmVariable, x as redemptionError, y as queryError, z as success, A as successVariable, F as loading, G as empty$1, J as rewardExchange, K as CardFeedView, M as CouponCodeView, O as ProgressBar$2, Q as autoColorScaleCss, U as ShadowViewAddon } from './ShadowViewAddon-6b52e587.js';
 import './index-ffa26b43.js';
 import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-ab89c6cc.js';
+import { U as UserInfoFormView, O as OtherRegionSlotView, I as IndirectDetailsSlotView, P as PayoutDetailsCardView } from './sqm-payout-details-card-0b665414.js';
 
 /**
  * lodash (Custom Build) <https://lodash.com/>