@saasquatch/mint-components 2.2.0-0 → 2.2.0-10

package/dist/collection/components/sqm-share-link/useShareLink.js

@@ -1,16 +1,15 @@
-import { useEngagementMedium, useMutation, useParentValue, useProgramId, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
-import { useState } from "@saasquatch/universal-hooks";
+import { useEngagementMedium, useLazyQuery, useMutation, useParentValue, useProgramId, useQuery, useRefreshDispatcher, useUserIdentity, } from "@saasquatch/component-boilerplate";
+import { useRef, useState } from "@saasquatch/universal-hooks";
 import { gql } from "graphql-request";
 import { REFERRAL_CODES_NAMESPACE, SET_CODE_COPIED, } from "../sqm-referral-codes/useReferralCodes";
+const MAX_EDITS = 5;
+const CHARACTER_LIMIT = 15;
+const MIN_CHARACTERS = 3;
 const MessageLinkQuery = gql `
-  query ($programId: ID, $engagementMedium: UserEngagementMedium!) {
+  query ($programId: ID) {
     user: viewer {
       ... on User {
-        shareLink(
-          programId: $programId
-          engagementMedium: $engagementMedium
-          shareMedium: DIRECT
-        )
+        shareLink(programId: $programId)
       }
     }
   }
@@ -20,19 +19,115 @@ const WIDGET_ENGAGEMENT_EVENT = gql `
     createUserAnalyticsEvent(eventMeta: $eventMeta)
   }
 `;
+const ADD_SHARE_LINK_CODE = gql `
+  mutation ($addShareLinkCodeInput: AddShareLinkCodeInput!) {
+    addShareLinkCode(addShareLinkCodeInput: $addShareLinkCodeInput) {
+      linkCode {
+        linkCode
+        shortUrl
+        referralCode {
+          code
+        }
+      }
+    }
+  }
+`;
+const VALIDATE_LINK_CODE = gql `
+  query validateLinkCode($linkCode: String!) {
+    validateLinkCode(linkCode: $linkCode) {
+      valid
+      invalidReason
+    }
+  }
+`;
+const GET_LINK_DOMAIN = gql `
+  query getLinkDomain {
+    tenantSettings {
+      primaryLinkDomain {
+        host
+      }
+    }
+  }
+`;
+const SHARE_LINK_EDIT_COUNT = gql `
+  query shareLinkEditCount {
+    viewer {
+      ... on User {
+        shareLinkCodes {
+          totalCount
+          data {
+            isVanity
+          }
+        }
+      }
+    }
+  }
+`;
+function parseShareUrl(url) {
+  try {
+    const parsed = new URL(url);
+    return {
+      url: parsed.origin + parsed.pathname,
+      domain: parsed.origin + "/",
+      path: parsed.pathname.slice(1),
+    };
+  }
+  catch {
+    return { url, domain: url, path: "" };
+  }
+}
 export function useShareLink(props) {
-  var _a, _b;
+  var _a, _b, _c, _d, _e, _f, _g;
   const { programId = useProgramId() } = props;
   const user = useUserIdentity();
   const engagementMedium = useEngagementMedium();
   const contextData = useParentValue(REFERRAL_CODES_NAMESPACE);
-  const { data } = useQuery(MessageLinkQuery, { programId, engagementMedium }, !(user === null || user === void 0 ? void 0 : user.jwt) || !!props.linkOverride || (contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) !== undefined);
+  const { data, refetch } = useQuery(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt) || !!props.linkOverride || (contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) !== undefined);
   const [sendLoadEvent] = useMutation(WIDGET_ENGAGEMENT_EVENT);
-  const [setCopied, copiedRes] = useMutation(SET_CODE_COPIED);
-  const copyString = (_b = ((contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) || ((_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.shareLink))) !== null && _b !== void 0 ? _b : 
+  const [setCopied] = useMutation(SET_CODE_COPIED);
+  const [addShareLinkCode, { loading: isSaving }] = useMutation(ADD_SHARE_LINK_CODE);
+  const [validateLinkCode] = useLazyQuery(VALIDATE_LINK_CODE);
+  const { refresh } = useRefreshDispatcher();
+  const { data: linkDomainData } = useQuery(GET_LINK_DOMAIN, {}, !(user === null || user === void 0 ? void 0 : user.jwt) || !props.allowCustomization);
+  const { data: editCountData, refetch: refetchEditCount } = useQuery(SHARE_LINK_EDIT_COUNT, {}, !(user === null || user === void 0 ? void 0 : user.jwt) || !props.allowCustomization);
+  const { url: copyString, domain: domainPrefix, path: pathSuffix, } = parseShareUrl((_b = ((contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) || ((_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.shareLink))) !== null && _b !== void 0 ? _b : 
   // Shown during loading
-  "...";
+  "...");
   const [open, setOpen] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState("");
+  const [validationError, setValidationError] = useState(null);
+  const [isValidating, setIsValidating] = useState(false);
+  const debounceTimerRef = useRef(undefined);
+  const latestValidationValueRef = useRef("");
+  const hasPrimaryLinkDomain = ((_c = linkDomainData === null || linkDomainData === void 0 ? void 0 : linkDomainData.tenantSettings) === null || _c === void 0 ? void 0 : _c.primaryLinkDomain) != null;
+  const customizeDisabled = !hasPrimaryLinkDomain;
+  const vanityCount = (_g = (_f = (_e = (_d = editCountData === null || editCountData === void 0 ? void 0 : editCountData.viewer) === null || _d === void 0 ? void 0 : _d.shareLinkCodes) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.filter((code) => code.isVanity).length) !== null && _g !== void 0 ? _g : 0;
+  const editCount = vanityCount;
+  const editsRemaining = Math.max(0, MAX_EDITS - editCount);
+  const limitReached = editsRemaining <= 0;
+  function mapErrorCodeToInfo(errorCode) {
+    if (!errorCode)
+      return null;
+    const errorMap = {
+      EXISTING_CODE_CONFLICT: {
+        code: "EXISTING_CODE_CONFLICT",
+        title: props.linkTakenErrorTitle,
+        description: props.linkTakenErrorDescription,
+      },
+      INVALID_CHARACTER: {
+        code: "INVALID_CHARACTER",
+        title: props.invalidCharactersErrorTitle,
+        description: props.invalidCharactersErrorDescription,
+      },
+      BLOCKED_WORD: {
+        code: "BLOCKED_WORD",
+        title: props.restrictedWordsErrorTitle,
+        description: props.restrictedWordsErrorDescription,
+      },
+    };
+    return errorMap[errorCode];
+  }
   async function onClick() {
     if (contextData) {
       await setCopied({ referralCode: contextData.referralCode });
@@ -56,5 +151,123 @@ export function useShareLink(props) {
       },
     });
   }
-  return { ...props, onClick, open, copyString: copyString };
+  function onCustomizeClick() {
+    if (limitReached || customizeDisabled)
+      return;
+    setIsEditing(true);
+    setEditValue(editCount === 0 ? "" : pathSuffix);
+    setValidationError(null);
+  }
+  function onEditValueChange(value) {
+    const trimmed = value.slice(0, CHARACTER_LIMIT);
+    setEditValue(trimmed);
+    setValidationError(null);
+    latestValidationValueRef.current = trimmed;
+    if (debounceTimerRef.current)
+      clearTimeout(debounceTimerRef.current);
+    if (!trimmed || trimmed.length < MIN_CHARACTERS) {
+      setIsValidating(false);
+      return;
+    }
+    setIsValidating(true);
+    debounceTimerRef.current = setTimeout(async () => {
+      var _a, _b;
+      const requestedValue = trimmed;
+      try {
+        const result = await validateLinkCode({ linkCode: requestedValue });
+        // Discard stale responses if the user has continued typing
+        if (latestValidationValueRef.current !== requestedValue)
+          return;
+        if (!((_a = result === null || result === void 0 ? void 0 : result.validateLinkCode) === null || _a === void 0 ? void 0 : _a.valid)) {
+          const reason = (_b = result === null || result === void 0 ? void 0 : result.validateLinkCode) === null || _b === void 0 ? void 0 : _b.invalidReason;
+          setValidationError(mapErrorCodeToInfo(reason));
+        }
+      }
+      catch {
+        // Validation query failed — don't block the user
+        if (latestValidationValueRef.current !== requestedValue)
+          return;
+      }
+      if (latestValidationValueRef.current === requestedValue) {
+        setIsValidating(false);
+      }
+    }, 500);
+  }
+  async function onSave() {
+    var _a, _b;
+    if (!editValue ||
+      editValue.length < MIN_CHARACTERS ||
+      validationError ||
+      isValidating)
+      return;
+    try {
+      await addShareLinkCode({
+        addShareLinkCodeInput: {
+          userId: user === null || user === void 0 ? void 0 : user.id,
+          accountId: user === null || user === void 0 ? void 0 : user.accountId,
+          programId,
+          linkCode: editValue,
+          makeShareLinkCodePrimaryForReferralCode: true,
+        },
+      });
+      setIsEditing(false);
+      await Promise.all([refetch(), refetchEditCount()]);
+      refresh();
+    }
+    catch (e) {
+      const errorCode = (_a = e === null || e === void 0 ? void 0 : e.extensions) === null || _a === void 0 ? void 0 : _a.code;
+      setValidationError((_b = mapErrorCodeToInfo(errorCode)) !== null && _b !== void 0 ? _b : {
+        code: null,
+        title: props.saveErrorTitle,
+        description: (e === null || e === void 0 ? void 0 : e.message) || props.saveErrorDescription,
+      });
+    }
+  }
+  function onCancel() {
+    setIsEditing(false);
+    setEditValue("");
+    setValidationError(null);
+    setIsValidating(false);
+    latestValidationValueRef.current = "";
+    if (debounceTimerRef.current)
+      clearTimeout(debounceTimerRef.current);
+  }
+  return {
+    copyTextViewProps: {
+      ...props,
+      onClick,
+      open,
+      copyString,
+    },
+    minCharactersText: props.minCharactersText,
+    allowCustomization: props.allowCustomization,
+    customizeLinkLabel: props.customizeLinkButtonLabel,
+    saveLabelText: props.saveLabelText,
+    savingLabelText: props.savingLabelText,
+    cancelLabelText: props.cancelLabelText,
+    editLabelText: props.editLabelText,
+    charactersRemainingText: props.charactersRemainingText,
+    validatingLabelText: props.validatingLabelText,
+    isEditing,
+    editValue,
+    domainPrefix,
+    editsRemaining,
+    maxEdits: MAX_EDITS,
+    limitReached,
+    validationError,
+    isValidating,
+    isSaving,
+    characterLimit: CHARACTER_LIMIT,
+    minCharacters: MIN_CHARACTERS,
+    charactersRemaining: CHARACTER_LIMIT - editValue.length,
+    editLimitText: props.editLimitText,
+    editLimitReachedText: props.editLimitReachedText,
+    supportLinkText: props.supportLinkText,
+    customizeDisabled,
+    customizeDisabledTooltip: props.customizeDisabledTooltip,
+    onCustomizeClick,
+    onEditValueChange,
+    onSave,
+    onCancel,
+  };
 }

package/dist/collection/components/sqm-stencilbook/sqm-stencilbook.js

@@ -109,6 +109,7 @@ import * as Skeleton from "../sqm-skeleton/Skeleton.stories";
 import * as UserInfoFormView from "../tax-and-cash/sqm-user-info-form/UserInfoFormView.stories";
 import * as PartnerInfoModal from "../sqm-partner-info-modal/PartnerInfoModal.stories";
 import * as WidgetVerification from "../sqm-widget-verification/WidgetVerification.stories";
+import * as UserAttribute from "../sqm-user-attribute/UserAttribute.stories";
 import { ShadowViewAddon } from "../../ShadowViewAddon";
 import { CucumberAddon } from "./CucumberAddon";
 import { HookStoryAddon } from "./HookStoryAddon";
@@ -222,6 +223,7 @@ const stories = [
   TaxAndCashReferralTable,
   PartnerInfoModal,
   WidgetVerification,
+  UserAttribute,
 ];
 /**
  * For internal documentation

package/dist/collection/components/sqm-text-span/sqm-text-span-view.js

@@ -50,7 +50,7 @@ export function TextSpanView(props, children) {
       display: inline;
     }
   `;
-  return (h("span", { class: sheet.classes[type], part: "sqm-text-span-base" },
+  return (h("span", { class: sheet.classes[type], part: "sqm-text-span" },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),

package/dist/collection/components/sqm-user-attribute/UserAttribute.stories.js

@@ -0,0 +1,43 @@
+import { h } from "@stencil/core";
+import scenario from "./user-attribute.feature";
+export default {
+  title: "Components/User Attribute",
+  parameters: {
+    scenario,
+  },
+};
+export const Default = () => {
+  return (h("sqm-user-attribute", { demoData: {
+      loading: false,
+      value: "impact.com",
+    } }));
+};
+/*
+ Verifies that an sqm-user-attribute with no valid value
+ collapses completely and does not create extra space
+ (e.g. a double gap) in a flex layout.
+ */
+export const InvalidValue = () => {
+  return (h("div", { style: { display: "flex", flexDirection: "column", gap: "16px" } },
+    h("div", { style: { background: "#e0e0e0", padding: "8px" } }, "Above"),
+    h("sqm-user-attribute", { demoData: {
+        loading: false,
+        value: null,
+      } }),
+    h("div", { style: { background: "#e0e0e0", padding: "8px" } }, "Below")));
+};
+export const Loading = () => {
+  return (h("sqm-user-attribute", { demoData: {
+      loading: true,
+      value: "impact.com",
+    } }));
+};
+export const WithCustomStyles = () => {
+  return (h("sqm-user-attribute", { demoData: {
+      loading: false,
+      value: "impact.com",
+      fontSize: 24,
+      color: "#4CAF50",
+      fontWeight: 700,
+    } }));
+};

package/dist/collection/components/sqm-user-attribute/sqm-user-attribute-view.js

@@ -0,0 +1,19 @@
+import { h, Host } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+export function UserAttributeView(props) {
+  const style = {
+    P: {
+      margin: "0",
+      padding: "0",
+      fontSize: props.fontSize ? `${props.fontSize}px` : "inherit",
+      fontWeight: props.fontWeight || "inherit",
+      color: props.color || "var(--sqm-text)",
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  const loadingSkeleton = (h("sqm-skeleton", { width: "200px", height: "20px" }));
+  return (h(Host, null,
+    h("style", null, styleString),
+    h("p", { class: sheet.classes.P, part: "sqm-base" }, props.loading ? loadingSkeleton : props.value)));
+}

package/dist/collection/components/sqm-user-attribute/sqm-user-attribute.js

@@ -0,0 +1,175 @@
+import { isDemo } from "@saasquatch/component-boilerplate";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Host, Prop, State } from "@stencil/core";
+import deepmerge from "deepmerge";
+import { UserAttributeView, } from "./sqm-user-attribute-view";
+import { useUserAttribute } from "./useUserAttribute";
+/**
+ * @uiName User Attribute
+ * @exampleGroup Advanced
+ * @example User Attribute - <sqm-user-attribute value="lastSeenDate"></sqm-user-attribute>
+ */
+export class UserAttribute {
+  constructor() {
+    this.ignored = true;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const props = isDemo() ? useCustomFieldsDemo(this) : useUserAttribute(this);
+    if (props.value == null) {
+      return h(Host, { style: { display: "none" } });
+    }
+    return h(UserAttributeView, Object.assign({}, props));
+  }
+  static get is() { return "sqm-user-attribute"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "value": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "string | number",
+        "resolved": "number | string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Custom field key",
+            "name": "uiName"
+          }, {
+            "text": "customFieldSelector",
+            "name": "uiWidget"
+          }],
+        "text": "The custom field key to display."
+      },
+      "attribute": "value",
+      "reflect": false
+    },
+    "fontSize": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Font size",
+            "name": "uiName"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Number in pixels."
+      },
+      "attribute": "font-size",
+      "reflect": false
+    },
+    "color": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "color",
+            "name": "format"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "color",
+      "reflect": false
+    },
+    "fontWeight": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Font weight",
+            "name": "uiName"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }, {
+            "text": "[100, 200, 300, 400, 500, 600, 700, 800, 900]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"Thin\", \"Extra Light\", \"Light\", \"Normal\", \"Medium\", \"Semi Bold\", \"Bold\", \"Extra Bold\", \"Heavy\"]",
+            "name": "uiEnumNames"
+          }],
+        "text": "Font weight"
+      },
+      "attribute": "font-weight",
+      "reflect": false
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<UserAttributeViewProps>",
+        "resolved": "{ loading?: boolean; value?: string; fontSize?: number; color?: string; fontWeight?: number; }",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../global/demo"
+          },
+          "UserAttributeViewProps": {
+            "location": "import",
+            "path": "./sqm-user-attribute-view"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}
+function useCustomFieldsDemo(props) {
+  return deepmerge({
+    loading: false,
+    value: "Custom Field Value",
+    fontSize: props.fontSize,
+    color: props.color,
+    fontWeight: props.fontWeight,
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}

package/dist/collection/components/sqm-user-attribute/useUserAttribute.js

@@ -0,0 +1,30 @@
+import { useQuery, useUserIdentity } from "@saasquatch/component-boilerplate";
+import { gql } from "graphql-request";
+import { DateTime } from "luxon";
+const GET_CUSTOM_FIELDS = gql `
+  query getCustomFields {
+    viewer {
+      ... on User {
+        customFields
+      }
+    }
+  }
+`;
+export function useUserAttribute(props) {
+  var _a, _b;
+  const user = useUserIdentity();
+  const res = useQuery(GET_CUSTOM_FIELDS, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const loading = res.loading;
+  const customFields = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.customFields;
+  let value = customFields === null || customFields === void 0 ? void 0 : customFields[props.value];
+  if (props.value === "lastSeenDate" && typeof value === "number") {
+    value = DateTime.fromMillis(value).toLocaleString(DateTime.DATE_MED);
+  }
+  return {
+    loading,
+    value,
+    fontSize: props.fontSize,
+    color: props.color,
+    fontWeight: props.fontWeight,
+  };
+}

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

@@ -1,4 +1,6 @@
 export const SHOW_CODE_NAMESPACE = "sq:code-verification";
+export const SHOW_PARTNER_MODAL_NAMESPACE = "sq:show-partner-modal";
+export const PARTNER_CREATED_NAMESPACE = "sq:partner-created";
 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-email-verification/useEmailVerification.js

@@ -61,7 +61,7 @@ export function useUpsertUserEmail() {
 }
 export function useWidgetEmailVerification(props) {
   const [_, setShowCode] = useParent(SHOW_CODE_NAMESPACE);
-  const [email, setEmail] = useParent(VERIFICATION_EMAIL_NAMESPACE);
+  const [_email, setEmail] = useParent(VERIFICATION_EMAIL_NAMESPACE);
   const [emailExists, setEmailExists] = useState(false);
   const [error, setError] = useState(false);
   const [mutationError, setMutationError] = useState(false);
@@ -80,29 +80,39 @@ export function useWidgetEmailVerification(props) {
       setLoading(false);
   }, [initialized]);
   const submitEmail = async (e) => {
+    var _a, _b, _c, _d;
     e.preventDefault();
     if (!(data === null || data === void 0 ? void 0 : data.viewer))
       return;
     setLoading(true);
-    const toAddress = data.viewer.email;
+    setMutationError(false);
+    setError(false);
+    let 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();
+      const formData = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.formData;
+      const newEmail = (_c = (_b = formData === null || formData === void 0 ? void 0 : formData.get("email")) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : "";
       if (!emailRegex.test(newEmail)) {
         setError(true);
+        setLoading(false);
         return;
       }
-      const result = await upsertUserEmail(newEmail);
-      if (!result || !result.user.email)
+      const upsertResult = await upsertUserEmail(newEmail);
+      if (!upsertResult || !((_d = upsertResult.upsertUser) === null || _d === void 0 ? void 0 : _d.email)) {
         setError(true);
+        setLoading(false);
+        return;
+      }
+      toAddress = upsertResult.upsertUser.email;
     }
     // UI should not allow this call til initialisation is done
-    if (!initialized)
+    if (!initialized) {
+      setLoading(false);
       return;
+    }
     const result = await sendEmail();
-    if (!result || !result.success)
+    if (!result || !result.success) {
       setMutationError(true);
+    }
     else {
       // This is used to let the code verification widget know an email was already sent
       setEmail(toAddress);