@saasquatch/mint-components 1.6.7 → 1.6.8-1

package/dist/collection/components/sqm-passwordless-registration/sqm-passwordless-registration.js

@@ -0,0 +1,267 @@
+import { isDemo } from "@saasquatch/component-boilerplate";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop, State } from "@stencil/core";
+import deepmerge from "deepmerge";
+import { PasswordlessRegistrationView, } from "./sqm-passwordless-registration-view";
+import { usePasswordlessRegistration } from "./usePasswordlessRegistration";
+/**
+ * @uiName Microsite Registration
+ * @slots [{"name":"top-slot","title":"Widget Content"},{"name":"bottom-slot","title":"Widget Content"}]
+ */
+export class PasswordlessRegistration {
+  constructor() {
+    this.ignored = true;
+    /**
+     * Redirect participants to this page after they successfully register.
+     *
+     * @uiName Registration Redirect
+     * @uiWidget pageSelect
+     */
+    this.nextPage = "/";
+    /**
+     * @uiName Email Field Label
+     */
+    this.emailLabel = "Email";
+    /**
+     * @uiName First Name Field Label
+     */
+    this.firstNameLabel = "First Name";
+    /**
+     * @uiName Last Name Field Label
+     */
+    this.lastNameLabel = "Last Name";
+    /**
+     * @uiName Register Button Text
+     */
+    this.registerLabel = "Start Referring";
+    /**
+     * @uiName Include name fields
+     */
+    this.includeName = false;
+    /**
+     * @uiName Include name fields
+     */
+    this.hidePoweredBy = false;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { states, callbacks } = isDemo()
+      ? useRegistrationDemo(this)
+      : usePasswordlessRegistration();
+    const content = {
+      emailLabel: this.emailLabel,
+      registerLabel: this.registerLabel,
+      firstNameLabel: this.firstNameLabel,
+      lastNameLabel: this.lastNameLabel,
+      includeName: this.includeName,
+      hidePoweredBy: this.hidePoweredBy,
+      // slots
+      topSlot: h("slot", { name: "top-slot" }),
+      bottomSlot: h("slot", { name: "bottom-slot" }),
+    };
+    return (h(PasswordlessRegistrationView, { states: states, callbacks: callbacks, content: content }));
+  }
+  static get is() { return "sqm-passwordless-registration"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "nextPage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Registration Redirect",
+            "name": "uiName"
+          }, {
+            "text": "pageSelect",
+            "name": "uiWidget"
+          }],
+        "text": "Redirect participants to this page after they successfully register."
+      },
+      "attribute": "next-page",
+      "reflect": false,
+      "defaultValue": "\"/\""
+    },
+    "emailLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Email Field Label",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "email-label",
+      "reflect": false,
+      "defaultValue": "\"Email\""
+    },
+    "firstNameLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "First Name Field Label",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "first-name-label",
+      "reflect": false,
+      "defaultValue": "\"First Name\""
+    },
+    "lastNameLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Last Name Field Label",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "last-name-label",
+      "reflect": false,
+      "defaultValue": "\"Last Name\""
+    },
+    "registerLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Register Button Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "register-label",
+      "reflect": false,
+      "defaultValue": "\"Start Referring\""
+    },
+    "includeName": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Include name fields",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "include-name",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "hidePoweredBy": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Include name fields",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "hide-powered-by",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<PasswordlessRegistrationViewProps>",
+        "resolved": "{ states?: { error: string; loading: boolean; }; content?: { emailLabel?: string; firstNameLabel?: string; lastNameLabel?: string; registerLabel?: string; includeName?: boolean; hidePoweredBy?: boolean; topSlot?: VNode; bottomSlot?: VNode; }; }",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../global/demo"
+          },
+          "PasswordlessRegistrationViewProps": {
+            "location": "import",
+            "path": "./sqm-passwordless-registration-view"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}
+function useRegistrationDemo(props) {
+  return deepmerge({
+    states: {
+      error: "",
+      loading: false,
+      forgotPasswordPath: "/forgotPassword",
+      registerPath: "/register",
+    },
+    callbacks: {
+      submit: async (_event) => {
+        console.log("submit");
+      },
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}

package/dist/collection/components/sqm-passwordless-registration/usePasswordlessRegistration.js

@@ -0,0 +1,42 @@
+import { useUpsertPasswordlessUserMutation } from "@saasquatch/component-boilerplate";
+import { useState } from "@saasquatch/universal-hooks";
+import jsonpointer from "jsonpointer";
+export function usePasswordlessRegistration() {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const cookie = new URLSearchParams(window.location.search);
+  const cookies = cookie === null || cookie === void 0 ? void 0 : cookie.get("_saasquatch");
+  console.log({ cookie });
+  const [request, { loading, errors, data }] = useUpsertPasswordlessUserMutation();
+  const [error, setError] = useState("");
+  const submit = async (event) => {
+    var _a;
+    setError("");
+    let formData = event.detail.formData;
+    formData === null || formData === void 0 ? void 0 : formData.forEach((value, key) => {
+      jsonpointer.set(formData, key, value);
+    });
+    const variables = {
+      firstName: formData.firstName,
+      lastName: formData.lastName,
+      email: formData.email,
+      ...(cookies ? { cookies } : {}),
+    };
+    const result = await request(variables);
+    if (result instanceof Error) {
+      if ((result === null || result === void 0 ? void 0 : result.message) || ((_a = result === null || result === void 0 ? void 0 : result["response"]) === null || _a === void 0 ? void 0 : _a["error"]))
+        setError("Network request failed.");
+      return;
+    }
+  };
+  const errorMessage = ((_d = (_c = (_b = (_a = errors === null || errors === void 0 ? void 0 : errors.response) === null || _a === void 0 ? void 0 : _a.errors) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.extensions) === null || _d === void 0 ? void 0 : _d.message) || ((_g = (_f = (_e = errors === null || errors === void 0 ? void 0 : errors.response) === null || _e === void 0 ? void 0 : _e.errors) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.message) ||
+    error;
+  return {
+    states: {
+      loading,
+      error: errorMessage,
+    },
+    callbacks: {
+      submit,
+    },
+  };
+}

package/dist/collection/components/sqm-portal-container/sqm-portal-container-view.js

@@ -16,14 +16,14 @@ export function PortalContainerView(props, children) {
       justifyContent: props.justifyContent,
     },
   };
-  const vanillaStyle = `
-  :host{
-    width: 100%;
-    display: block;
+  const vanillaStyle = `
+  :host{
+    width: 100%;
+    display: block;
   }`;
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  return (h("div", { class: sheet.classes.Container },
+  return (h("div", { class: sheet.classes.Container, part: 'sqm-base' },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),

package/dist/collection/components/sqm-portal-container/sqm-portal-container.js

@@ -200,7 +200,7 @@ export class PortalContainer {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "| \"start\"\n    | \"center\"\n    | \"end\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\"",
+        "original": "| \"start\"\r\n    | \"center\"\r\n    | \"end\"\r\n    | \"space-between\"\r\n    | \"space-around\"\r\n    | \"space-evenly\"",
         "resolved": "\"center\" | \"end\" | \"space-around\" | \"space-between\" | \"space-evenly\" | \"start\"",
         "references": {}
       },

package/dist/collection/components/sqm-portal-email-verification/sqm-portal-email-verification-view.js

@@ -26,13 +26,13 @@ const style = {
     },
   },
 };
-const vanillaStyle = `
-:host {
-  display: block;
-}
-:host([hidden]): {
-  display: none;
-}
+const vanillaStyle = `
+:host {
+  display: block;
+}
+:host([hidden]): {
+  display: none;
+}
 `;
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();

package/dist/collection/components/sqm-portal-footer/sqm-portal-footer-view.js

@@ -2,16 +2,16 @@ import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 import { intl } from "../../global/global";
 import { PoweredByImg } from "./PoweredByImg";
-const vanillaStyle = `
-  :host{
-    margin: 0 auto;
-    width: 100%;
-  }
-  a{
-    cursor:pointer;
-    color: inherit;
-    text-decoration: none;
-  }
+const vanillaStyle = `
+  :host{
+    margin: 0 auto;
+    width: 100%;
+  }
+  a{
+    cursor:pointer;
+    color: inherit;
+    text-decoration: none;
+  }
 `;
 export function PortalFooterView(props) {
   const style = {

package/dist/collection/components/sqm-portal-forgot-password/sqm-portal-forgot-password-view.js

@@ -11,13 +11,13 @@ const style = {
     width: "25%",
   },
 };
-const vanillaStyle = `
-:host {
-  display: block;
-}
-:host([hidden]): {
-  display: none;
-}
+const vanillaStyle = `
+:host {
+  display: block;
+}
+:host([hidden]): {
+  display: none;
+}
 `;
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();

package/dist/collection/components/sqm-portal-login/sqm-portal-login-view.js

@@ -15,13 +15,13 @@ const style = {
   },
   ButtonsContainer: AuthButtonsContainer,
 };
-const vanillaStyle = `
-:host {
-  display: block;
-}
-:host([hidden]): {
-  display: none;
-}
+const vanillaStyle = `
+:host {
+  display: block;
+}
+:host([hidden]): {
+  display: none;
+}
 `;
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();

package/dist/collection/components/sqm-portal-profile/usePortalProfile.js

@@ -1,39 +1,39 @@
 import { useQuery, useMutation, useUserIdentity, } from "@saasquatch/component-boilerplate";
 import { gql } from "graphql-request";
 import { useEffect, useState } from "@saasquatch/universal-hooks";
-const GET_USER = gql `
-  query {
-    viewer {
-      ... on User {
-        id
-        accountId
-        firstName
-        lastName
-        email
-        countryCode
-      }
-    }
-  }
+const GET_USER = gql `
+  query {
+    viewer {
+      ... on User {
+        id
+        accountId
+        firstName
+        lastName
+        email
+        countryCode
+      }
+    }
+  }
 `;
-const UPSERT_USER = gql `
-  mutation (
-    $id: String!
-    $accountId: String!
-    $firstName: String!
-    $lastName: String!
-  ) {
-    upsertUser(
-      userInput: {
-        id: $id
-        accountId: $accountId
-        firstName: $firstName
-        lastName: $lastName
-      }
-    ) {
-      firstName
-      lastName
-    }
-  }
+const UPSERT_USER = gql `
+  mutation (
+    $id: String!
+    $accountId: String!
+    $firstName: String!
+    $lastName: String!
+  ) {
+    upsertUser(
+      userInput: {
+        id: $id
+        accountId: $accountId
+        firstName: $firstName
+        lastName: $lastName
+      }
+    ) {
+      firstName
+      lastName
+    }
+  }
 `;
 // view doesn't tolerate undefined, even when we're loading
 const defaultFormState = {

package/dist/collection/components/sqm-portal-register/sqm-portal-register-view.js

@@ -13,20 +13,20 @@ const style = {
   ButtonsContainer: AuthButtonsContainer,
   ErrorStyle: ErrorStyles,
 };
-const vanillaStyle = `
-sqm-portal-register {
-  margin: 0 auto;
-  width: 100%;
-  display: block;
-}
-
-:host{
-  display: block;
-}
-
-:host([hidden]) {
-  display: none;
-}
+const vanillaStyle = `
+sqm-portal-register {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+
+:host{
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}
 `;
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();

package/dist/collection/components/sqm-portal-registration-form/sqm-portal-registration-form-view.js

@@ -13,20 +13,20 @@ const style = {
   ButtonsContainer: AuthButtonsContainer,
   ErrorStyle: ErrorStyles,
 };
-const vanillaStyle = `
-sqm-portal-register {
-  margin: 0 auto;
-  width: 100%;
-  display: block;
-}
-
-:host{
-  display: block;
-}
-
-:host([hidden]) {
-  display: none;
-}
+const vanillaStyle = `
+sqm-portal-register {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+
+:host{
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}
 `;
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();

package/dist/collection/components/sqm-portal-registration-form/usePortalRegistrationForm.js

@@ -4,18 +4,18 @@ import { navigation, useQuery, useRegisterViaRegistrationFormMutation, } from "@
 import { AsYouType } from "libphonenumber-js";
 import { gql } from "graphql-request";
 import { useRegistrationFormState, } from "./useRegistrationFormState";
-const RegistrationFormQuery = gql `
-  query RegistrationFormQuery($key: String!) {
-    form(key: $key) {
-      key
-      type
-      initialData {
-        initialData
-        isEnabled
-        isEnabledErrorMessage
-      }
-    }
-  }
+const RegistrationFormQuery = gql `
+  query RegistrationFormQuery($key: String!) {
+    form(key: $key) {
+      key
+      type
+      initialData {
+        initialData
+        isEnabled
+        isEnabledErrorMessage
+      }
+    }
+  }
 `;
 export function usePortalRegistrationForm(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j;

package/dist/collection/components/sqm-portal-reset-password/sqm-portal-reset-password-view.js

@@ -25,13 +25,13 @@ const style = {
     width: "100%",
   },
 };
-const vanillaStyle = `
-:host {
-  display: block;
-}
-:host([hidden]): {
-  display: none;
-}
+const vanillaStyle = `
+:host {
+  display: block;
+}
+:host([hidden]): {
+  display: none;
+}
 `;
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();

package/dist/collection/components/sqm-portal-verify-email/sqm-portal-verify-email-view.js

@@ -9,13 +9,13 @@ const style = {
     width: "100%",
   },
 };
-const vanillaStyle = `
-:host {
-  display: block;
-}
-:host([hidden]): {
-  display: none;
-}
+const vanillaStyle = `
+:host {
+  display: block;
+}
+:host([hidden]): {
+  display: none;
+}
 `;
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();

package/dist/collection/components/sqm-program-explainer/sqm-program-explainer-view.js

@@ -24,15 +24,15 @@ export function ProgramExplainerView(props, children) {
   };
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  const vanillaStyle = `
-  ::slotted(*){
-    display: flex;
-    width: 100%;
-  }
-  @media (max-width: 499px) {
-    ::slotted(*){
-      display: block;
-    }
+  const vanillaStyle = `
+  ::slotted(*){
+    display: flex;
+    width: 100%;
+  }
+  @media (max-width: 499px) {
+    ::slotted(*){
+      display: block;
+    }
   }`;
   return (h("div", { class: sheet.classes.Container },
     h("style", { type: "text/css" },