@saasquatch/mint-components 1.12.0-8 → 1.12.1-0

package/dist/collection/components/sqm-payout-button-scroll/sqm-payout-button-scroll.js

@@ -1,118 +0,0 @@
-import { Component, h, Prop, State } from "@stencil/core";
-import { withHooks } from "@saasquatch/stencil-hooks";
-import { getProps } from "../../utils/utils";
-import { PayoutButtonScrollView, } from "./sqm-payout-button-scroll-view";
-import deepmerge from "deepmerge";
-/**
- * @uiName Payout Button Scroll
- */
-export class PayoutButtonScroll {
-  constructor() {
-    /**
-     * @uiName Payout button text
-     */
-    this.payoutButtonText = "Payouts & Tax Settings";
-    /**
-     * Description text under payout button
-     * @uiName Payout button description text
-     */
-    this.payoutButtonDescription = "Check your payout settings to see when you’ll get paid out next";
-    this.ignored = true;
-    withHooks(this);
-  }
-  disconnectedCallback() { }
-  getTextProps() {
-    return getProps(this);
-  }
-  render() {
-    const props = useDemoPayoutButtonScroll(this);
-    return h(PayoutButtonScrollView, Object.assign({}, props));
-  }
-  static get is() { return "sqm-payout-button-scroll"; }
-  static get encapsulation() { return "shadow"; }
-  static get properties() { return {
-    "payoutButtonText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Payout button text",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "payout-button-text",
-      "reflect": false,
-      "defaultValue": "\"Payouts & Tax Settings\""
-    },
-    "payoutButtonDescription": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Payout button description text",
-            "name": "uiName"
-          }],
-        "text": "Description text under payout button"
-      },
-      "attribute": "payout-button-description",
-      "reflect": false,
-      "defaultValue": "\"Check your payout settings to see when you\u2019ll get paid out next\""
-    },
-    "demoData": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "DemoData<PayoutButtonScrollViewProps>",
-        "resolved": "{ states?: { payoutSettingsComplete: boolean; }; }",
-        "references": {
-          "DemoData": {
-            "location": "import",
-            "path": "../../global/demo"
-          },
-          "PayoutButtonScrollViewProps": {
-            "location": "import",
-            "path": "./sqm-payout-button-scroll-view"
-          }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": undefined,
-            "name": "undocumented"
-          }, {
-            "text": "object",
-            "name": "uiType"
-          }],
-        "text": ""
-      }
-    }
-  }; }
-  static get states() { return {
-    "ignored": {}
-  }; }
-}
-function useDemoPayoutButtonScroll(props) {
-  return deepmerge({
-    states: {
-      payoutSettingsComplete: false,
-    },
-    text: props.getTextProps(),
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}

package/dist/collection/components/sqm-payout-button-scroll/usePayoutButton.js

@@ -1,44 +0,0 @@
-import { gql } from "graphql-request";
-import { useQuery } from "@saasquatch/component-boilerplate";
-import { useEffect, useState } from "@saasquatch/universal-hooks";
-const GET_PAYOUT_DETAILS = gql `
-  query getPayoutDetails {
-    user: viewer {
-      ... on User {
-        id
-        impactConnection {
-          connected
-          publisher {
-            id
-            payoutsAccount {
-              hold
-              balance
-            }
-          }
-        }
-      }
-    }
-  }
-`;
-export function usePayoutButton(props) {
-  const { data, refetch } = useQuery(GET_PAYOUT_DETAILS, {});
-  const [completed, setCompleted] = useState(false);
-  useEffect(() => {
-    var _a, _b, _c;
-    if (!data)
-      return;
-    const hasCompleted = (_c = (_b = (_a = data.user) === null || _a === void 0 ? void 0 : _a.impactConnection) === null || _b === void 0 ? void 0 : _b.publisher) === null || _c === void 0 ? void 0 : _c.payoutAccount;
-    setCompleted(hasCompleted);
-  }, [data]);
-  useEffect(() => {
-    const cb = () => refetch();
-    window.addEventListener("sqm:tax-form-updated", cb);
-    return () => window.removeEventListener("sqm:tax-form-updated", cb);
-  }, []);
-  return {
-    states: {
-      payoutSettingsComplete: completed,
-    },
-    text: props.getTextProps(),
-  };
-}

package/dist/collection/components/sqm-widget-verification/keys.js

@@ -1,4 +0,0 @@
-export const SHOW_CODE_NAMESPACE = "sq:code-verification";
-export const VERIFICATION_EMAIL_NAMESPACE = "sq:verification-email";
-export const VERIFICATION_PARENT_NAMESPACE = "sq:verification-context";
-export const VERIFICATION_EVENT_KEY = "sq:code-verified";

package/dist/collection/components/sqm-widget-verification/sqm-code-verification/WidgetCodeVerification.stories.js

@@ -1,36 +0,0 @@
-import { h } from "@stencil/core";
-export default {
-  title: "Components/Widget Code Verification",
-};
-const defaultProps = {
-  initialiseLoading: false,
-  email: "testemail@example.com",
-  loading: false,
-  verifyFailed: false,
-  emailResent: false,
-};
-export const Default = () => (h("sqm-code-verification", { demoData: { states: defaultProps } }));
-export const InitialLoading = () => (h("sqm-code-verification", { demoData: {
-    states: {
-      ...defaultProps,
-      initialiseLoading: true,
-    },
-  } }));
-export const Loading = () => (h("sqm-code-verification", { demoData: {
-    states: {
-      ...defaultProps,
-      loading: true,
-    },
-  } }));
-export const CodeResent = () => (h("sqm-code-verification", { demoData: {
-    states: {
-      ...defaultProps,
-      emailResent: true,
-    },
-  } }));
-export const VerificationFailed = () => (h("sqm-code-verification", { demoData: {
-    states: {
-      ...defaultProps,
-      verifyFailed: true,
-    },
-  } }));

package/dist/collection/components/sqm-widget-verification/sqm-code-verification/sqm-code-verification-view.js

@@ -1,128 +0,0 @@
-import { h } from "@stencil/core";
-import { createStyleSheet } from "../../../styling/JSS";
-import { TextSpanView } from "../../sqm-text-span/sqm-text-span-view";
-import { ErrorStyles } from "../../../global/mixins";
-import { intl } from "../../../global/global";
-const style = {
-  Wrapper: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "var(--sl-spacing-medium)",
-    maxWidth: "515px",
-  },
-  HeaderContainer: {
-    display: "flex",
-    flexDirection: "column",
-  },
-  InputsContainer: {
-    display: "flex",
-    gap: "var(--sl-spacing-medium)",
-    position: "relative",
-    flexDirection: "column",
-  },
-  CodeInputContainer: {
-    display: "flex",
-    gap: "var(--sl-spacing-medium)",
-  },
-  CodeInput: {
-    maxWidth: "40px",
-    "&::part(input)": {
-      margin: "0",
-      padding: "0 var(--sl-input-spacing-small)",
-      fontSize: "var(--sl-font-size-large)",
-    },
-  },
-  CodeInputError: {
-    ...ErrorStyles,
-    maxWidth: "40px",
-    "&::part(input)": {
-      margin: "0",
-      padding: "0 var(--sl-input-spacing-small)",
-      fontSize: "var(--sl-font-size-large)",
-    },
-  },
-  ErrorText: {
-    color: "var(--sl-color-danger-500)",
-    fontSize: "var(--sl-font-size-small)",
-    margin: "0",
-  },
-  ContinueButton: {
-    width: "100%",
-    maxWidth: "100px",
-  },
-  FooterContainer: {
-    display: "flex",
-    flexDirection: "column",
-  },
-  SkeletonOne: {
-    width: "50%",
-    height: "16px",
-  },
-  SkeletonTwo: {
-    width: "30%",
-    height: "34px",
-  },
-  SkeletonThree: {
-    width: "15%",
-    height: "24px",
-  },
-};
-const vanillaStyle = `
-:host {
-  display: block;
-}
-:host([hidden]): {
-  display: none;
-}
-
-
-`;
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
-export function WidgetCodeVerificationView(props) {
-  const { states, refs, callbacks, text } = props;
-  const resendCodeText = intl.formatMessage({
-    id: "resendCodeText",
-    defaultMessage: text.resendCodeText,
-  }, {
-    resendCodeLink: (h("a", { href: "", style: { textDecoration: "none" }, onClick: (e) => {
-        e.preventDefault();
-        callbacks.resendEmail();
-      } }, text.resendCodeLabel)),
-  });
-  const codeResentSuccessfully = intl.formatMessage({
-    id: "codeResentSuccessfully",
-    defaultMessage: text.codeResentSuccessfullyText,
-  }, {
-    email: states.email,
-  });
-  const inputClass = states.verifyFailed
-    ? sheet.classes.CodeInputError
-    : sheet.classes.CodeInput;
-  return (h("div", { part: "sqm-base" },
-    h("style", { type: "text/css" },
-      vanillaStyle,
-      styleString),
-    h("div", { class: sheet.classes.Wrapper },
-      h("div", { class: sheet.classes.HeaderContainer },
-        h(TextSpanView, { type: "p" }, intl.formatMessage({
-          id: `emailHeaderText`,
-          defaultMessage: states.verifyFailed
-            ? text.reverifyCodeHeaderText
-            : text.verifyCodeHeaderText,
-        }, { email: states.email }))),
-      states.emailResent && (h("sqm-form-message", { type: "success", exportparts: "successalert-icon" },
-        h("b", null, codeResentSuccessfully))),
-      h("div", { class: sheet.classes.InputsContainer },
-        h("div", { ref: refs.codeWrapperRef, class: sheet.classes.CodeInputContainer },
-          h("sl-input", { class: inputClass, name: "code" }),
-          h("sl-input", { class: inputClass, name: "code" }),
-          h("sl-input", { class: inputClass, name: "code" }),
-          h("sl-input", { class: inputClass, name: "code" }),
-          h("sl-input", { class: inputClass, name: "code" }),
-          h("sl-input", { class: inputClass, name: "code" })),
-        states.verifyFailed && (h("p", { class: sheet.classes.ErrorText }, text.invalidCodeText)),
-        h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.submitCode, disabled: states.loading || states.initialiseLoading, loading: states.loading || states.initialiseLoading, exportparts: "base: primarybutton-base", type: "primary" }, text.verifyText)),
-      h("div", { class: sheet.classes.FooterContainer },
-        h(TextSpanView, { type: "p" }, resendCodeText)))));
-}

package/dist/collection/components/sqm-widget-verification/sqm-code-verification/sqm-code-verification.js

@@ -1,301 +0,0 @@
-import { isDemo, useSetParent } from "@saasquatch/component-boilerplate";
-import { useState, withHooks } from "@saasquatch/stencil-hooks";
-import { Component, h, Prop } from "@stencil/core";
-import deepmerge from "deepmerge";
-import { getProps } from "../../../utils/utils";
-import { WidgetCodeVerificationView, } from "./sqm-code-verification-view";
-import { useWidgetCodeVerification } from "./useCodeVerification";
-import { VERIFICATION_PARENT_NAMESPACE } from "../keys";
-export class WidgetCodeVerification {
-  constructor() {
-    /**
-     * @uiName Verify code widget header text
-     */
-    this.verifyCodeHeaderText = "Enter the code sent to {email} from our referral provider, impact.com.";
-    /**
-     * @uiName Reverify code widget header text
-     */
-    this.reverifyCodeHeaderText = "Enter the code sent to {email} from our referral provider, impact.com.";
-    /**
-     * Text displayed under verify button
-     * @uiName Resend code text
-     */
-    this.resendCodeText = "Didn't receive your code? {resendCodeLink}";
-    /**
-     * The link that appears in the resend code link
-     * @uiName Resend code label
-     */
-    this.resendCodeLabel = "Resend code";
-    /**
-     * Link text displayed under verify button
-     * @uiName Resend code text
-     */
-    this.codeResentSuccessfullyText = "Another code has been sent to {email}";
-    /**
-     * Error text displayed under verification input
-     * @uiName Invalid code text
-     */
-    this.invalidCodeText = "Please check your code and try again. If you’re still having trouble, try resending your code.";
-    /**
-     * @uiName Verify code button text
-     */
-    this.verifyText = "Verify";
-    /**
-     * Displayed when the email verification fails due to a network error. The participant can try refreshing the page.
-     * @uiName Network error message
-     */
-    this.networkErrorMessage = "An error occurred while verifying your email. Please refresh the page and try again.";
-    withHooks(this);
-  }
-  disconnectedCallback() { }
-  getTextProps() {
-    return getProps(this);
-  }
-  render() {
-    const props = isDemo()
-      ? useDemoWidgetCodeVerification(this)
-      : useWidgetCodeVerification(this);
-    return h(WidgetCodeVerificationView, Object.assign({}, props));
-  }
-  static get is() { return "sqm-code-verification"; }
-  static get encapsulation() { return "shadow"; }
-  static get properties() { return {
-    "verifyCodeHeaderText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Verify code widget header text",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "verify-code-header-text",
-      "reflect": false,
-      "defaultValue": "\"Enter the code sent to {email} from our referral provider, impact.com.\""
-    },
-    "reverifyCodeHeaderText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Reverify code widget header text",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "reverify-code-header-text",
-      "reflect": false,
-      "defaultValue": "\"Enter the code sent to {email} from our referral provider, impact.com.\""
-    },
-    "resendCodeText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Resend code text",
-            "name": "uiName"
-          }],
-        "text": "Text displayed under verify button"
-      },
-      "attribute": "resend-code-text",
-      "reflect": false,
-      "defaultValue": "\"Didn't receive your code? {resendCodeLink}\""
-    },
-    "resendCodeLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Resend code label",
-            "name": "uiName"
-          }],
-        "text": "The link that appears in the resend code link"
-      },
-      "attribute": "resend-code-label",
-      "reflect": false,
-      "defaultValue": "\"Resend code\""
-    },
-    "codeResentSuccessfullyText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Resend code text",
-            "name": "uiName"
-          }],
-        "text": "Link text displayed under verify button"
-      },
-      "attribute": "code-resent-successfully-text",
-      "reflect": false,
-      "defaultValue": "\"Another code has been sent to {email}\""
-    },
-    "invalidCodeText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Invalid code text",
-            "name": "uiName"
-          }],
-        "text": "Error text displayed under verification input"
-      },
-      "attribute": "invalid-code-text",
-      "reflect": false,
-      "defaultValue": "\"Please check your code and try again. If you\u2019re still having trouble, try resending your code.\""
-    },
-    "verifyText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Verify code button text",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "verify-text",
-      "reflect": false,
-      "defaultValue": "\"Verify\""
-    },
-    "networkErrorMessage": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Network error message",
-            "name": "uiName"
-          }],
-        "text": "Displayed when the email verification fails due to a network error. The participant can try refreshing the page."
-      },
-      "attribute": "network-error-message",
-      "reflect": false,
-      "defaultValue": "\"An error occurred while verifying your email. Please refresh the page and try again.\""
-    },
-    "demoData": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "DemoData<WidgetCodeVerificationViewProps>",
-        "resolved": "{ states?: { initialiseLoading: boolean; loading: boolean; email: string; verifyFailed?: boolean; emailResent: boolean; }; refs?: { codeWrapperRef: any; }; }",
-        "references": {
-          "DemoData": {
-            "location": "import",
-            "path": "../../../global/demo"
-          },
-          "WidgetCodeVerificationViewProps": {
-            "location": "import",
-            "path": "./sqm-code-verification-view"
-          }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": undefined,
-            "name": "undocumented"
-          }, {
-            "text": "object",
-            "name": "uiType"
-          }],
-        "text": ""
-      }
-    },
-    "onVerification": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "(token: string) => any",
-        "resolved": "(token: string) => any",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": undefined,
-            "name": "undocumented"
-          }],
-        "text": ""
-      }
-    }
-  }; }
-}
-function useDemoWidgetCodeVerification(props) {
-  const [emailResent, setEmailResent] = useState(false);
-  const setVerifiedContext = useSetParent(VERIFICATION_PARENT_NAMESPACE);
-  return deepmerge({
-    states: {
-      loading: false,
-      email: "test@example.com",
-      emailResent,
-      resendError: true,
-      verifyFailed: true,
-    },
-    refs: {
-      codeWrapperRef: () => { },
-    },
-    callbacks: {
-      resendEmail: async () => setEmailResent(true),
-      submitCode: async () => setVerifiedContext(true),
-    },
-    text: props.getTextProps(),
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}