@saasquatch/mint-components 2.1.8-22 → 2.1.8-24

package/dist/collection/components/sqm-share-link/ShareLink.stories.js

@@ -102,7 +102,7 @@ const defaultCustomizeProps = {
     open: false,
     tooltiptext: "Copied!",
   },
-  customizeUrl: true,
+  allowCustomization: true,
   customizeLinkLabel: "Customize Link",
   saveLabelText: "Save",
   cancelLabelText: "Cancel",

package/dist/collection/components/sqm-share-link/UseShareLink.stories.js

@@ -63,6 +63,6 @@ export const CustomizeUrlEnabled = createHookStory(() => {
     programId: "klip-referral-program",
     tooltiptext: "Copied to clipboard",
     tooltiplifespan: 1000,
-    customizeUrl: true,
+    allowCustomization: true,
   }))));
 });

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

@@ -9,7 +9,7 @@ const vanillaStyle = `
   }
 `;
 export function ShareLinkView(props) {
-  const { copyTextViewProps, customizeUrl, customizeLinkLabel, saveLabelText, cancelLabelText, isEditing, editValue, domainPrefix, editsRemaining, maxEdits, limitReached, validationError, isValidating, isSaving, characterLimit, minCharacters, charactersRemaining, editLimitText, editLimitReachedText, supportLinkText, customizeDisabled, customizeDisabledTooltip, onCustomizeClick, onEditValueChange, onSave, onCancel, } = props;
+  const { copyTextViewProps, allowCustomization, customizeLinkLabel, saveLabelText, cancelLabelText, isEditing, editValue, domainPrefix, editsRemaining, maxEdits, limitReached, validationError, isValidating, isSaving, characterLimit, minCharacters, charactersRemaining, editLimitText, editLimitReachedText, supportLinkText, customizeDisabled, customizeDisabledTooltip, onCustomizeClick, onEditValueChange, onSave, onCancel, } = props;
   const style = {
     Container: {
       display: "flex",
@@ -97,6 +97,32 @@ export function ShareLinkView(props) {
       gap: "var(--sl-spacing-medium)",
       alignItems: "center",
     },
+    SaveButton: {
+      cursor: "pointer",
+      fontFamily: "var(--sl-font-sans)",
+      fontSize: "var(--sl-font-size-small)",
+      fontWeight: "600",
+      padding: "var(--sl-spacing-x-small) var(--sl-spacing-medium)",
+      borderRadius: "var(--sqm-border-radius-normal, 4px)",
+      border: "1px solid var(--sl-color-neutral-900)",
+      background: "var(--sl-color-neutral-900)",
+      color: "#fff",
+      "&:disabled": {
+        opacity: "0.5",
+        cursor: "default",
+      },
+    },
+    CancelButton: {
+      margin: "0",
+      fontSize: "var(--sl-font-size-small)",
+      fontWeight: "600",
+      cursor: "pointer",
+      background: "none",
+      border: "none",
+      padding: "0",
+      fontFamily: "var(--sl-font-sans)",
+      color: "var(--sl-color-neutral-500)",
+    },
     LimitReachedContainer: {
       display: "flex",
       alignItems: "center",
@@ -107,7 +133,11 @@ export function ShareLinkView(props) {
   const styleString = sheet.toString();
   const errorMessageType = (validationError === null || validationError === void 0 ? void 0 : validationError.code) === "EXISTING_CODE_CONFLICT" ? "info" : "warning";
   const showCharactersRemaining = charactersRemaining <= 14;
-  console.log(customizeUrl, limitReached, customizeDisabled, validationError, "customize URL state");
+  const editLimitMessage = intl.formatMessage({
+    id: "editLimitText",
+    defaultMessage: editLimitText,
+  }, { editsRemaining });
+  console.log(domainPrefix, "domain prefix");
   // Editing state
   if (isEditing) {
     return (h("div", { class: sheet.classes.Container },
@@ -122,7 +152,7 @@ export function ShareLinkView(props) {
               e.preventDefault();
           }, disabled: isSaving, maxLength: characterLimit })),
       h("p", { class: sheet.classes.HelperText },
-        editLimitText,
+        editLimitMessage,
         showCharactersRemaining &&
           ` Characters remaining: ${charactersRemaining}`),
       validationError && (h("sqm-form-message", { type: errorMessageType, style: { paddingBottom: "var(--sl-spacing-xx-small)" } },
@@ -130,12 +160,12 @@ export function ShareLinkView(props) {
         validationError.description)),
       isValidating && h("p", { class: sheet.classes.HelperText }, "Validating..."),
       h("div", { class: sheet.classes.ActionRow },
-        h("sl-button", { type: "primary", onClick: onSave, disabled: isSaving ||
+        h("button", { class: sheet.classes.SaveButton, onClick: onSave, disabled: isSaving ||
             isValidating ||
             !!validationError ||
             !editValue ||
             editValue.length < minCharacters }, isSaving ? "Saving..." : saveLabelText),
-        h("sl-button", { type: "secondary", onClick: onCancel, disabled: isSaving }, cancelLabelText))));
+        h("button", { class: sheet.classes.CancelButton, onClick: onCancel, disabled: isSaving }, cancelLabelText))));
   }
   // Default / Customized / Limit reached states
   return (h("div", { class: sheet.classes.Container },
@@ -143,13 +173,13 @@ export function ShareLinkView(props) {
       styleString,
       vanillaStyle),
     h(CopyTextView, Object.assign({}, copyTextViewProps)),
-    customizeUrl &&
+    allowCustomization &&
       (customizeDisabled ? (h("sl-tooltip", { content: customizeDisabledTooltip, placement: "top", style: { display: "inline-block", width: "fit-content" } },
         h("p", { class: sheet.classes.CustomizeLinkDisabled }, customizeLinkLabel))) : (h("div", { class: sheet.classes.LimitReachedContainer },
         h("p", { class: limitReached
             ? sheet.classes.CustomizeLinkDisabled
             : sheet.classes.CustomizeLinkText, onClick: limitReached ? undefined : onCustomizeClick }, customizeLinkLabel),
-        customizeUrl && limitReached && (h("p", { class: sheet.classes.HelperText }, intl.formatMessage({
+        allowCustomization && limitReached && (h("p", { class: sheet.classes.HelperText }, intl.formatMessage({
           id: "editLimitReached",
           defaultMessage: editLimitReachedText,
         }, {

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

@@ -66,7 +66,7 @@ export class ShareLink {
      * @uiGroup Customize Vanity Link
      * @requiredFlavor impact
      */
-    this.customizeUrl = false;
+    this.allowCustomization = false;
     /**
      * Text shown below the share link input to trigger customization
      *
@@ -156,7 +156,7 @@ export class ShareLink {
      * @uiGroup Customize Vanity Link
      * @requiredFlavor impact
      */
-    this.editLimitText = "You can edit your link up to 5 times.";
+    this.editLimitText = "You can edit your link up to {editsRemaining} more times.";
     /**
      * Message shown when the edit limit has been reached. Use {supportLink} as a placeholder for the support link.
      *
@@ -495,7 +495,7 @@ export class ShareLink {
       "reflect": false,
       "defaultValue": "\"icon\""
     },
-    "customizeUrl": {
+    "allowCustomization": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -521,7 +521,7 @@ export class ShareLink {
           }],
         "text": "Enable users to customize their referral link"
       },
-      "attribute": "customize-url",
+      "attribute": "allow-customization",
       "reflect": false,
       "defaultValue": "false"
     },
@@ -823,7 +823,7 @@ export class ShareLink {
       },
       "attribute": "edit-limit-text",
       "reflect": false,
-      "defaultValue": "\"You can edit your link up to 5 times.\""
+      "defaultValue": "\"You can edit your link up to {editsRemaining} more times.\""
     },
     "editLimitReachedText": {
       "type": "string",
@@ -920,7 +920,7 @@ export class ShareLink {
       "mutable": false,
       "complexType": {
         "original": "DemoData<ShareLinkViewProps>",
-        "resolved": "{ copyTextViewProps?: CopyTextViewProps; customizeUrl?: boolean; customizeLinkLabel?: string; saveLabelText?: string; cancelLabelText?: string; isEditing?: boolean; editValue?: string; domainPrefix?: string; editsRemaining?: number; maxEdits?: number; limitReached?: boolean; validationError?: ValidationErrorInfo; isValidating?: boolean; isSaving?: boolean; characterLimit?: number; minCharacters?: number; charactersRemaining?: number; editLimitText?: string; editLimitReachedText?: string; supportLinkText?: string; customizeDisabled?: boolean; customizeDisabledTooltip?: string; onCustomizeClick?: () => void; onEditValueChange?: (value: string) => void; onSave?: () => void; onCancel?: () => void; }",
+        "resolved": "{ copyTextViewProps?: CopyTextViewProps; allowCustomization?: boolean; customizeLinkLabel?: string; saveLabelText?: string; cancelLabelText?: string; isEditing?: boolean; editValue?: string; domainPrefix?: string; editsRemaining?: number; maxEdits?: number; limitReached?: boolean; validationError?: ValidationErrorInfo; isValidating?: boolean; isSaving?: boolean; characterLimit?: number; minCharacters?: number; charactersRemaining?: number; editLimitText?: string; editLimitReachedText?: string; supportLinkText?: string; customizeDisabled?: boolean; customizeDisabledTooltip?: string; onCustomizeClick?: () => void; onEditValueChange?: (value: string) => void; onSave?: () => void; onCancel?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -944,6 +944,23 @@ export class ShareLink {
           }],
         "text": ""
       }
+    },
+    "editsRemaining": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "edits-remaining",
+      "reflect": false
     }
   }; }
 }
@@ -973,7 +990,7 @@ function useDemoShareLink(props) {
         setTimeout(() => setOpen(false), props.tooltiplifespan);
       },
     },
-    customizeUrl: props.customizeUrl,
+    allowCustomization: props.allowCustomization,
     customizeLinkLabel: props.customizeLinkLabel,
     saveLabelText: props.saveLabelText,
     cancelLabelText: props.cancelLabelText,

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

@@ -88,8 +88,8 @@ export function useShareLink(props) {
   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.customizeUrl);
-  const { data: editCountData, refetch: refetchEditCount } = useQuery(SHARE_LINK_EDIT_COUNT, {}, !(user === null || user === void 0 ? void 0 : user.jwt) || !props.customizeUrl);
+  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
   "...");
@@ -229,7 +229,7 @@ export function useShareLink(props) {
       open,
       copyString,
     },
-    customizeUrl: props.customizeUrl,
+    allowCustomization: props.allowCustomization,
     customizeLinkLabel: props.customizeLinkLabel,
     saveLabelText: props.saveLabelText,
     cancelLabelText: props.cancelLabelText,

package/dist/esm/{ShadowViewAddon-fcb6446a.js → ShadowViewAddon-395ab799.js}

@@ -4234,7 +4234,7 @@ const vanillaStyle$6 = `
   }
 `;
 function ShareLinkView(props) {
-  const { copyTextViewProps, customizeUrl, customizeLinkLabel, saveLabelText, cancelLabelText, isEditing, editValue, domainPrefix, editsRemaining, maxEdits, limitReached, validationError, isValidating, isSaving, characterLimit, minCharacters, charactersRemaining, editLimitText, editLimitReachedText, supportLinkText, customizeDisabled, customizeDisabledTooltip, onCustomizeClick, onEditValueChange, onSave, onCancel, } = props;
+  const { copyTextViewProps, allowCustomization, customizeLinkLabel, saveLabelText, cancelLabelText, isEditing, editValue, domainPrefix, editsRemaining, maxEdits, limitReached, validationError, isValidating, isSaving, characterLimit, minCharacters, charactersRemaining, editLimitText, editLimitReachedText, supportLinkText, customizeDisabled, customizeDisabledTooltip, onCustomizeClick, onEditValueChange, onSave, onCancel, } = props;
   const style = {
     Container: {
       display: "flex",
@@ -4358,7 +4358,11 @@ function ShareLinkView(props) {
   const styleString = sheet.toString();
   const errorMessageType = (validationError === null || validationError === void 0 ? void 0 : validationError.code) === "EXISTING_CODE_CONFLICT" ? "info" : "warning";
   const showCharactersRemaining = charactersRemaining <= 14;
-  console.log(customizeUrl, limitReached, customizeDisabled, validationError, "customize URL state");
+  const editLimitMessage = intl.formatMessage({
+    id: "editLimitText",
+    defaultMessage: editLimitText,
+  }, { editsRemaining });
+  console.log(domainPrefix, "domain prefix");
   // Editing state
   if (isEditing) {
     return (h("div", { class: sheet.classes.Container },
@@ -4373,7 +4377,7 @@ function ShareLinkView(props) {
               e.preventDefault();
           }, disabled: isSaving, maxLength: characterLimit })),
       h("p", { class: sheet.classes.HelperText },
-        editLimitText,
+        editLimitMessage,
         showCharactersRemaining &&
           ` Characters remaining: ${charactersRemaining}`),
       validationError && (h("sqm-form-message", { type: errorMessageType, style: { paddingBottom: "var(--sl-spacing-xx-small)" } },
@@ -4394,13 +4398,13 @@ function ShareLinkView(props) {
       styleString,
       vanillaStyle$6),
     h(CopyTextView, Object.assign({}, copyTextViewProps)),
-    customizeUrl &&
+    allowCustomization &&
       (customizeDisabled ? (h("sl-tooltip", { content: customizeDisabledTooltip, placement: "top", style: { display: "inline-block", width: "fit-content" } },
         h("p", { class: sheet.classes.CustomizeLinkDisabled }, customizeLinkLabel))) : (h("div", { class: sheet.classes.LimitReachedContainer },
         h("p", { class: limitReached
             ? sheet.classes.CustomizeLinkDisabled
             : sheet.classes.CustomizeLinkText, onClick: limitReached ? undefined : onCustomizeClick }, customizeLinkLabel),
-        customizeUrl && limitReached && (h("p", { class: sheet.classes.HelperText }, intl.formatMessage({
+        allowCustomization && limitReached && (h("p", { class: sheet.classes.HelperText }, intl.formatMessage({
           id: "editLimitReached",
           defaultMessage: editLimitReachedText,
         }, {
@@ -4494,8 +4498,8 @@ function useShareLink(props) {
   const [addShareLinkCode, { loading: isSaving }] = $e(ADD_SHARE_LINK_CODE);
   const [validateLinkCode] = Xe(VALIDATE_LINK_CODE);
   const { refresh } = Qe();
-  const { data: linkDomainData } = wn(GET_LINK_DOMAIN, {}, !(user === null || user === void 0 ? void 0 : user.jwt) || !props.customizeUrl);
-  const { data: editCountData, refetch: refetchEditCount } = wn(SHARE_LINK_EDIT_COUNT, {}, !(user === null || user === void 0 ? void 0 : user.jwt) || !props.customizeUrl);
+  const { data: linkDomainData } = wn(GET_LINK_DOMAIN, {}, !(user === null || user === void 0 ? void 0 : user.jwt) || !props.allowCustomization);
+  const { data: editCountData, refetch: refetchEditCount } = wn(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
   "...");
@@ -4635,7 +4639,7 @@ function useShareLink(props) {
       open,
       copyString,
     },
-    customizeUrl: props.customizeUrl,
+    allowCustomization: props.allowCustomization,
     customizeLinkLabel: props.customizeLinkLabel,
     saveLabelText: props.saveLabelText,
     cancelLabelText: props.cancelLabelText,