@saasquatch/mint-components 1.12.0-2 → 1.12.0-21

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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
-const index_module = require('./index.module-236d0403.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const index_module = require('./index.module-b8d9d0ba.js');
 require('./mixins-fe9d4112.js');
 require('./JSS-8503a151.js');
 const sqmCloseButtonView = require('./sqm-close-button-view-fd6e8f60.js');
@@ -18,7 +18,7 @@ const CloseButton = class {
      * @uiType string
      */
     this.color = "#000000";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {

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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
-const index_module = require('./index.module-236d0403.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const index_module = require('./index.module-b8d9d0ba.js');
 const utils = require('./utils-6847bc06.js');
 const index = require('./index-8c6255f5.js');
 
@@ -90,7 +90,7 @@ const SqmContextRouter = class {
   constructor(hostRef) {
     index$1.registerInstance(this, hostRef);
     this.ignored = true;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {

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

@@ -3,15 +3,137 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
-const index_module = require('./index.module-236d0403.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const global = require('./global-c3637175.js');
+const index_module = require('./index.module-b8d9d0ba.js');
 const cjs = require('./cjs-1066ec21.js');
 const JSS = require('./JSS-8503a151.js');
-require('./index-56d1fa5b.js');
 const utils = require('./utils-6847bc06.js');
 const sqmTextSpanView = require('./sqm-text-span-view-e1cd9bd3.js');
-require('./keys-cff24974.js');
-const useEmailVerification = require('./useEmailVerification-33465f36.js');
+const keys = require('./keys-cff24974.js');
+const useVerificationEmail = require('./useVerificationEmail-2eb28c2a.js');
+
+const UpsertUserEmailMutation = index_module.dist.gql `
+  mutation upsertUser($userInput: UserInput!) {
+    upsertUser(userInput: $userInput) {
+      id
+      accountId
+      email
+    }
+  }
+`;
+const UserLookupQuery = index_module.dist.gql `
+  query user {
+    viewer {
+      ... on User {
+        id
+        accountId
+        email
+        impactConnection {
+          user {
+            id
+            email
+          }
+        }
+      }
+    }
+  }
+`;
+function useUpsertUserEmail() {
+  const user = index_module.K();
+  const [request, { loading: loading, data, errors }] = index_module.xe(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] = index_module.Mn(keys.SHOW_CODE_NAMESPACE);
+  const [email, setEmail] = index_module.Mn(keys.VERIFICATION_EMAIL_NAMESPACE);
+  const [emailExists, setEmailExists] = stencilHooks_module.useState(false);
+  const [error, setError] = stencilHooks_module.useState(false);
+  const [mutationError, setMutationError] = stencilHooks_module.useState(false);
+  const { initialized, send: [sendEmail, { loading: sendLoading, errors }], } = useVerificationEmail.useVerificationEmail();
+  const [upsertUserEmail] = useUpsertUserEmail();
+  const [loading, setLoading] = stencilHooks_module.useState(true);
+  const { data, loading: initialLoading } = index_module.En(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,}))$/;
+  stencilHooks_module.useEffect(() => {
+    if (!(data === null || data === void 0 ? void 0 : data.viewer))
+      return;
+    setEmailExists(!!data.viewer.email);
+  }, [data]);
+  stencilHooks_module.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: {
@@ -32,10 +154,7 @@ const style = {
       backgroundColor: "var(--sl-color-red-100)",
       borderTop: "none",
     },
-    "&::part(message)": {
-      display: "flex",
-      flexDirection: "column",
-    },
+    "&::part(message)": {},
   },
   ContinueButton: {
     width: "100%",
@@ -88,12 +207,18 @@ function WidgetEmailVerificationView(props) {
     states.sendCodeError && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", class: sheet.classes.ErrorAlertContainer, open: true },
       index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
       index.h("b", null, text.sendCodeErrorHeader),
-      text.sendCodeErrorDescription)),
+      index.h("br", null),
+      global.intl.formatMessage({
+        id: "sendCodeErrorDescription",
+        defaultMessage: text.sendCodeErrorDescription,
+      }, {
+        supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+      }))),
     states.initialLoading ? (renderLoadingSkeleton()) : (index.h("div", { class: sheet.classes.Wrapper },
       index.h(sqmTextSpanView.TextSpanView, { type: "p" }, text.verifyEmailHeaderText),
       index.h("sl-form", { "onSl-submit": callbacks.submitEmail },
         index.h("div", { class: sheet.classes.InputsContainer },
-          index.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
+          index.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,
@@ -112,11 +237,15 @@ const WidgetEmailVerification = class {
     /**
      * @uiName Send code to email alert header
      */
-    this.sendCodeErrorHeader = "There was an error sending your code.";
+    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 support team.";
+    this.sendCodeErrorDescription = "Please try again. If this problem continues, contact our program {supportLink}.";
     /**
      * @uiName Email input label
      */
@@ -129,7 +258,7 @@ const WidgetEmailVerification = class {
      * @uiName Send code button text
      */
     this.emailValidationErrorText = "Please enter a valid email";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   getTextProps() {
@@ -138,21 +267,22 @@ const WidgetEmailVerification = class {
   render() {
     const props = index_module.isDemo()
       ? useDemoWidgetEmailVerification(this)
-      : useEmailVerification.useWidgetEmailVerification(this);
+      : useWidgetEmailVerification(this);
     return index.h(WidgetEmailVerificationView, Object.assign({}, props));
   }
 };
 function useDemoWidgetEmailVerification(props) {
+  const setShowCode = index_module.Sn(keys.SHOW_CODE_NAMESPACE);
   return cjs.cjs({
     states: {
-      error: "",
+      error: true,
+      initialLoading: false,
       loading: false,
-      email: "",
-      isEmailPrefilled: false,
-      sendCodeError: false,
+      email: "test@example.com",
+      sendCodeError: true,
     },
     callbacks: {
-      submitEmail: async () => { },
+      submitEmail: async () => setShowCode(true),
     },
     text: props.getTextProps(),
   }, props.demoData || {}, { arrayMerge: (_, a) => a });

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
-const global = require('./global-e4ebdbcc.js');
-require('./index.module-236d0403.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const global = require('./global-c3637175.js');
+require('./index.module-b8d9d0ba.js');
 require('./JSS-8503a151.js');
 const utils = require('./utils-6847bc06.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-990a85a3.js');
@@ -85,7 +85,7 @@ const PortalContainer = class {
      * @uiType string
      */
     this.backgroundColor = "#ffffff00";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -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;
   }
@@ -144,7 +144,7 @@ const Text = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   componentWillLoad() { }
@@ -181,7 +181,7 @@ const TitledSection = class {
      * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
      */
     this.padding = "none";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {

package/dist/cjs/sqm-form-message.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
 
 const sqmFormMessageCss = "sl-alert::part(base){border:1px solid;border-radius:3px;-webkit-box-shadow:0 1px 2px rgba(20, 20, 20, 0.1);box-shadow:0 1px 2px rgba(20, 20, 20, 0.1)}.Error::part(base){background-color:var(--sl-color-danger-100);border-color:var(--sl-color-danger-200)}.Warning::part(base){background-color:var(--sl-color-warning-100);border-color:var(--sl-color-warning-200)}.Success::part(base){background-color:var(--sl-color-success-100);border-color:var(--sl-color-success-200)}.Info::part(base){background-color:var(--sl-color-primary-100);border-color:var(--sl-color-primary-200)}";
 
@@ -11,7 +11,7 @@ const FormMessage = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {

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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
-const index_module = require('./index.module-236d0403.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const index_module = require('./index.module-b8d9d0ba.js');
 
 async function useGraphQLClientProvider({ domain }) {
   const token = index_module.B();
@@ -22,7 +22,7 @@ const GraphQLClientProvider = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {

package/dist/cjs/sqm-header-logo.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
 
 const HeroImage = class {
   constructor(hostRef) {
@@ -19,7 +19,7 @@ const HeroImage = class {
      * @uiName Logo height
      */
     this.height = 60;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {

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

@@ -3,15 +3,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
-const index_module = require('./index.module-236d0403.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const index_module = require('./index.module-b8d9d0ba.js');
+require('./jsonpointer-11327262.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-fe9d4112.js');
 require('./JSS-8503a151.js');
 const emailRegistrationView = require('./email-registration-view-248652bb.js');
-require('./jsonpointer-11327262.js');
-require('./useRegistrationFormState-e7e820d0.js');
-const useInstantAccessRegistration = require('./useInstantAccessRegistration-7c125c00.js');
+require('./useRegistrationFormState-f9ce55be.js');
+const useInstantAccessRegistration = require('./useInstantAccessRegistration-ccf81eae.js');
 
 const InstantAccessRegistration = class {
   constructor(hostRef) {
@@ -108,7 +108,7 @@ const InstantAccessRegistration = class {
      * @uiType boolean
      */
     this.includeCookies = false;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {