@saasquatch/mint-components 1.13.0-9 → 1.13.0

package/dist/esm/sqm-close-button.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h as h$1 } from './index-91e7729f.js';
 import { n as h } from './stencil-hooks.module-4bc38af4.js';
-import { g as getEnvironmentSDK } from './index.module-a2989d3c.js';
+import { g as getEnvironmentSDK } from './index.module-89a79f66.js';
 import './JSS-67b5cff8.js';
 import './mixins-83f90fa1.js';
 import { C as CloseButtonView } from './sqm-close-button-view-f9819751.js';

package/dist/esm/sqm-context-router.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h as h$1, c as Host } from './index-91e7729f.js';
 import { b as browser, k as useState, i as d, f as useEffect, n as h } from './stencil-hooks.module-4bc38af4.js';
-import { _ } from './index.module-a2989d3c.js';
+import { _ } from './index.module-89a79f66.js';
 import { g as getProps } from './utils-334c1e34.js';
 import { p as pathToRegexp } from './index-ffa26b43.js';
 

package/dist/esm/sqm-email-verification.entry.js

@@ -0,0 +1,287 @@
+import { h, r as registerInstance } from './index-91e7729f.js';
+import { k as useState, f as useEffect, n as h$1 } from './stencil-hooks.module-4bc38af4.js';
+import { i as intl } from './global-be1f9992.js';
+import { d as dist, t as Pn, w as wn, J, $ as $e, i as isDemo, q as En } from './index.module-89a79f66.js';
+import { c as cjs } from './cjs-bdfb4486.js';
+import { g as getProps } from './utils-334c1e34.js';
+import { c as createStyleSheet } from './JSS-67b5cff8.js';
+import { T as TextSpanView } from './sqm-text-span-view-ca32495e.js';
+import { S as SHOW_CODE_NAMESPACE, V as VERIFICATION_EMAIL_NAMESPACE } from './keys-406491dc.js';
+import { u as useVerificationEmail } from './useVerificationEmail-edc318cb.js';
+
+const UpsertUserEmailMutation = dist.gql `
+  mutation upsertUser($userInput: UserInput!) {
+    upsertUser(userInput: $userInput) {
+      id
+      accountId
+      email
+    }
+  }
+`;
+const UserLookupQuery = dist.gql `
+  query user {
+    viewer {
+      ... on User {
+        id
+        accountId
+        email
+        impactConnection {
+          user {
+            id
+            email
+          }
+        }
+      }
+    }
+  }
+`;
+function useUpsertUserEmail() {
+  const user = J();
+  const [request, { loading: loading, data, errors }] = $e(UpsertUserEmailMutation);
+  const upsertUserEmail = async (email) => {
+    try {
+      const result = await request({
+        userInput: {
+          id: user.id,
+          accountId: user.accountId,
+          email,
+        },
+      });
+      if (result instanceof Error || !result)
+        throw new Error();
+      return result;
+    }
+    catch (e) {
+      console.error("Could not set email on user", e);
+      return undefined;
+    }
+  };
+  return [
+    upsertUserEmail,
+    {
+      loading,
+      data,
+      errors,
+    },
+  ];
+}
+function useWidgetEmailVerification(props) {
+  const [_, setShowCode] = Pn(SHOW_CODE_NAMESPACE);
+  const [email, setEmail] = Pn(VERIFICATION_EMAIL_NAMESPACE);
+  const [emailExists, setEmailExists] = useState(false);
+  const [error, setError] = useState(false);
+  const [mutationError, setMutationError] = useState(false);
+  const { initialized, send: [sendEmail, { loading: sendLoading, errors }], } = useVerificationEmail();
+  const [upsertUserEmail] = useUpsertUserEmail();
+  const [loading, setLoading] = useState(true);
+  const { data, loading: initialLoading } = wn(UserLookupQuery, {});
+  const emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  useEffect(() => {
+    if (!(data === null || data === void 0 ? void 0 : data.viewer))
+      return;
+    setEmailExists(!!data.viewer.email);
+  }, [data]);
+  useEffect(() => {
+    if (initialized)
+      setLoading(false);
+  }, [initialized]);
+  const submitEmail = async (e) => {
+    e.preventDefault();
+    if (!(data === null || data === void 0 ? void 0 : data.viewer))
+      return;
+    setLoading(true);
+    const toAddress = data.viewer.email;
+    if (!toAddress) {
+      // If no email on the user, set one
+      const formData = e.detail.formData;
+      const newEmail = formData.get("email").toString();
+      if (!emailRegex.test(newEmail)) {
+        setError(true);
+        return;
+      }
+      const result = await upsertUserEmail(newEmail);
+      if (!result || !result.user.email)
+        setError(true);
+    }
+    // UI should not allow this call til initialisation is done
+    if (!initialized)
+      return;
+    const result = await sendEmail();
+    if (!result || !result.success)
+      setMutationError(true);
+    else {
+      // This is used to let the code verification widget know an email was already sent
+      setEmail(toAddress);
+      setShowCode(true);
+    }
+    setLoading(false);
+  };
+  return {
+    callbacks: {
+      submitEmail,
+    },
+    states: {
+      loading,
+      initialLoading: initialLoading && !initialized,
+      error,
+      email: data === null || data === void 0 ? void 0 : data.viewer.email,
+      sendCodeError: mutationError,
+    },
+    text: props.getTextProps(),
+  };
+}
+
+const style = {
+  Wrapper: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "var(--sl-spacing-medium)",
+    marginTop: "var(--sl-spacing-medium)",
+  },
+  InputsContainer: {
+    display: "flex",
+    gap: "var(--sl-spacing-medium)",
+    position: "relative",
+    flexDirection: "column",
+    maxWidth: "320px",
+  },
+  ErrorAlertContainer: {
+    "&::part(base)": {
+      backgroundColor: "var(--sl-color-red-100)",
+      borderTop: "none",
+    },
+    "&::part(message)": {},
+  },
+  ContinueButton: {
+    width: "100%",
+    maxWidth: "100px",
+  },
+  SkeletonOne: {
+    width: "50%",
+    height: "16px",
+  },
+  SkeletonTwo: {
+    width: "30%",
+    height: "34px",
+  },
+  SkeletonThree: {
+    width: "15%",
+    height: "24px",
+  },
+  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 vanillaStyle = `
+:host {
+  display: block;
+}
+:host([hidden]): {
+  display: none;
+}
+`;
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+function WidgetEmailVerificationView(props) {
+  const { states, callbacks, text } = props;
+  const renderLoadingSkeleton = () => {
+    return (h("div", { class: sheet.classes.Wrapper },
+      h("sl-skeleton", { class: sheet.classes.SkeletonOne }),
+      h("sl-skeleton", { class: sheet.classes.SkeletonTwo }),
+      h("sl-skeleton", { class: sheet.classes.SkeletonThree })));
+  };
+  return (h("div", { part: "sqm-base" },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    states.sendCodeError && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", class: sheet.classes.ErrorAlertContainer, open: true },
+      h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+      h("b", null, text.sendCodeErrorHeader),
+      h("br", null),
+      intl.formatMessage({
+        id: "sendCodeErrorDescription",
+        defaultMessage: text.sendCodeErrorDescription,
+      }, {
+        supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+      }))),
+    states.initialLoading ? (renderLoadingSkeleton()) : (h("div", { class: sheet.classes.Wrapper },
+      h(TextSpanView, { type: "p" }, text.verifyEmailHeaderText),
+      h("sl-form", { "onSl-submit": callbacks.submitEmail },
+        h("div", { class: sheet.classes.InputsContainer },
+          h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", label: text.emailLabel, value: states.email || "", type: "email", id: "email", name: "email", disabled: !!states.email || states.loading }, (states.error
+            ? {
+              class: sheet.classes.ErrorInput,
+              helpText: text.emailValidationErrorText,
+            }
+            : {}))),
+          h("sl-button", { submit: true, class: sheet.classes.ContinueButton, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, text.sendCodeText)))))));
+}
+
+const WidgetEmailVerification = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * @uiName Verify email widget header text
+     */
+    this.verifyEmailHeaderText = "Start by verifying your email. We’ll send you a code through our referral provider, impact.com.";
+    /**
+     * @uiName Send code to email alert header
+     */
+    this.sendCodeErrorHeader = "There was an error sending your code";
+    /**
+     * @uiName Support link text
+     */
+    this.supportLink = "support team";
+    /**
+     * @uiName Send code to email alert description
+     */
+    this.sendCodeErrorDescription = "Please try again. If this problem continues, contact our program {supportLink}.";
+    /**
+     * @uiName Email input label
+     */
+    this.emailLabel = "Email";
+    /**
+     * @uiName Send code button text
+     */
+    this.sendCodeText = "Send code";
+    /**
+     * @uiName Send code button text
+     */
+    this.emailValidationErrorText = "Please enter a valid email";
+    h$1(this);
+  }
+  disconnectedCallback() { }
+  getTextProps() {
+    return getProps(this);
+  }
+  render() {
+    const props = isDemo()
+      ? useDemoWidgetEmailVerification(this)
+      : useWidgetEmailVerification(this);
+    return h(WidgetEmailVerificationView, Object.assign({}, props));
+  }
+};
+function useDemoWidgetEmailVerification(props) {
+  const setShowCode = En(SHOW_CODE_NAMESPACE);
+  return cjs({
+    states: {
+      error: true,
+      initialLoading: false,
+      loading: false,
+      email: "test@example.com",
+      sendCodeError: true,
+    },
+    callbacks: {
+      submitEmail: async () => setShowCode(true),
+    },
+    text: props.getTextProps(),
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
+export { WidgetEmailVerification as sqm_email_verification };

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

@@ -1,7 +1,7 @@
 import { h, r as registerInstance, c as Host } from './index-91e7729f.js';
 import { n as h$1 } from './stencil-hooks.module-4bc38af4.js';
-import { i as intl } from './global-bedc4329.js';
-import './index.module-a2989d3c.js';
+import { i as intl } from './global-be1f9992.js';
+import './index.module-89a79f66.js';
 import { g as getProps } from './utils-334c1e34.js';
 import './JSS-67b5cff8.js';
 import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-1683ae32.js';
@@ -121,7 +121,7 @@ const vanillaStyle = `
 
   sqm-text h4 {
     font-size: var(--sl-font-size-large);
-    font-weight: var(--sl-font-weight-semibold);
+    font-weight: var(--sl-font-weight-bold);
     color: var(--sl-color-neutral-800);
     margin: 0;
   }

package/dist/esm/sqm-google-sign-in.entry.js

@@ -1,10 +1,35 @@
-import { r as registerInstance, e as createEvent, h as h$1 } from './index-91e7729f.js';
+import { r as registerInstance, e as createEvent, h as h$1, g as getElement } from './index-91e7729f.js';
 import { k as useState, f as useEffect, n as h } from './stencil-hooks.module-4bc38af4.js';
-import { g as getEnvironmentSDK, i as isDemo } from './index.module-a2989d3c.js';
+import { g as getEnvironmentSDK, i as isDemo } from './index.module-89a79f66.js';
 
 function useGoogleSignIn(props) {
   const [loaded, setLoaded] = useState(false);
   const [googleButtonDiv, setGoogleButtonDiv] = useState(null);
+  const [buttonWidth, setButtonWidth] = useState(400);
+  let timeoutId = null;
+  // Update the width based on the container's size
+  const updateWidth = () => {
+    if (googleButtonDiv) {
+      setButtonWidth(googleButtonDiv.clientWidth);
+    }
+  };
+  useEffect(() => {
+    if (!googleButtonDiv)
+      return;
+    // Create a ResizeObserver to track width changes
+    const resizeObserver = new ResizeObserver(() => {
+      // Mimic debounce for efficiency
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+      timeoutId = setTimeout(() => {
+        updateWidth();
+      }, 50);
+    });
+    resizeObserver.observe(googleButtonDiv);
+    updateWidth();
+    return () => resizeObserver.disconnect();
+  }, [googleButtonDiv]);
   useEffect(() => {
     const cb = () => {
       // @ts-expect-error
@@ -32,33 +57,15 @@ function useGoogleSignIn(props) {
   useEffect(() => {
     if (!googleButtonDiv || !loaded)
       return;
-    let googleSignInContainer = document.getElementById("googleSignIn");
-    let renderGoogleTimeout;
-    const renderGoogleButton = () => {
-      if (googleSignInContainer) {
-        googleSignInContainer.innerHTML = ""; // clear contents of Google button container
-        let w = googleSignInContainer.offsetWidth; // get current container's width
-        //@ts-expect-error
-        google.accounts.id.renderButton(googleButtonDiv, {
-          theme: "outline",
-          size: "large",
-          width: w,
-          text: props.text,
-        });
-      }
-    };
-    renderGoogleButton();
-    const handleResize = () => {
-      clearTimeout(renderGoogleTimeout);
-      renderGoogleTimeout = setTimeout(renderGoogleButton, 100);
-    };
-    window.addEventListener("resize", handleResize);
-    // Cleanup function to remove the event listener and clear the timeout
-    return () => {
-      window.removeEventListener("resize", handleResize);
-      clearTimeout(renderGoogleTimeout);
-    };
-  }, [googleButtonDiv, loaded]);
+    //@ts-expect-error
+    google.accounts.id.renderButton(googleButtonDiv, {
+      theme: "outline",
+      size: "large",
+      text: props.text,
+      height: 40,
+      width: buttonWidth,
+    });
+  }, [googleButtonDiv, loaded, buttonWidth]);
   return {
     setGoogleButtonDiv,
   };
@@ -68,6 +75,7 @@ const GoogleSignIn = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.initComplete = createEvent(this, "initComplete", 7);
+    this.googleButtonDiv = null;
     h(this);
   }
   disconnectedCallback() { }
@@ -84,13 +92,9 @@ const GoogleSignIn = class {
     const { setGoogleButtonDiv } = isDemo()
       ? useDemoGoogleSignIn(this)
       : useGoogleSignIn(this);
-    console.log(setGoogleButtonDiv);
-    return (h$1("div", null, h$1("style", null, `
-          #googleSignIn {
-            max-width: 402px;
-            width: 100%
-          }`), h$1("div", { id: "googleSignIn", ref: setGoogleButtonDiv })));
+    return (h$1("div", { ref: setGoogleButtonDiv, style: { width: "100%" } }));
   }
+  get el() { return getElement(this); }
 };
 function useDemoGoogleSignIn(props) {
   const [loaded, setLoaded] = useState(false);
@@ -122,7 +126,6 @@ function useDemoGoogleSignIn(props) {
     google.accounts.id.renderButton(googleButtonDiv, {
       theme: "outline",
       size: "large",
-      width: 400,
       text: props.text,
       click_listener: cb,
     });

package/dist/esm/sqm-graphql-client-provider.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h as h$1, c as Host } from './index-91e7729f.js';
 import { o as m, f as useEffect, n as h } from './stencil-hooks.module-4bc38af4.js';
-import { G, E as Ee, a as Q, P as Pe } from './index.module-a2989d3c.js';
+import { G, E as Ee, a as Q, P as Pe } from './index.module-89a79f66.js';
 
 async function useGraphQLClientProvider({ domain }) {
   const token = G();

package/dist/esm/sqm-instant-access-registration.entry.js

@@ -1,13 +1,13 @@
 import { r as registerInstance, h as h$1 } from './index-91e7729f.js';
 import { n as h } from './stencil-hooks.module-4bc38af4.js';
-import { i as isDemo, b as setUserIdentity } from './index.module-a2989d3c.js';
+import { i as isDemo, b as setUserIdentity } from './index.module-89a79f66.js';
 import './jsonpointer-388a7082.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './JSS-67b5cff8.js';
 import './mixins-83f90fa1.js';
 import { E as EmailRegistrationView } from './email-registration-view-a7818cf2.js';
-import './useRegistrationFormState-01cdd8c7.js';
-import { u as useInstantAccessRegistration } from './useInstantAccessRegistration-7255b0ca.js';
+import './useRegistrationFormState-d6f33135.js';
+import { u as useInstantAccessRegistration } from './useInstantAccessRegistration-cd0172c8.js';
 
 const InstantAccessRegistration = class {
   constructor(hostRef) {