Vanity urls by 00salmon · Pull Request #493 · saasquatch/program-tools

Sam Beveridge (00salmon) · 2026-04-16T21:50:00Z

Description of the change

Description here

Type of change

Bug fix (non-breaking change that fixes an issue)
New feature (non-breaking change that adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Documentation or Development tools (readme, specs, tests, code formatting)

Links

Jira issue number: (PUT IT HERE)
Process.st launch checklist: (PUT IT HERE)

Checklists

Development

Prettier was run (if applicable)
The behaviour changes in the pull request are covered by specs
All tests related to the changed code pass in development

Paperwork

This pull request has a descriptive title and information useful to a reviewer
This pull request has a Jira number
This pull request has a Process.st launch checklist

Code review

Changes have been reviewed by at least one other engineer
Security impacts of this change have been considered

…er save

Copilot

Pull request overview

This PR introduces “vanity URL” customization support for the sqm-share-link component, adding UI and GraphQL operations to validate and save user-chosen link codes.

Changes:

Adds a new ShareLinkView with an edit mode UI (validation, save/cancel, edit-limit messaging).
Extends useShareLink to support vanity link validation/saving and edit limit tracking via new GraphQL queries/mutations.
Updates documentation, Storybook stories, and dependency graphs to reflect the new component relationships.

Reviewed changes

Copilot reviewed 11 out of 13 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
packages/mint-components/src/index.html	Adds a commented-out example usage for `sqm-share-link`.
packages/mint-components/src/components/sqm-stencilbook/readme.md	Updates the component dependency graph to include `sqm-share-link`.
packages/mint-components/src/components/sqm-share-link/useShareLink.tsx	Implements vanity link customization logic, validation debounce, and new GraphQL operations.
packages/mint-components/src/components/sqm-share-link/sqm-share-link.tsx	Adds new props for vanity customization and switches rendering to `ShareLinkView`.
packages/mint-components/src/components/sqm-share-link/sqm-share-link-view.tsx	New view implementing the customization/edit UI and edit-limit message rendering.
packages/mint-components/src/components/sqm-share-link/readme.md	Documents new props and dependency graph updates.
packages/mint-components/src/components/sqm-share-link/UseShareLink.stories.tsx	Updates hook stories to use `ShareLinkView` and adds a customization-enabled story.
packages/mint-components/src/components/sqm-share-link/ShareLink.stories.tsx	Adds multiple `ShareLinkView` stories covering customization states.
packages/mint-components/src/components/sqm-share-code/sqm-share-code.tsx	Removes a now-irrelevant `rewardStatus` field in demo props and formats options.
packages/mint-components/src/components/sqm-form-message/readme.md	Updates docs dependency listing/graph to include `sqm-share-link`.
packages/mint-components/src/components.d.ts	Updates generated typings to include the new props and demo data type for `sqm-share-link`.
packages/mint-components/package.json	Bumps package version and updates `@raisins/stencil-docs-target` dependency.
packages/mint-components/package-lock.json	Updates lockfile for the dependency bump (but version metadata is currently inconsistent).

Files not reviewed (1)

packages/mint-components/package-lock.json: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-16T21:55:43Z

 import { isDemo } from "@saasquatch/component-boilerplate";
 import { useState, withHooks } from "@saasquatch/stencil-hooks";
-import { Component, Prop, h } from "@stencil/core";
+import { Component, Fragment, Prop, h } from "@stencil/core";


Fragment is imported from @stencil/core but not used in this file. Remove the unused import to keep the module clean.

Suggested change

import { Component, Fragment, Prop, h } from "@stencil/core";

import { Component, Prop, h } from "@stencil/core";

Copilot · 2026-04-16T21:55:43Z

 {
  "name": "@saasquatch/mint-components",
-  "version": "2.1.7",
+  "version": "2.1.8-18",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@saasquatch/mint-components",
-      "version": "2.1.7",
+      "version": "2.1.8-18",
      "hasInstallScript": true,


package-lock.json version is 2.1.8-18 (both the top-level and the packages[""] entry), but package.json was bumped to 2.1.8-19. Update the lockfile version fields so they match the package version to avoid inconsistent dependency metadata.

Copilot · 2026-04-16T21:55:44Z

 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)
      }


shareLink GraphQL query here no longer passes engagementMedium (and previously also passed shareMedium: DIRECT). Other components in this repo still query shareLink with engagementMedium: UserEngagementMedium! (e.g. sqm-qr-code/useQRCode.ts), so this change is likely to cause a runtime GraphQL validation error or change link generation semantics. Restore the required arguments/variables (or update all shareLink queries consistently if the schema changed).

Copilot · 2026-04-16T21:55:44Z

  tooltiplifespan: number;
  linkOverride?: string;
+  customizeUrl?: boolean;
+  customizeUrlText?: string;


customizeUrlText is declared on ShareLinkProps but never used anywhere in the hook or view. If it’s not needed, remove it; if it’s meant to control UI copy, thread it through to ShareLinkView and document it in sqm-share-link/readme.md.

Suggested change

customizeUrlText?: string;

Copilot · 2026-04-16T21:55:44Z

+    if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+
+    if (!trimmed || trimmed.length < MIN_CHARACTERS) {
+      setIsValidating(false);
+      return;
+    }
+
+    setIsValidating(true);
+    debounceTimerRef.current = setTimeout(async () => {
+      try {
+        const result = await validateLinkCode({ linkCode: trimmed });
+        if (!result?.validateLinkCode?.valid) {
+          const reason = result?.validateLinkCode
+            ?.invalidReason as ValidationErrorCode;
+          setValidationError(mapErrorCodeToInfo(reason));
+        }
+      } catch {
+        // Validation query failed — don't block the user
+      }
+      setIsValidating(false);
+    }, 2000);


The debounced validation uses a setTimeout but the timer is only cleared when the input changes. If the user cancels/saves (or the component unmounts) while a timer is pending, the callback can still run later and update state, potentially reintroducing validation errors after leaving edit mode. Clear any pending timer on cancel/save and on unmount (cleanup effect), and consider guarding against stale async responses updating state for an older trimmed value.

Copilot · 2026-04-16T21:55:45Z

+              supportLink: (
+                <a target="_blank" href="https://example.com">
+                  {supportLinkText}
+                </a>


The support link in the edit-limit message is hard-coded to https://example.com, which will ship users to a placeholder domain and isn’t configurable via props. Consider adding a supportLinkUrl/supportEmail prop (similar to other components) or otherwise sourcing the real destination. Also, since this uses target="_blank", add rel="noopener noreferrer" to prevent reverse-tabnabbing.

Copilot · 2026-04-16T21:55:45Z

  "title": "Mint Components",
-  "version": "2.1.7",
+  "version": "2.1.8-19",
  "description": "A minimal design library with components for referral and loyalty experiences. Built with Shoelace components by Saasquatch.",


package.json sets the package version to 2.1.8-19, but package-lock.json was updated to 2.1.8-18. This mismatch can cause confusing installs/publishes; align the version fields across both files (and the nested packages[""] entry in the lockfile).

Copilot · 2026-04-16T21:55:45Z

+  function onCancel() {
+    setIsEditing(false);
+    setEditValue("");
+    setValidationError(null);
+    setIsValidating(false);
+  }


onCancel resets editing state but does not clear any pending debounce timer started by onEditValueChange. This can cause setValidationError/setIsValidating to run after cancel, leaving stale validation state the next time the editor is opened. Clear the pending timeout in onCancel (and similarly after a successful save).

Copilot · 2026-04-16T21:55:45Z

+          <button
+            class={sheet.classes.SaveButton}
+            onClick={onSave}
+            disabled={
+              isSaving || isValidating || !!validationError || !editValue || editValue.length < minCharacters
+            }
+          >
+            {isSaving ? "Saving..." : saveLabelText}
+          </button>
+          <button
+            class={sheet.classes.CancelButton}
+            onClick={onCancel}
+            disabled={isSaving}
+          >


The Save/Cancel controls are plain <button> elements without an explicit type. If this component is ever rendered inside a form, these will default to type="submit" and may trigger unintended form submission. Set type="button" on both buttons (and keep disabled behavior as-is).

AndiLuo · 2026-04-16T22:44:31Z

+          >
+            {isSaving ? "Saving..." : saveLabelText}
+          </button>
+          <button


Is it possible to use shoelace components in the editing state?

Sam Beveridge (00salmon) added 14 commits April 8, 2026 15:55

initial build of share link editor

89c8fbc

built out some skeleton code for error states from validation

c3b56fb

added text for when edit limit is reached, more polish and stories

7555de2

use sqm-form-message instead

eace5ac

added state for when no primary link domain has been added

e2de455

fix placement of tooltip

f40c372

fix a few queries, pre-release

2b8fc73

wired up validation, cleaned up TODOs

676e120

update errors to match actual values from backend schema

b1ca55a

pre-release

67ea087

refetch edit count on save, make links primary on save

21b8ded

remove success state, added minimum length, refresh share buttons aft…

a93ca1d

…er save

parse out query param from vanity sharelinks, clean up code a bit

cfe15ba

added group / requiredFlavor

ffa122f

Copilot AI review requested due to automatic review settings April 16, 2026 21:50

Copilot started reviewing on behalf of Sam Beveridge (00salmon) April 16, 2026 21:50 View session

Copilot AI reviewed Apr 16, 2026

View reviewed changes

AndiLuo reviewed Apr 16, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vanity urls#493

Vanity urls#493
Sam Beveridge (00salmon) wants to merge 14 commits intomasterfrom
vanity-url

Sam Beveridge (00salmon) commented Apr 16, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 16, 2026

Uh oh!

Copilot AI Apr 16, 2026

Uh oh!

Copilot AI Apr 16, 2026

Uh oh!

Copilot AI Apr 16, 2026

Uh oh!

Copilot AI Apr 16, 2026

Uh oh!

Copilot AI Apr 16, 2026

Uh oh!

Copilot AI Apr 16, 2026

Uh oh!

Copilot AI Apr 16, 2026

Uh oh!

Copilot AI Apr 16, 2026

Uh oh!

AndiLuo Apr 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

3 participants

	import { Component, Fragment, Prop, h } from "@stencil/core";
	import { Component, Prop, h } from "@stencil/core";

Conversation

Sam Beveridge (00salmon) commented Apr 16, 2026

Description of the change

Type of change

Links

Checklists

Development

Paperwork

Code review

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

AndiLuo Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

3 participants